fbpx

Mi az a Vue.js? Élő példákkal bemutatva!

Vue.js logo
Vue.js logo

Manapság minden egyes weboldalnak, webáruháznak szüksége van a megfelelő böngészőoldali élmény, valamint funkcionalitás megteremtésére. Ez alapvető fontosságú: ugyanis ezek nélkül az adott online megjelenés nem fogja azokat az eredményeket hozni, amiket szeretnénk, és elvárnánk. A Vue.js ebben tud nekünk segíteni.

Aki dolgozott már JavaScripttel, az tisztában van vele, hogy egy viszonylag könnyen használható scriptnyelv, viszont hosszú távon natív JavaScriptet használni-na, ez sokak szerint nem igazán jó ötlet.

Gondolhatunk itt számos különféle funkcionalitásra: egy felugró ablak megnyitása, bizonyos elemek elrejtése adott feltételek mellett: mindez szimpla JavaScripttel megoldva több időbe telhet. Akkor pedig, ha komplexebb applikációról lenne szó, egészen biztosan rosszul járunk.

Ennek kapcsán érdemes lehet valamilyen jobb megoldás után néznünk.

Miért van szükség keretrendszerekre, könyvtárakra?

Keretrendszerekre (framework), valamint könyvtárakra (library) általában azért lehet szükség, mert ezeknek a segítségével jóval gyorsabban dolgozhatunk, valósíthatjuk meg az adott funkcionalitást.

Ezen felül, gondoljunk csak a böngésző kompatibilitásra: ez a probléma nem csupán CSS esetén merülhet fel. A megírt kódunk nem egyformán fog működni minden böngésző, illetve azok verziói alatt.

Mindezek eredményeként a mai modern webfejlesztésben gyakorlatilag mindenki keretrendszereket, és könyvtárakat is használ.

Mi az a Vue.js?

A Vue.js egy JavaScript könyvtár. Sok esetben keretrendszernek szokták hívni, pedig valójában nem az: az Angular, React, Vue trióból egyedül az Angular minősül frameworknek.

2014-ben jelent meg először, a Google egyik volt fejlesztője készítette eredetileg. Azóta hihetetlenül sok újításon ment keresztül, és a használati tendenciája egyre inkább felfelé ívelőnek látszik. Miért?

Miért a Vue.js?

A Vue.js egy nagyon könnyen megtanulható, és használható JavaScript könyvtár. Alacsony Learning Curve-vel rendelkezik, én annak idején az Udemy-n egy 20 órás tananyagot végig csináltam a témához kapcsolódóan, és egy kicsi gyakorlás után már teljesen tudtam is használni azokra a feladatokra, amikre szerettem volna.

A Vue.js-t annak ellenére, hogy könnyebben elsajátítható, rengeteg feladatra könnyedén fel lehet használni. Kifejezetten szeretik startupok is használni, valamint kiváló párosítást alkot Laravel keretrendszerrel.

Abban az esetben, ha még soha nem használtunk JavaScript keretrendszert, kifejezetten jó opció lehet, ugyanis a sikerélményünk garantált lesz.

Milyen feature-ök vannak a Vue.js-ben?

A Vue.js a háttérben egy virtuális DOM-ot használ. Amennyiben az applikációnk változói frissülnek, az igazi DOM is módosulni fog, ez egy sokkal gyorsabb performanszt, teljesítményt nyújt, mint például a jQuery.

Ez a könyvtár egy MVC-hez hasonló architektúrát követ. Az adataink, a különféle metódusok, valamint az oldalunk HTML része könnyedén szétválasztható a segítségével, ebből adódóan egy jól áttekinthető, átlátható kódot tudhatunk a magunkénak. Az adatok „egy helyre gyűjtésében” lehet segítségünkre a Vuex, ami teljesen engedi különválasztani az applikációnktól azokat, ezáltal a különféle állapotokat meghatározó adatok egy helyre kerülnek.

A Vue.js komponensekből épül fel. Ennek kapcsán könnyedén hozhatunk létre „újrahasznosítható” elemeket az alkalmazásunkon belül: ha például egy képgalériát szeretnénk létrehozni, akkor az egyetlen képet megtestesítő elem lehet egy ilyen komponens. Vagy akár egy űrlap, melyet a weboldalunkon máshol is használni szeretnénk.

A Vue segítségével képesek lehetünk akár többoldalas appokat is építeni, ebből adódóan az úgynevezett routing is jól meg van benne oldva.

Az Vue.js mellé rengeteg kiváló packaget, és third party plugint készítettek. Ezek közé tartozik például a már említett Vuex, vagy a Vuelidate, aminek a segítségével űrlap-érvényesítést valósíthatunk meg könnyedén.

Kifejezetten szeretem, és egyik kedvenc packagem a Bootstrap Vue. A mindenki által ismert, és szeretett Bootstrapet veszi alapul, azzal a különbséggel, hogy tökéletesen illeszkedik a Vue.js-hez.

Néhány alap példa

Annak érdekében, hogy a Vue.js működése kicsit érthetőbb legyen, érdemes lehet néhány alapvető példát áttekinteni.

A Vue.js installálása

A Vue.js-t nagyon egyszerűen installálhatjuk CDN segítségével. Abban az esetben, ha compilert szeretnénk használni, az NPM-hez kell majd nyúlnunk, viszont ha néhány egyszerű példát szeretnénk ismertetni, bőven elég lesz a CDN is. Adjuk az oldalunk tetejére az alábbi kódrészletet a headingen belül.

<head>
    <title>Vue.js bemutatása</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

Egy alap kódrészlet

Amennyiben ezt megtettük, már írhatjuk is a Vue.js kódunkat. Egy végtelenül egyszerű applikáció, arra viszont elég, hogy az alap felállásba bepillanthassunk. A Vue komponensünket a new Vue példánnyal hozhatjuk létre. Itt az „el” rész lesz mindig a kijelölő (lényegében CSS selector), a komponensünk ezen belül fog „létezni”. A data objektumban kulcs-érték párokat megadva különféle értékeket hozhatunk létre, melyekre könnyedén hivatkozhatunk az applikációnkon belül a {{}} interpoláció szintaxis segítségével.

<div id="app">
    <p>{{ title }}</p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            title: "Hello World!"
        }
    });
</script>

Az eredmény:

Hello World!

Függvények létrehozása

Ez még nyilván nagyon kevés. Ha szeretnénk, hozhatunk létre komponensen belüli függvényeket is, melyeket használhatunk a Vue komponensünkben. A methods objektumban definiálhatjuk ezeket, meghívni pedig a függvény nevével lehet, a zárójelekkel együtt. 

<div id="app">
    <p>{{ title }}</p>
    <p>{{ sayHello() }}</p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            title: "Hello World!"
        },
        methods: {
            sayHello: function() {
                return "A függvény írta ki: " + this.title;
            }
        }
    });
</script>

Az eredmény:

Hello World!
A függvény írta ki: Hello World!

Computed property-k

Érdemes lehet megismerkednünk az úgynevezett computed property-k fogalmával is. Amennyiben egy komplexebb applikációt szeretnénk létrehozni, nagyon fontos, hogy a performansz a lehető legjobb legyen: gyors működésre van szükség.

Függvényekkel is definiálhatunk sok mindent, és ezekkel is meg lehet jeleníttetni a változóinkat az applikációnkon belül, viszont ezeknek az egyik hátránya, hogy a Vue.js sokszor szükségtelenül meghívja őket egy tulajdonság megváltozásakor – még akkor is, ha a függvény végkimenete nem függ az adott változótól.

Ha az alábbi ábrán megnyomjuk az első gombot, akkor az a Vue applikációnk „counter”-ét fogjuk növelni eggyel. Mivel a computed objektumban definiált output függvény, és a method objektumban definiált result függvény is függ ettől a változótól, mindkét üzenet ki fog íródni a konzolra.

Amennyiben a második gombra kattintunk rá, akkor a konzolra csupán a ’method’ szó fog kiíródni: ugyanis az output computed property nem függ a secondCounter változótól. Természetesen a result függvény sem, de a függvények meghívódhatnak még abban az esetben is, ha nem függ a függvény az adott változó módosulásától.

<div id="computedProperty">
    <button @click="counter++">Kattints rám</button>
    <button @click="secondCounter++">Másik növelése</button>
    <p>{{ secondCounter }}</p>
    <p>{{ counter }}</p>
    <p>Az eredmény: {{ result() }} || {{ output }}</p>
</div>
<script>
    new Vue({
        el: "#computedProperty",
        data: {
            counter: 0,
            secondCounter: 0
        },
        computed: {
            output: function() {
                console.log("computed");
                return this.counter > 3 ? "nagyobb" : "kisebb";
            }
        },
        methods: {
            result: function() {
                console.log("method");
                return this.counter > 3 ? "nagyobb" : "kisebb";
            }
        }
    });
</script>

Az eredmény:

Vue.js computed property példa minta kimenete
A Chrome böngészőben a beépített webfejlesztői eszközöket az F12-vel tudod megnyitni.

Iterációk

Előfordulhat, hogy egy lista elemein szeretnénk végigmenni, esetleg azokhoz valamilyen módon egy új elemet hozzátenni. A for iterációt három féle módon használhatjuk a Vue.js-en belül: tömbökön, objektumokon, vagy akár szimpla számsorozatokon is.

Az alábbi ábrán láthatjuk, hogy mindez hogyan valósul meg: amennyiben tömbről lenne szó, akkor az „element”, és „index” segítségével hivatkozhatunk az éppen adott elemre, és ugyanez a helyzet objektumok esetén is, ott viszont hivatkozhatunk a kulcs-érték párokra is: ez esetben a „value”, „key” és „index” megadása is szükséges lehet.

Amennyiben szeretnénk, akár egy szimpla számsorozatot is kiírathatunk a képernyőre: mondjuk a számokat 1-től 10-ig, ekkor csupán egy x változóval kell jelölnünk az éppen aktuális elemet, és ezzel hivatkozhatunk arra.

Az alsó gombra kattintva pedig egy szimpla JavaScriptből ismert push művelettel tudunk egy elemet a tömbünkhöz csatolni.

<div id="listingElements">
    <ul>
        <li v-for="(element, index) in ingredients" :key="index">{{ index + "." + element }}</li>
    </ul>
	
    <ul>
        <div v-for="(value, key, index) in persons">{{ key + ": " + value.name + "(" + value.age + " éves)" + " - " + value.hair + " hajú" }}</div>
    </ul>
	
    <span v-for="x in 10">{{ x }}</span><br>
	
    <button @click="ingredients.push('zsömle')">push</button>
</div>
<script>
    new Vue({
        el: "#listingElements",
        data: {
            ingredients: ['hús', 'tej', 'tojás'],
            persons: [
                {name: "Peti", age: 42, hair: "vörös"},
                {name: "Jani", age: 25, hair: "fekete"}
            ]
        }
    });
</script>

Az eredmény:

Vue.js iterációs példa minta kimenete

Újrahasznosítható komponensek

Mi van akkor, ha egy olyan komponenst szeretnénk létrehozni, ami az applikációnkon belül vélhetően máshol is jól felhasználható lesz? Természetesen ez is megtehető lesz, ez alábbi módon. A Vue komponensek újrahasznosítható Vue példányok, melyek névvel rendelkeznek.

<div id="reusableComponentDemo">
    <ol>
        <todo-item></todo-item>
        <todo-item></todo-item>
    </ol>
</div>
<script>
    Vue.component("todo-item", {
        template: "<li>Újrahasznosítható komponens létrehozása.</li>"
    })
    new Vue({
        el: "#reusableComponentDemo"
    });
</script>

Az eredmény:

1. Újrahasznosítható komponens létrehozása.
2. Újrahasznosítható komponens létrehozása.

Összefoglalás

A Vue.js tehát egy nagyon hasznos eszköz a front-end programozáshoz, könnyen el lehet vele indulni és az alapokat könnyen el tudod sajátítani néhány egyszerűbb példa leprogramozásával. Némi HTML és JavaScript nyelv ismeret szükséges hozzá, hogy megtanuld, de utána egy nagyon hasznos eszköz tud lenni és érdemes minden programozónak ezzel bővítenie a repertoárját.

A webfejlesztés egy összetett folyamat, de minél több részét ismered, annál csábítóbb leszel a szoftverfejlesztő cégek számára, ezért érdemes a tudásodat minden területen elmélyítened.

Cikket írta: Gremmédia

A webfejlesztés folyamata lépésről lépésre

Egy építkezés projekthez hasonlóan a webfejlesztés is meghatározott lépések egymásutániságából felépülő folyamat, ahol maga a programozás önmagában nem elégséges a siker szempontjából.

Legyen szó egy weboldal vagy webes alkalmazás elkészítéséről, a programozást megelőző és azt követő lépések kulcsfontosságúak a teljes projekt sikere szempontjából. Éppen ezért ebben a cikkünkben megpróbálom összeszedni azokat a lépéseket és jellemzőiket, amelyek általánosságban minden webfejlesztés projektre érvényesek.

Íme a lépések, amelyeket az alábbiakban részletezni fogok:

  1. Információ gyűjtés
  2. Kutatás és tervezés
  3. Design
  4. Programozás
  5. Tesztelés és élesítés
  6. Karbantartás és üzemeltetés

1. Információ gyűjtés: okok, célok és célközönség meghatározása

Sok más projekthez hasonlóan a webfejlesztés első lépése a szükséges információk begyűjtése. A projekt elején tisztázni kell a fejlesztés mögött húzódó okokat, üzleti célokat, a célközönséget és a tulajdonosok elvárásait, valamint jó tisztába lenni a marketing által támasztott elvárásokkal is.

  • Mi a webes projekt célja?
  • Mi a célközönség? Kiknek készül a digitális termék?
  • Milyen tartalommal bírjon a termék?

A weboldal, mint digitális termék célja, célközönsége és a webhelyen található információk alapvetően befolyásolják, hogy milyen technológiára lesz szükség és milyen funkcionalitással bírjon a weboldal a befejezést követően.

Mi a weboldal fejlesztésének a célja? Értékesítés, brand építés, termék- vagy szolgáltatás népszerűsítés, szakértői szerep kiépítése? Egy mosógép értékesítéssel foglalkozó weboldal felépítése, tartalma, funkcionalitása nagymértékben különbözik egy céges weboldalétól, éppen ezért fontos minél több információt begyűjteni ebben az első fázisban.

Az előbb felsorolt információk ahhoz is szükségesek, hogy a webfejlesztők az igények alapján egy specifikációt tudjanak készíteni, amelynek jóváhagyása után egy árajánlat illetve egy szerződés készül, amelyben többek között a fejlesztési mérföldköveket és a határidőt is rögzítik.

A befejezetlen, elhaló projektek mögött sok esetben az húzódik, hogy ebben a szakaszban nem lettek az igények és elvárások pontosítva, írásban rögzítve. Így értelemszerűen a végeredmény is különbözött attól, mint amit a megrendelő elképzelt.

webfejlesztés terve

2. Kutatás és tervezés: sitemap és drótváz készítés

A kutatási szakaszban információkat gyűjtünk és összeállítjuk a weboldal tartalmi hierarchiáját és webhely térképét.

A webhely térkép (sitemap) bemutatja a weboldal főbb tartalmi egységeit és azok hierarchiáját. A sitemap tervezése során figyelembe kell venni a könnyű navigációt, a logikailag összetartozó tartalmakat illetve a célcsoport igényeit is. Ideális esetben a látogató minden őt érdeklő tartalmat kevés számú kattintással el tud érni és a navigáció lehetővé teszi, hogy az igényeinek megfelelő sorrendben tudja bejárni a weboldalt. A bonyolultabb szerkezetű oldalak tervezése során olyan technikák segítenek, mint például a card sorting, amely segít megtalálni az ideális csoportosítást a menüpontok között.

A drótváz (wireframe) fekete-fehér rajzban jeleníti meg a weboldal nyitólapjának és főbb menüpontjainak a struktúráját, elrendezését. A fekete-fehér legtöbbször szabadkézi rajz lehetővé teszi, hogy viszonylag gyorsan többfajta variációt is tesztelni lehessen a célközönségen és a módosításokat gyorsan át lehessen vezetni a terven.

A felhasználói élmény alapú tervezés az utóbbi években kezd egyre nagyobb teret nyerni, amely magával hozta azt is, hogy erre több webfejlesztés projeknél látom, hogy a grafikai tervezést megelőzi a drótváz készítés, amely összességében nemcsak felgyorsítja a tervezési folyamatot, de azt is biztosítja, hogy a végső grafikai tervek egy hatékonyság szempontjából optimalizált weboldalt ábrázoljanak.

3. Design

Ebben a szakaszban a grafikusoké a főszerep. A kutatás során nyert adatokat folyamatosan szem előtt tartva a drótvázakból végleges grafikai tervet készítenek.

A grafikai tervezés ennél azért sokkal összetettebb folyamat. Ideális esetben készülnek drótvázak, tehát a website egyes oldalainak szerkezete, elrendezése már jóvá van hagyva, de az arculat, a színek, a betűtípusok, a képek, az illusztrációk, ikonok és egyéb formák kiválasztása most történik meg. Mindezt úgy kell megalkotni, hogy a weboldal a későbbiekben probléma nélkül leprogramozható legyen és a célközönség számára is egy tetszetős, harmonikus végeredmény szülessen.

A grafikai tervezés részét képezi az alkalmazott betűtípusok, ikonok, színek valamint grafikai alapelemek kigyűjtése, amely megkönnyíti a programozó munkáját és biztosítja, hogy a fejlesztés során maradéktalanul betartásra kerüljön az az arculat, amelyet megalkottak.

4. Webfejlesztés programozás része

A design szakaszban elkészült tervek és arculat felhasználásával a programozók egy működőképes weboldalt (webes alkalmazást) alkotnak. Az eddig statikus képként megjelenő design-ból egy kattintható, dinamikus website lesz. A frontend, vagyis a látogató számára böngészőben megjelenő felület mögé egy adminisztrációs felület, illetve ahogy a legtöbb esetben nevezik tartalomkezelő rendszer kerül, amely lehetővé teszi a weboldal tartalmának frissítését, szerkesztését, bővítését.

A webfejlesztő (programozó) feladata az oldal funkcionalitásának kialakítása mellett annak biztosítása, hogy ….

  • az oldal minden megjelenítő eszközön tökéletesen működjön, vagyis a reszponzivitás kihívásainak megfeleljen
  • az oldal a tartalomkezelő rendszerből frissíthető, módosítható legyen. A leggyakrabban módosításra szoruló részek szerkesztéséhez ne kelljen a webfejlesztő segítségét igénybe venni.
  • a weboldal kódolása áttekinthető legyen és szükség esetén más fejlesztő által átvehető, továbbfejleszthető legyen
  • a weboldal legnépszerűbb böngészőkben hibamentesen jelenjen meg és működjön
  • a weboldal úgy legyen leprogramozva, hogy a lehető leggyorsabban beöltődjön, mert a betöltés sebessége kritikus a felhasználói élmény szempontjából
  • a weboldal forráskódjába kerüljön bele az összes olyan követőkód, amely az online marketing folyamat működtetését és mérését lehetővé teszi
  • a weboldal keresőbarát módon legyen kialakítva, megfeleljen a Google irányelveinek
  • a weboldal biztonságos legyen, fel legyen készítve a webről érkező támadások elhárítására
  • a weboldal szükség esetén támogassa a többnyelvűséget

A weboldal tartalmának első feltöltését is általában a programozók vagy operátorok szokták elvégezni, mert itt még kisebb-nagyobb módosításokra van szükség a konkrét információk birtokában.

5. Tesztelés és élesítés

Ha készen van a weboldal és funkcionálisan és tartalmilag is megfelelő, akkor jön a tesztelés. Az élesítés előtt még egyszer le kell ellenőrizni a böngésző kompatibilitást, a betöltődési sebességet, a nyelvi verziók helyességét, a hibaüzeneteket. El kell végezni a régi weboldal megfelelő oldalainak átirányítását az újakra. Ki kell tölteni a SEO szempontjából fontos META adatokat, le kell ellenőrizni a technikai és on-page SEO faktorokat. A közösségi média és analitikai, valamint hirdetési kódokat át kell rakni a régi weboldalból az újba.

A weboldal a végleges tárhelyre kerül és a domain név beállítását követően élesben kezd működni.

6. Karbantartás és üzemeltetés

A weboldal élesítése után a kapcsolat nem szakad meg a webfejlesztő és az ügyfél között. A weboldalak rögtön az indítás utána a web felől számtalan támadásnak vannak kitéve, ezért folyamatos kontrollt, ellenőrzést igényelnek. Tartalomkezelő rendszereiket folyamatosan frissíteni kell annak érdekében, hogy ellenállók legyenek a webről jövő támadásoknak.

Zárszó

A webfejlesztés mint projekt már régóta nem egyszemélyes feladat. Az utóbbi években olyan sok önálló szakma fejlődött ki belőle, hogy egy személy képtelen mindegyiknek egyszerre megfelelni. Egy közepes webfejlesztés projekten is projektvezető, kutatók, UX designerek, programozók, operátorok, SEO és online marketing szakemberek dolgoznak közösen, csak így biztosítható, hogy a végeredmény éles piaci környezetben is megállja a helyét.

Szerző: Tusnádi István