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.
Men i denne artikkelen vil 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 å rendre 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-er.
- Er det lov å være lei av React?
Gatsby-fordeler:
- Bruker React som fører til lynraske 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-ulemper:
- Bratt læringskurve.
- Hot-reloader plukker ikke opp alle endringer av og til.
- Må lære deg GraphQL.
- Mer boilerplate (mere React- enn Gatsby- relatert).
For å vise vise det angående boilerplate, så har jeg laget to eksempler:
Nuxt.js, hvordan fungerer det?
Nuxt.js er ikke bare en statisk side-generator, men den kan brukes til det. Nuxt tilbyr også en 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.
Norske utviklere elsker Vue.js
Nuxt.js fordeler
- Ganske rask hot reloading.
- Veldig bra for SEO.
- Kan være statisk eller bruke Nuxt.js som en server og enkelt bytte mellom begge modusene, uten noen enderinger i koden.
- webpack-bundle-analyzer er inkludert.
- Få mer 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 mer 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 å finne ut hvorfor menyen på mobilversjonen av nettsiden ikke funket (eksklusivt i iOS-Safari). Det var fordi iOS-Safari gjør om telefonnummer til linker automatisk, noe som ledet til en hydration-feil som gjorde at ingen av lifeCycle-metodene ble kjørt, og dermed ble ikke animasjonsobjektet initialisert.
- Uforutsett store bundle-størrelser.
- Det er ganske mange Vue-plugins som ikke kommer til å fungere hvis skaperen ikke har hatt Nuxt i bakhodet. Dette skjer fordi disse pluginsene ofte referer til globale objekter som window, men de objektene er ikke tilgjengelige når det blir server side-rendret 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, må du enten bruke props eller populære Vuex.
- Jeg har blitt veldig glad i Vue
Så, hvordan er det å jobbe med Gatsby hvis du jobber mest med Nuxt.js?
Siden Gatsby.js og Nuxt.js er bygd på henholdsvis React og Vue, så blir det bedre å spørre hvordan er det å jobbe med React som en Vue.js-utvikler.
Det første du kommer til å legge merke til, er at i React er at det ikke er noe mer 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 mer kjent enn Vue, siden det bare er HTML og Javascript (eller JSX, da), men samtidig mer komplekst. Vue er mer 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 hjemmeside, og har brukt Nuxt.js på mange kundeprosjekter.
«I min menig ofrer man developer experience for en følelse av at man har kodetalent.»
Jeg tror 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 igjen 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 kodetalent. 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.
Så om noen måneder så har jeg sikkert endret mening igjen! 😄
Slik kommer du i gang med Vue
Komplett gjennomgang for nybegynnere.