Headless with Nuxt.js

V Techband je naším cieľom tvoriť IT základňu hviezdnych developerov a mimo iného podporovať ich a aj širšiu verejnosť, v osobnostnom a profesionálnom rozvoji v oblasti IT a technológií. Práve preto sme sa koncom roka 2020 rozhodli spustiť sériu Techband meetup-ov zameraných na rozvoj hard-skills, konkrétne na jednu z najpopulárnejších technológii – JavaScript.

V tomto článku vám prinášame bližšie predstavenie témy “Vue – Nuxt.js”, o ktorej na poslednom z našich JavaScript meetup-ov rozprával speaker Samuel Snopko, Head of Developer Relations v Storyblok – my sme ju následne spracovali do písomnej formy na náš blog.

 

Čo je to Nuxt.js?

Nuxt.js je open-source frontend framework postavený na Vue, vďaka ktorému je vývoj webu a webových aplikácií nielen jednoduchý, ale aj vysoko výkonný. Cieľom samotnej spoločnosti Nuxt je spraviť webový vývoj intuitívny a učinný s ohľadom na pozitívnu skúsenosť developerov.

 

Čo Nuxt.js poskytuje?

Na to, aby sme lepšie pochopili, čo je to Nuxt.js, musíme pochopiť predovšetkým to, čo potrebujeme pre vývoj modernej aplikácie.

Čo potrebujeme? Ako to zabezpečuje Nuxt.js?
JavaScript framework, ktorý prináša webové komponenty a reaktivitu Nuxt je postavený na Vue.js
Bundler na podporu výmeny hot modules v rámci vývoja a zviazanie kódu v produkcii Nuxt podporuje Webpack 5 aj Vite
Transpiler pre písanie v najnovšom syntaxe JavaScript-u popri podpore starších prehliadačov Nuxt na to používa esbuild
Server na obsluhu aplikácie vo vývoji, ale aj na podporu vykresľovania na strane servera alebo trás API Nuxt používa h3 pre všestrannosť nasadenia, ako je napríklad serverless, workers, Node.js a bezkonkurenčný výkon
Smerovaciu knižnicu na obsluhu navigácie na strane klienta Nuxt používa vue-router

Tieto veci sú len časť z toho, čo je reálne potrebné pre vlastný projekt nastaviť, sfunkčniť a následne v priebehu času udržiavať. Spoločnosť Nuxt.js sa na tieto aspekty sústreďuje už od októbra 2016 a postupne nastavujú všetky potrebné konfigurácie tak, aby Nuxt poskytol čo najlepšiu optimalizáciu a výkon pre akúkoľvek Vue aplikáciu. Vďaka tomu sa za použitia Nuxt-u vie developer sústrediť na to najpodstatnejšie, vývoj samotnej webovej aplikácie.

Okrem toho poskytuje Nuxt aj adresárovú štruktúru, ktorú je potrebné nasledovať. Tá je zameraná práve na špecifické funkcie, vďaka ktorým sa môže developer sústrediť na tvorbu a nie na konfiguráciu. 

 

JS projekty

Prečo sa oplatí využiť Nuxt.js framework pri tvorbe webových aplikácií?

  • budete môcť bez problémov a jednoduchým spôsobom vytvárať univerzálne aplikácie, ktoré sa dajú spustiť na strane klienta aj servera
  • svoje Vue aplikácie môžete vykresľovať staticky a využívať všetky výhody univerzálnej aplikácie bez servera
  • v Nuxte nájdete špeciálnu Webpack konfiguráciu, ktorá ponúka vopred vykreslené stránky a automatické delenie kódu
  • Nuxt umožňuje setup cez príkazový riadok so štartovacou šablónou
  • v predvolenom nastavení môžete nájsť super projektové štruktúry
  • Nuxt ponúka jednoduché nastavenie prechodov medzi vašimi trasami
  • jednoduché písanie Single File komponentov
  • Nuxt vám bez komplikácií ponúkne nastavenie kompilácie ES6/ES7
  • umožnený setup pomocou servera s automatickou aktualizáciou pre jednoduchý vývoj
  • prístup ku všetkému v Nuxt.js komunite

 

Ako začať pri práci s Nuxt.js?

Hlavná otázka, ktorá pri Nuxt.js často vyvstáva je: Ako začať od úplného začiatku a bez ničoho? Podľa Samuela je pri Nuxte najlepšie začínať s “create nuxt app” frameworkom, kde si môžete nastaviť svoje vlastné inštálacie a začínajúce nastavenia. Vďaka tomu budete tiež vždy “up-to-date”, nakoľko v Nuxt-e prichádzajú nové updaty a features každých pár týždňov. 

Pri využívaní “create nuxt app” je prvým krokom vytvorenie aplikácie cez funkciu “yarn create”. V rámci Nuxt-u je spravený veľmi príjemný a jednoduchý step-by-step guide, kde si postupne zvolíte meno projektu a programovací jazyk. Ako UI framework je super zvoliť si práve Tailwind CSS, ktorý vám všetko predpripraví a k tomu pridá aj všetky najnovšie updaty. Na komunikáciu s CMS-kom a vytiahnutie kontentu z content-management systému je potrebné Axios.

Ďalej Samuel odporúča vždy používať aj linting (ideálne priamo od providera, teda Nuxt-u), hlavne v prípade, že je projekt medzinárodný alebo sa ho účastní viacero developerov. Voľba testovacieho frameworku je úplne na vás. Ako rendering je fajn používať práve SSR alebo Static Side Generation (SSG) – odporúčané pre headless CMS, pretože vďaka nemu môžete používať všetky výhody jamstacku a tiež je to niečo, čo je veľmi rýchle. Demployment bude teda statický jamstack, ktorý setupne celý projekt. Na záver sa ešte môže setupnúť aj GitHub

Live coding a ďalšie podporné materiály

Počas JavaScript meetup-u Samuel ukazoval live demo využitia Nuxt-u v praxi, ktoré nájdete tu: O JavaScripte vol. 5: Vue & Node. Rovnako môžete nájsť super informácie a tutorialy tu: https://github.com/storyblok/talk-blazingly-fast-nuxtjs.

 

Sledujte naše aktivity aj na našom Instagram a Facebook profile alebo na LinkedIn.