Šta je Vue.js

Kratka istorija

Kao što je već pomenuto, okvir je stvorio Evan You, koji je u to vreme bio zaposlen u Google-u. Kao programer, koristio je Angular.js za većinu svojih projekata, ali osećao je da nešto nedostaje. Da bi stvorio, po njegovom mišljenju, najbolji okvir, izvukao je najbolje karakteristike programa Angular i integrisao ga u lagani paket. I tako je prvi Vue izvorni kod napisan 2013. godine, a pola godine kasnije završen je njegov projekat.

Vue je kasnije uspeo da obuhvati ogromnu i pouzdanu zajednicu koja i danas pokušava da pomeri mogućnosti i ekosisteme platforme različitim alatima i dodatnim proširenim okvirima koji pojednostavljuju i usmeravaju razvojni proces.

Svet JS okvira

Iskusni programeri bili su svedoci kako je JavaScript uspeo da postane potpuno razvijeni ekosistem sa bezbroj različitih razvojnih alata koji se mogu smatrati osnovama za JS jezik sa ciljem da pomognu da se izjednači čitav razvojni ciklus i tok posla.

U svetu JS framework-a dominirali su React i Angular. Međutim, nakon što je predstavljen programerima, JS okvir doživeo je pomak. Progresivna priroda okvira i njegova intuitivna kriva učenja učinili su ga ozbiljnim protivnikom, a njegov profil otvorenog koda pružio mu je detaljnu i korisnu dokumentaciju, pouzdanu podršku i sjajne primere Vue-ovih mogućnosti.

Zašto odabrati Vue?

Jedan od glavnih razloga zašto programeri teže da koriste Vue.JS je činjenica da podržava funkcije „visokog razdvajanja“, što olakšava proširivanje različitih funkcionalnosti. Na primer, ako programeri žele da organizuju male vizuelne komponente i prikažu ih, sa Vue-om, jedina stvar koja im je potrebna jeste osnovna biblioteka okvira, što znači da ne moraju da uključuju dodatne biblioteke. Postoje i zvanične biblioteke za upravljanje rutama, globalne biblioteke za state management, i biblioteke za izradu responzivnih veb aplikacija.

S druge strane, okvir podržava sistem reaktivnih komponenata (o tome više kasnije), što znači da Vue zna kako da komunicira kroz asinhrone događaje.

Vue takođe ima poseban CLI kreiran na Node.js koji omogućava programerima da započnu svoj projekat pomoću boilerplate-a. Takođe, Vue-ov razvojni tim održava Chrome dodatak koji omogućava programerima da vide kako se događaji pokreću i snimaju, prikazuje stabla komponenata i kako se čuva unutrašnje stanje svake komponente i kako se ponaša globalno stanje komponente.

Šta čini Vue.js uspešnim?

U ovom odeljku ćemo govoriti o karakteristikama zbog kojih se Vue izdvaja kao jedan od vodećih JS okvira.

Komponente

To su funkcije koje enkapsuliraju višekratnu upotrebu proširivanjem osnovnih HTML elemenata. U okviru, komponenta je u osnovi Vue instanca sa unapred definisanim opcijama, jer su prilagođeni elementi sa povezanim ponašanjem zahvaljujući Vue-ovom kompajleru.

Okvir koristi ove komponente kao svoje gradivne elemente za veb stranice. To znači da je svaki deo aplikacije sastavljen od različitih komponenti koje predstavljaju enkapsulirani element samog interfejsa. Komponente se mogu pisati u Javascript-u, CSS-u i HTML-u, bez potrebe da se dele u posebne datoteke.

Arhitektura poput ove znači da će okvir imati širok spektar različitih karakteristika i prednosti, kao što su:

• Komponente za višekratnu upotrebu – Programeri imaju priliku da ponovo koriste enkapsulirane komponente u obliku delova koda kao templejte za slične aplikacije i elemente koji ubrzavaju razvojni ciklus.
• Čitanje koda – Komponente se čuvaju u različitim datotekama, u većini slučajeva svaka od njih je jedna datoteka. Takva arhitektura čini postupak čitljivosti koda mnogo jednostavnijim, a takođe olakšava i održavanje aplikacija, jer rešavanje problema postaje fokusirano i pojednostavljeno.
• Sjajno testiranje jedinica – Vue-ova filozofija zasnovana na komponentama omogućava stručnjacima da konfigurišu čitav proces testiranja kao jednostavan proces pitanja i odgovora koji može da analizira i performanse i najmanjih delova u datoj aplikaciji.

Templejti

Okvir se može pohvaliti sintaksom zasnovanom na HTML-u. Ovo omogućava prikazanom DOM-u da se veže za podatke osnovne instance. Zatim se predlošci kompajliraju u funkcije virtuelnog DOM prikazivanja, a DOM (Virtual Document Object Model) omogućava programerima da prikažu komponente pre ažuriranja pregledača. Takođe, sistem reaktivnosti okvira pomaže u izračunavanju minimalnog broja komponenata koji treba promeniti i primenjuje minimalnu količinu manipulacija u DOM-u tokom promene stanja aplikacije.

Ovaj optimizovani proces ažuriranja pregledača može znatno ubrzati vreme učitavanja i poboljšati korisničko iskustvo. Virtuelni DOM je u osnovi kopija originalnog DOM-a. Virtuelna verzija služi kao nacrt za ažuriranja i zaobilazi potrebu za prikazivanjem celokupnog DOM-a.

Reaktivnost

Vue takođe podržava jedinstveni sistem reaktivnosti koji podržava optimizovano ponovno prikazivanje i koristi obične JavaScript objekte. U ovom sistemu, svaka komponenta prati svoje reaktivne zavisnosti tokom prikazivanja, što znači da sistem zna kada se ponovo prikazuje i koje komponente treba ponovo prikazati.

Tranzicije

Vue takođe koristi različite efekte tranzicije za uklonjene, umetnute ili ažurirane DOM stavke.

Mogu da rade u sledećim obrascima:

• Možete automatski primeniti CSS klase tranzicije i animacije
• Integracija nezavisnih biblioteka CSS animacija
• Korišćenje JS-a za izvršavanje direktnih DOM manipulacija tokom prelaza
• Nezavisne JS biblioteke za animaciju poput Velocity.js

Kada se prelazni elementi ubace ili uklone, Vue će ili

• Automatski otkrije da li se primenjuju CSS prelazi ili animacije ili ne. Ako postoje, framevork će dodati ili ukloniti potrebne CSS klase u odgovarajuće vreme
• Operativne naredbe DOM-a za uklanjanje ili umetanje izvršiće se na sledećem okviru ako nisu otkrivene CSS animacije / tranzicije ili JS kuke.

Usmeravanje

Vue, podrazumevano, ne dolazi sa namenskom funkcijom heširanog usmeravanja na front-endu, međutim, postoji paket rutera otvorenog koda u kojem programeri mogu da koriste API za ažuriranje URL-a aplikacije, a da istovremeno podržavaju istoriju navigacije, veze za verifikaciju, i / ili resetovanje lozinke. Ovaj isti paket takođe podržava ugnežđeno mapiranje rute u ugnežđene komponente, istovremeno nudeći kontrolu prelaska.

Vue već omogućava programerima da grade aplikacije iz malih blokova. Vue ruter uzima ovu sposobnost i poboljšava je: sa paketom programeri mogu mapirati komponente na njihove namenske rute, dok roditeljske rute / alati moraju da naznače gde treba da se deca prikažu.

Ekosistem

Pored velike podrške otvorenog koda i mrežne zajednice, glavni razvojni tim ovog programa nudi i nekoliko biblioteka.

Neki bi se čak mogli zapitati, zašto takav viralni okvir otvorenog koda treba da ima svoj posvećeni tim koji stoji iza njega i pokušava da ga još više poboljša?

Zvanične biblioteke u osnovi definišu Vue kao potpuno razvijen okvir koji garantuje da će platforma raditi neometano. Kao bonus, uvek će postojati obilje nezvaničnih paketa i biblioteka koji će programerima omogućiti da naprave potpuno prilagođena rešenja koja će čak podržati velike projekte ili jednostavno skalabilne.

Kao takvi, evo nekoliko najpopularnijih projekata zajednice koji su među najboljim dodacima ekosistema Vue:

• Nuxt.js - Okvir koji je izgrađen na Vue-u, kombinujući nekoliko manjih alata i obrazaca čineći razvoj aplikacija neverovatno jednostavnim uz podršku SRR-a.
• The Quasar Framework - pomaže u razvoju hibridnih aplikacija za računare i mobilne uređaje.
• OnsenUI i Native Script - veća podrška za okvire za mobilni razvoj.
• Element-UI i Veutify - UI okviri koji Vue-u pružaju desetine objedinjenih UI komponenata kako bi se omogućilo lako pokretanje sistema.

Jedno je sigurno, zvanične biblioteke će uvek biti vrhunske, sa dugoročnom podrškom i odgovarajućom kompatibilnošću okvira.

Zvanični osnovni alati biblioteke takođe imaju sjajne funkcije koje čine razvojni ciklus efikasnim, glatkim i brzim. Evo nekih od najznačajnijih:

• Devtools: Dodaci pregledača za otklanjanje grešaka
• Vue Loader: Učitač webpack-a koji omogućava programerima da koriste format komponenata jedne datoteke (SFC) za pisanje komponenata.
• Vue CLI: standardni set alata za brzi razvoj. Command line interfejs koristi jednostavne naredbe koje se mogu uređivati da bi proizvele veći i brži izlaz.

Evo nekih zvaničnih biblioteka:

• Vuex: Inspirisana Flux-om, ovo je centralizovana biblioteka za upravljanje Vue-om
• Vue Server Render: SSR biblioteka za Vue
• Vue ruter: službeni paket rutera

Razvoj u Vue.JS

Što se tiče podešavanja okruženja, postoji nekoliko načina na koje možete dodati Vue u svoj projekat:

• Možete jednostavno preuzeti Vue.js datoteku i direktno je uključiti sa <script> u HTML datoteku
• Korišćenjem Vue-cli za postavljanje projekta
• Instaliranje sa NPM-om (Node Package Manager)
• Sa CDN-om pomoću oznake <script> u HTML datoteci

U ovom konkretnom primeru ćemo koristiti metodu CDN gde oznaka <div> ima kod predloška, <style> ima CSS kod, a kod skripte je u oznaci <script>.

                    
    <html>
        <head>
            <title> Jednostavan primer VuA.js PopArt </title>
            <script src = "https://cdn.jsdelivr.net/npm/vue"></script>
        </head>
        <body>
            <div id = "app">
                <p> {{message}} Posetioci PopArt bloga! </p>
            </div>
            <script>
                var app = novi Vue ({
                el: '#app',
                podaci: {

                poruka: 'Zdravo'

                }
                });
            </script>
        </body>
    </html>
                    


                

Sada, ako želite da kreirate Vue projekat pomoću NPM metode (obično se preporučuje za velike aplikacije), potrebno je da instalirate najnoviju verziju Vue i unesete sledeću komandu:

> npm install vue

Zatim možemo da kreiramo projekat Vue.js koristeći:

> vue create my-first-vue-app

Deklarativno prikazivanje

Vue takođe omogućava programerima deklarativno prikazivanje podataka u DOM sa sledećom sintaksom templejta:

                    
    <div id="app">
        message
    </div>
    <script type="text/javascript">
        var app = new Vue({
        el:'#app',
        data: {

        message: 'This is the PopArt Blog!'

        }
        })
    </script>

    <div id="app">
        {{ message }}
    </div>

    <script>
        var app = new Vue({
        el:'#app',
        data: {
        message: 'This is the PopArt Blog!'
        }
        })
    </script>

                    


                

Kada se to dogodi, Vue procenjuje deklarisane izjave dvostrukim zagradama, što znači da se objekat podataka iz instance Vue prikazuje u predložak niza. Na taj način su DOM i objekt podataka povezani i sve postaje reaktivno.

Direktive

Ovo su posebni atributi v-prefiksa koji omogućavaju DOM manipulaciju:

                    
    <div id="app">
        <p v-if="shown">You can see this message.</p>
    </div>
    <script type="text/javascript">
        var app = new Vue ({
        el: '#app',
        data: {

        shown: true

        }
        });
    </script>

                    


                

Komponente

Već smo razgovarali o komponentama, pa evo primera kako se koristi komponenta <button-counter> u Vue-u:

                    
    <div id="app">
        <popart-counter></popart-counter>
        <popart-counter></popart-counter>
        <popart-counter></popart-counter>
    </div>

    <script>
        Vue.component('popart-counter', {
        data: function () {
        return {
        count: 0
        }
        },
        template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'

        })

        var vue = new Vue({
        el: "#app",
        data: {
        }
        })
    </script>
                    


                

U ovom primeru komponenta se kreira sa sintaksom Vue.component gde je prvi parametar stvarno ime komponente i njene opcije: predložak i podaci.

Reaktivni interfejsi

Takođe možete dodati reaktivnost svojstvima u Vue-u. Dodaju se dinamički, sa svojstvom sata koje u osnovi deluje kao posmatrač:

                    
    <div id="app">
        <p>PopArt Counter: {{ counter }} </p>
        <button @click = "counter++">Increment Counter</button>
    </div>
    <script>
        var vue = new Vue({
        el: "#app",
        data: {
        counter: 1
        },
        watch: {
        counter: function(new_val, old_val) {
        alert('Changed from ' + old_val + ' to ' + new_val + '!');
        }
        }
        })
    </script>
                    
                

Zajednica

Kao što je već rečeno, Vue je uspeo da brzo postane omiljen među developerima i još uvek se smatra jednim od vodećih u svetu JS front-end platformi.

Kao jedan od glavnih okvira, nije ni čudo što je i interes zajednice programera za njega zaista velik. Imati solidnu podršku u slučaju platforme otvorenog koda uvek je ogroman plus, jer oni koji su novi na platformi, pa čak i iskusni stručnjaci, uvek mogu pronaći nove uzbudljive video vodiče, pronicljive članke, alate, biblioteke, portfolie projekata, itd.

Snažna zajednica će uvek osigurati da oni koji su novi u okviru uvek nađu pomoć za prevazilaženje projektnih prepreka ili samo da nauče detalje i platformu. Detaljna projektna dokumentacija takođe može da pomogne da se ubrza razvojni ciklus, eliminišući nagađanja i nepotrebno testiranje i svu gnjavažu koja često može doći sa određenim okvirima.

Za i protiv

Nažalost, ne postoji savršen okvir, ili barem jedna platforma sasvim sigurno neće moći da odgovara svim potrebama, preferencama i projektima. S tim u vezi, evo nekoliko mogućih prednosti i nedostataka koji mogu nastati korišćenjem Vue-a.

Prednosti

• Lagan: – Programeri širom sveta pohvalili su okvir kako je neverovatno lagan.
• Dvosmerno vezivanje podataka: – Već smo razgovarali o Vue-ovim karakteristikama DOM-manipulacije, ali još nismo pomenuli dvosmerno vezivanje podataka. Još jedna karakteristika koja je postala omiljena među programerima i koja opisuje ažuriranje podataka o modelu i UI vezu sa povezanim komponentama koje sadrže podatke. Ova karakteristika olakšava praćenje ažuriranja podataka i ažuriranje srodnih komponenti. Baš kao i DOM objekti, vezani podaci takođe primaju reaktivna ažuriranja u okviru, što Vue čini idealnim za aplikacije za ažuriranje u realnom vremenu. S druge strane, ova reaktivnost može pomoći da se ažuriranje podataka olakša i pojednostavi, a takođe u celini pomaže razvojnom procesu.
• Fleksibilan: – Vue omogućava programerima da integrišu najnoviju tehnologiju u svoje postojeće aplikacije. Podržava pisanje HTML-a, JS-a i JSX-a, a oni koji su ranije radili sa Angularom steći će mnoga poznanstva između dve platforme.
• Jednostavan za upotrebu: – Upoznavanje okvira nije toliko teško, posebno za iskusne programere. Ljubitelji platforme obično izjavljuju da je solidno znanje o CSS-u, HTML-u i JS-u u većini slučajeva dovoljno za početak, a kasnije neće trebati toliko vremena da se krene u izazovnije projekte. S druge strane, nekoliko najpopularnijih alata i uređivača koda poput Sublime Text, Visual Studio i Atom podržavaju Vue, što znači da programeri mogu još više da skrate krivulju učenja. I na kraju, jaka mrežna zajednica koja stoji iza okvira takođe može pružiti ruku u pružanju detaljne dokumentacije, uputstava, pa čak i pomoći sa foruma za ćaskanje itd.
• Podrška: – Uz detaljnu dokumentaciju, bogate biblioteke i alate, posvećenu zajednicu, a da i ne pominjemo posvećen razvojni tim koji stoji iza okvira, programeri ne bi trebalo da brinu da će zaglaviti sa Vue projektom bez pomoći.
• Svestranost i brzina: – Većina JS okvira je brza, ali Vue je sigurno među najbržima. To je lagana platforma koja se oslanja na svoj virtuelni DOM. Pored toga, prati zavisnosti prilikom prikazivanja, znajući koje komponente treba ponovo prikazati kada se promene stanja dogode bez dodatnog unosa programera. Vue se takođe može koristiti kao biblioteka, a ne samo kao okvir. Ovo olakšava modifikovanje, menjanje i skaliranje. I na kraju, arhitektura je sastavljena na takav način da se rešavanje problema takođe može brzo obaviti.

Nedostaci

• Nedostatak dodataka: – Neki programeri su napomenuli da Vue-u nedostaju neki od najčešćih dodataka koji bi još više ubrzali proces razvoja. Oni koji su navikli da koriste uobičajene alate, ovo mogu videti kao nedostatak.
• Velika brzina: – Neki stručnjaci su izrazili zabrinutost zbog ubrzanog razvoja platforme, zbog čega je ponekad teško slediti je. Oni koji Vue ne koriste redovno, mogli bi otkriti da moraju ponovo da nauče određene procese jer jt toliko brzo evoluirala od poslednjeg puta kada su koristili ovu platformu.
• Prevelika fleksibilnost: – Iako je fleksibilna platforma za veb razvoj svakako dobra stvar, neki programeri su otkrili da u većim projektima, sa nekoliko članova tima, fleksibilna priroda Vue dovodi do nepravilnosti koda i drugih problema koji su doveli do kašnjenja projekata.
• Problemi sa iOS-om i Safari-jem: – Na kraju, developeri su takođe prijavili probleme sa aplikacijama Vue na Safari-u i iOS-u. Ovi problemi nikako nisu bili glavni, ali su ipak uspeli da izazovu popriličnu glavobolju.