Nuxt JS vs Gatsby

Hvordan det er å jobbe med Gatsby.js som en Nuxt.js utvikler

Jeg vet selvsagt ikke alt og det kan hende at jeg tar feil og jeg inviterer dere til å komme med innspill sånn at vi kan lære noe nytt. I denne artikkelen vi jeg dekke hvorfor jeg fortrekker Vue/Nuxt ovenfor React/Gatsby og hvordan det er å jobbe med begge rammeverkene.

GatsbyJS, hvordan fungerer det?

Gatsby bruker React for å rendere sider og tilbyr en del kule ting som lazy loading av bilder. Jeg vil si at det beste med GatsbyJS er layzy loading og GraphQL API.


Gatsby JS fordeler

  • Bruker React som fører til lyn raske sider.
  • Lazy loading av bilder.
  • Veldig bra for SEO.
  • Muligheten for å deploye i nesten alle miljøer siden det bare er HTML, CSS og Javascript.
  • Rask loading og bra code splitting.
  • Wordpress integrasjoner.


Gatsby JS Ulemper

  • Stor læringskurve i min mening.
  • Hot-reloader plukker ikke opp alle endringer av og til.
  • Må lære deg GraphQL.
  • Mere boilerplate (mere react enn gatsby relatert).


For å vise vise det angående boilerplate så har jeg laget to eksempler:
Vue
React

Nuxt js, hvordan fungerer det?

Nuxt.js er ikke bare en statisk side generator, men den kan brukes til det. Nuxt tilbyr et server mode. Nuxt.js er bygget på Vue og gir deg en håndfull med kule features som SPA og veldig god kompatibilitet med pre-processors som Stylus, LESS og SASS. Jeg som er en blodfan av SASS setter veldig stor pris på det.

Nuxt.js fordeler

  • Ganske rask hot reloading.
  • Veldig bra for SEO.
  • Kan være på statisk eller bruke Nuxt.js som en server og enkelt bytte imellom begge modusene uten noen enderinger i koden.
  • webpack-bundle-analyzer er inkludert.
  • Får mere for mindre linjer kode i min mening.
  • Kan gjøre API kall gjennom express internt i Nuxt. Så du kan enkelt sette opp custom endpoints for litt mere krevende funksjonalitet. Dette er ikke relevant hvis du kun skal generere statiske nettsider, men jeg tenkte at det var verdt å nevne.

Nuxt.js Ulemper

  • Hydration feil - jeg brukte flere timer på å prøve å finn ut hvorfor menyen på mobil versjonen av nettsiden ikke funket (eksklusivt i IOS Safari), det var fordi IOS Safari gjør om telefon nummere til linker automatisk, noe som ledet til en hydration feil som gjorde at ingen av lifeCycle metodene ble kjørt og dermed ble ikke animasjons objektet initialisert.
  • Uforutsette store bundle størrelser.
  • Plugins. Det er gankse mange Vue plugins som ikke kommer til å fungere hvis skaperen av det ikke har hatt Nuxt i bakhodet. Dette skjer fordi disse pluginsene ofte referer globale objekter som window, de objektene er ikke tiljenglig når det blir server side rendered med Nuxt. For å få det til å fungere må importeringen av pluginsene pakkes inn i et if statement hvor det sjekkes om "process.client" er definert.
  • Innhenting av data kan bare skje på et per page nivå. Så hvis du vil ha tilgang til det i komponenter som ligger lengere nede i treet så må du enten bruke props eller populere en Vuex store.

Så, hvordan er det å jobbe med Gatsby hvis du jobber mest med Nuxt.js?

Siden GatsbyJS og Nuxt.js er begge er henholdsvis bygd på React og Vue, så blir det bedre å spørre hvordan er det å jobbe med React som en Vue.js utvikler.

Det første som du kommer til å legge merke til er at i React er at det ikke er noe mere in-tag stuff og for hver condition må du bruke en JSX expression. Det nærmeste vi kommer det som jeg viste i Vue eksemplet er dette her.

React føles mere kjent enn Vue, siden det bare er HTML og Javascript (eller JSX da) men samtidig mere komplekst. Men Vue er mere minimalistisk men har en del attributes som bare er custom til Vue.

Jeg har testet ut begge på prosjekter som er ute i verden i dag, jeg brukte Gatsby.js på min egen hjemmesiden og har brukt Nuxt.js på mange kunde prosjekter. Jeg tror at jeg fortsatt kommer til å velge Nuxt og Vue fordi det tar vesentlig mindre tid å utvikle i det enn GatsbyJS og React. Det kunden er opptatt av er at et bra produkt produseres, ikke hvilke verktøy som brukes for å produsere det.

Følelsen jeg sitter igjenn med etter at jeg jobber på et React prosjekt er at jeg er smart, men at det kunne blitt gjort på en enklere måte. I min menig ofrer man developer experience for en følelse av at man har koding talent. På samme måte som noen akademikere bruker overdrevet og unødvendig krongletre vokabular som ikke gjør noe for å spisse det de prøver å formidle. Men når det er sagt, så liker jeg fortsatt å jobbe med både React og Vue. Jeg vet ikke om folk kjenner seg igjen i dette, men det går litt i faser. For eksempel når man har en iPhone i 4 år så får man lyst til å bruke android igjen og motsatt, fordi det er noe nytt. Om noen måneder så har jeg sikkert endret mening igjen :).