Skal du starte opp, eller skrive om et frontend prosjekt og ønsker hjelp til valg av rammeverk? Da har du kommet til riktig sted!
I denne artikkelen skal jeg, Nicklas Eltvik, prøve å veilede deg gjennom prosessen med å velge et frontend-rammeverk til ditt prosjekt.
Jeg er en fullstack-utvikler med lidenskap for gode løsninger for sluttbrukeren og den beste utviklingsprosessen for utviklere. I bspoke har jeg vært fagansvarlig for frontend-gruppen i tre år og har også vært personalleder i to år, i tillegg til mine daglige oppgaver som konsulent ute hos kunder.
Akkurat nå jobber jeg med Angular 17+, men har tidligere jobbet med React.js, Vue.js, Next.js, PHP, vanilla.js, Jquery, knockout og testet Astro og andre små rammeverk.
«Ut fra disse premissene kan vi etter min mening ta bort flere rammeverk, slik som Astro, Svelte og VueJS.»
Skalerbarhet og vedlikehold
Det er ikke «bare, bare» å utvikle programvare med lang holdbarhet. For det kommer stadig krav om oppgradering og tilrettelegging for brukerne. Arbeid som dette krever høy teknisk kompetanse av utviklerne.
Det å ta i bruk et rammeverk under utviklingen fører til økt struktur, skalerbarhet og sikkerhet. I tillegg vil det tilrettelegge for gjenbrukbarhet av kode, som gjør at utviklerne kan utføre arbeidet raskere og mer effektivt.
Når man skal velge hvilket rammeverk man skal ta i bruk er det viktig at man tenker på fremtiden, og ikke velger «feil» rammeverk for jobben. Det er derfor viktig at man velger et rammeverk som ikke er for gammelt eller for nytt, men som er under stadig forbedring av leverandøren, da det er viktig at kritiske feil blir rettet opp, og nye funksjoner blir lagt til. Jo større et rammeverk er, jo større er også brukergruppen, noe som fører til økt kompetansedeling og gjør det mulig å feilsøke på en mer effektiv måte.
Ut fra disse premissene kan vi etter min mening ta bort flere rammeverk, slik som Astro, Svelte og VueJS.
Slår sammen rammeverk – si hei til «Wangular»
To rammeverk kan være aktuelle
Med mindre du har spesielle behov for hastighet og SEO, så vil alle moderne rammeverk dekke dine behov. En viktig ting for at koden skal være vedlikeholdbar er støtte for typer i form av f.eks. TypeScript.
Om vi legger til grunn levetid, ytelse, vedlikeholdbarhet og popularitet, da vil det i realiteten stå mellom to rammeverk: Angular og React.js.
Siden vi snakker om produksjonskode, så må vi følge anbefalingene til ReactJS- teamet og det er å bruke Next.js. Dette er fordi React.js i seg selv kun er laget for å bygge brukergrensesnitt. React.js har/hadde ingen mening om hvordan man skal løse ruting, typer, linting og osv.
I dag har React.js utviklet seg til å inkludere flere av de teknologiene som man før måtte installere selv, f.eks. typescript, ruting, server side components, men likevel så anbefaler React.js teamet å bruke Next.js for produksjon.
«...da vil det i realiteten stå mellom to rammeverk: Angular og React.js.»
React vs. Angular
Først vil jeg nevne at begge rammeverkene fra et teknisk standpunkt er like bra, det er ulemper og fordeler med begge.
- Originalt var Angular bare for SinglePageApplications og NextJs var laget for prerendring (SSG) og server side rendering (SSR). Med de nyeste oppdateringene så er begge rammeverkene nærmere hverandre enn noen gang før. For de som lurer så støtter Angular SSG og SSR i nyeste versjon.
- Begge rammeverkene har store bedrifter som står for support og videreutvikling. Angular er støttet av Google og NextJs er støttet av Vercel, som har et godt samarbeid med ReactJs teamet, som er støttet av Meta(Facebook).
- Begge har tilgang til mange gode design rammeverk, slik som Tailwind, Material og Bootstrap. De har gode måter å håndtere data og state, via RxJs, Context Api, Redux,NgRx, Akita og Redux toolkit og mye mye mer.
Hvilket rammverk skal man velge, hvis begge er teknisk bra, er enkelt for utviklere å bruke og har bra løsninger for data håndtering og design?
Min mening er at da burde man stille disse spørsmålene: Hvem er det som skal utvikle applikasjonen? Hva kan dine utviklere fra før?
– Angular hiver alt i ansiktet ditt, man kan bli skremt
...Angular?
Er det fullstack-utviklere som er mest backend som skal jobbe på prosjektet?
Da er det ofte en fordel å velge Angular, fordi det er et rammeverk som bruker services, observables og dependency injection som sin kjerne av datahåndtering.
Dette vil føles kjent for en backend-utvikler og enklere å lære seg enn NextJs som bruker React hooks, Redux og/eller React Context API. Angular er et stort rammeverk som løser mange av de utfordringene man har i frontend.
...NextJS?
Er du fullstack-utvikler med frontend kunnskaper eller frontend-utvikler, så kan det være lurere å gå for NextJs. Dette er fordi NextJs er bygd med ReactJs og vil være kjent for mange frontend utviklere.
ReactJs er litt mer populært i Norge og mye mer populært på verdensbasis, og dermed lettere å finne/leie inn nye utviklere til teamet når man trenger å skalere opp og øke utviklingshastigheten og som nevnt tidligere lettere å finne ressurser på nett.
Angular: - Ekstremt mye å sette seg inn i
Bygge egen stack på ReactJs
Hvis du har gode frontend-utviklere som kan alt fra A til Å innen frontend-utvikling, kan det være lurt å ikke følge anbefalingene til ReactJs teamet og heller gå for vanilla ReactJs og bygge sin egen stack.
Fordelen med det er at man kan lettere bytte ut deler av applikasjonen, uten å være avhengig av oppdatering fra de som utvikler rammeverkene. Velger man Angular som sitt rammeverk er man låst til når Angular teamet oppdaterer, feks byggverktøyet.
Om du har din egen stack med ReactJs, kan du bytte til the latest and greatest byggverktøy når du vil. ReactJS gir mer frihet, men mer frihet krever bedre struktur og mer kunnskap fra de som jobber på prosjektet.
Teknologiene norske utviklere bruker: – Mildt sagt ikke fornøyd!
Velg det som passer teamet best
Det viktigste at man velger det rammeverket som passer ditt team best.
- Har du utviklere som foretrekker Angular, så velg det. Enkelt og greit.
- Har du utviklere som foretrekker ReactJS, så vil som regel svaret være NextJS.
Hvis dere ikke vet hvilket rammeverk som passer dere best, kan dere ta kontakt med meg, eller noen andre utviklere her i bspoke. Vi kan bidra med kompetanse og råd, som sikrer at ditt prosjekt får best mulig resultat.
Mine siste tips
- Uansett rammeverk du velger, sørg for at dere gjør en grundig jobb med å dele opp problemet i mindre løsbare problemer i form av f.eks features og PBI-er.
- Husk at hvis du skal utvikle til mobiler og nettbrett, begynn alltid med det minste og skaler opp. Husk at brukeren ønsker en sømløs og intuitiv opplevelse på tvers av plattformer og applikasjoner, så prøv å design likt! For eksempel: Hvis høyre klikk åpner en context meny et sted så skal det fungere likt et annet sted!
- Til slutt ikke glem universell utforming og kravene som WCAG stiller - de kan du lese mer om her!
