Ak ste vývojárom JavaScript aplikácii, už ste určite počuli niečo Vue.js a jeho nadstavbe Nuxt.js. No možno neviete o čom je celý rozruch. Zrejme sa pýtate: „Načo potrebujem framework pre framework?“ Vue už aj tak robí vývoj JavaScript aplikácii jednoduchším. V tomto článku nájdete 10 hlavných dôvodov prečo by ste mali zvážiť Nuxt.js vo svojom ďalšom projekte.
Čo je to Nuxt.js?
Nuxt.js je framework na vyššej úrovni, ktorý je vybudovaný na Vue. Zjednodušuje vývoj univerzálnych, alebo jednostránkových (single page) aplikácii Vue.
Nuxt.js odstraňuje detaily distribúcie kódu pre server a klienta, vďaka čomu sa môžete sústrediť na vývoj aplikácie. Cieľom Nuxt je byť dostatočne flexibilným na to, aby ste ho používali ako hlavnú základňu projektu (main project base).
Väčšinu z toho, čo sa dá pomocou Nuxt urobiť, sa uskutoční počas vývojovej fázy. Získate tak množstvo funkcií s iba niekoľko extra kilobajtmi navyše vo vašich súborov JavaScript.
Pozrime sa na dôvody, kvôli ktorým by ste mali zvážiť Nuxt pre svoj ďalší projekt Vue.
1. Vytvorte univerzálne aplikácie bez problémov
Jedna z najväčších výhod Nuxt.js je, že umožňuje vytváranie univerzálnych aplikácii jednoduchšie.
Čo je to univerzálna aplikácia?
Univerzálna aplikácia sa používa na vytvorenie popisu JavaScript kódu, ktorý sa môže vykonať na strane klienta i servera. Množstvo moderných JavaScript frameworkov ako Vue je určených na vytváranie aplikácii s jednou stránkou (Single Page Applications, ďalej SPA).
SPA má oproti tradičným webstránkam množstvo výhod. Môžete napr. vybudovať veľmi elegantné používateľské rozhranie, ktoré sa dokáže rýchlo aktualizovať. No SPA má aj nevýhody spojené s dlhým načítaním. Google sa s ním taktiež potrápi, pretože tu spočiatku nie je obsah, ktorý by mohol prejsť na účely SEO. Celý obsah je generovaný s JavaScriptom.
Univerzálna
aplikácia spočíva v SPA, no namiesto prázdnej stránky index.html, prednačítate aplikáciu na webovom
serveri a pošlete renderovanú HTML ako odpoveď na požiadavku prehliadača
pre každú route. Urýchlili sa tak čas načítania. Taktiež sa vylepší SEO vďaka
tomu, že uľahčíte Google indexové prehľadávanie stránky.
Nuxt.js pomáha písať univerzálne aplikácie jednoduchšie
Vytváranie univerzálnych aplikácii môže byť prácne, pretože tu je veľa nastavení na strane servera (server side) a klienta (client side).
Toto je problém, ktorý Nuxt.js rieši pre aplikácie Vue. Nuxt.js umožňuje jednoducho zdieľať kód medzi klientom a serverom, vďaka čomu sa môžete sústrediť na logiku aplikácie.
Nuxt.js vám sprístupní na vašich komponentoch vlastnosti (properties) ako isServer a isClient, aby ste sa mohli jednoducho rozhodnúť, či niečo renderujete u klienta, alebo na serveri.
Sú tu taktiež špeciálne komponenty ako no-ssr, ktorý sa používa na úmyselné zabránenie komponentu renderovať na strane servera.
Nuxt vám taktiež umožní prístup k metóde asyncData vo vnútri komponentov, ktorú môžete použiť na načítanie dát a ich renderovanie na strane servera.
To je iba štipka ľadovca toho, ako Nuxt pomáha s vytvorením univerzálnych aplikácii.
2. Nuxt.js staticky renderuje vaše aplikácie Vue a získava všetky benefity univerzálnej aplikácie bez servera
Najväčšia inovácia
Nuxt prichádza s príkazom nuxt generate. Tento príkaz generuje kompletnú statickú
verziu vašej webstránky. Vygeneruje HTML pre každý jeden z vašich routes
a vloží ich do vlastného súboru.
Napr. ak máte nasledovné stránky:
-| pages/
----| about.vue
----| index.vue
Nuxt pre vás vygeneruje nasledovnú štruktúru súborov:
-| dist/
----| about/
------| index.html
----| index.htmlBenefity tejto funkcie sú veľmi podobné s benefitmi univerzálnych aplikácii. Je tu značka (markup), ktorá urýchľuje načítanie stránky a pomáha indexovaniu prehliadačov. Výsledkom je, že už nepotrebujete server. Všetko je vygenerované počas vývojovej fázy.
Je to výkonné, pretože získate benefity univerzálneho renderovania bez potreby serveru. Môžete tu hostiť aplikácie zo stránok GitHub, alebo Amazon S3.
3. Získate automatické delenie kódu (pre-renderované stránky)
Nuxt.js je schopný vytvárať statické verzie webstránky so špeciálnou konfiguráciou Webpack. Pre každú route/stránku, ktorá je vygenerovaná staticky, získa route aj svoj vlastný súbor JavaScript, no iba s kódom, ktorý je potrebný na spustenie tohto route.
Týmto Nuxt.js dokáže skutočne pomôcť s rýchlosťou, pretože udržuje veľkosť JavaScript súboru relatívne malý k pomeru celkovej veľkosti aplikácie.
4. Umožňuje nastavenie pomocou príkazového riadku command line zo starter template
Nuxt.js poskytuje starter template nazvaný starter-template, ktorý vám dodá všetok scaffolding, ktorý potrebujete na to, aby ste mohli začať projekt s dobrou štruktúrou priečinkov pre organizáciu.
Uistite sa, že máte nainštalovaný vue-cli a spustite nasledujúci príkaz:
$ vue init nuxt-community/starter-template <project-name>
Odtiaľ už len cd do aplikácie a spustite npm install. To je všetko.
5. Získate skvelo prednastavenú štruktúru projektu
V množstve malých aplikácii Vue.js nakoniec manažujete štruktúru kódu vo viacerých súboroch ako len najlepšie viete. Prednastavená štruktúra aplikácie Nuxt.js vám dá skvelý štartovací bod pre organizáciu aplikácii v pochopiteľnom spôsobe.
Tu je zopár hlavných adresárov (directories), ktoré sú prednastavené:
components – priečinok na organizovanie individuálnych komponentov Vue,
layouts – priečinok na uloženie hlavných usporiadaní (layout) aplikácie,
pages – priečinok na uloženie aplikácie route. Nuxt.js číta všetky .vue súbory vo vnútri directory a vytvára router aplikácie (application router),
store – priečinok na uloženie všetkých súborov aplikácie Vuex Store.
6. Jednoducho nastavte prechody medzi vašimi routes
Vue má element wrapper <transition>, ktorý na elementoch, alebo komponentoch zjednodušuje ovládanie animácie pre JavaScript, CSS a CSS prechody (transitions). Nuxt.js nastaví vaše routes takým spôsobom, že každá stránka sa zabalí (wrapps) do <transition> elementu, čím môžete medzi stránkami jednoducho vytvárať prechody.
7. Píšte jednosúborové komponenty (single file components) jednoducho
V množstve malých projektov Vue sú komponenty definované s použitím Vue.component, nasledované new Vue({ el: ‘#container’ }) , na cielenie elementu kontajnera (container) v tele (body) stránky. Toto funguje dobre pre malé projekty, kde je JavaScript použitý na zlepšenie určitých vzhľadov. No vo väčších projektoch to môže byť náročné na manažovanie.
Všetky tieto problémy sú riešené jednosúborovým komponentom (single-file component) s rozšírením .vue. Na to, aby ste ich využili, musíte nastaviť proces zostavovania (build process) s nástrojmi ako Webpack a Babel.
Tu je príklad jednosúborového .vue komponentu:
Nuxt.js prichádza prednastavený s Webpackom. Môžete tak začať používať súbory .vue bez toho, aby ste museli nastavovať komplikované procesy zostavovania (build process).
8. Získajte ES6/ES7 kompiláciu bez extra práce
Okrem Webpacku má Nuxt.js taktiež v základe Babel, ktorý využíva zostavovanie (compiling) najnovších JavaScript verzií ako ES6 a ES7 do JavaScriptu, ktorý sa dá spojazdniť na starších prehliadačoch.
Nuxt.js pre vás Babel nastaví, takže všetky súbory .vue a všetky kódy ES6, ktoré napíšete do značiek (tagov) <script>, sa skompilujú do JavaScriptu, ktorý bude fungovať vo všetkých prehliadačoch.
9. Získate nastavenie s automatickým aktualizovaním servera pre jednoduchší vývoj
V porovnaní s nastavením procesov, alebo procesom change-refresh-change-refresh, na ktorý sú vývojári zvyknutí, je vývoj s pomocou Nuxt.js hračkou. Automaticky vám prednastaví aktualizovaný vývojový (development) server.
Zatiaľ, čo vyvíjate a pracujete na súboroch .vue, Nuxt.js používa konfiguráciu Webpack, aby skontroloval zmeny a všetko pre vás skompiloval.
Môžete spustiť príkaz npm run dev vo vnútri projektu Nuxt.js, čo nastaví vývojový (development) server.
10. Komunita okolo Nuxt.js
Nakoniec je tu kolekcia GitHub nazvaná Nuxt Community, ktorá zozbierala pomocné knižnice, moduly, štartovacie balíčky a iné veci, ktoré vám uľahčia vytvárať aplikácie. Jednoducho tak zistíte, čo je dostupné vopred ešte predtým, aby ste museli kód písať sami.
Nuxt.js vylepšuje Vue.js
Všetky tieto funkcie robia z vývoja aplikácii Vue.js oveľa lepší zážitok. Aj keď nepotrebujete univerzálnu aplikáciu a chcete ostať pri SPA, stále sú tu benefity pri používaní Nuxt.js Môže to byť vaša hlavná projektová základňa (main project base) so súbormi .vue, kompiláciou ES6 a ďalšími funkciami.
V prípade, ak máte záujem o vývoj Javascript aplikácii, môžete využiť našu službu vývoj na mieru.
zdroj: medium.com, zdroj fotografií: medium.com
