JavaScript har opplevd en markant vekst i popularitet over tid. Det finnes et stort og stadig voksende fellesskap av utviklere som daglig skaper nye verktøy og ressurser for språket.
Denne raske utviklingen kan gjøre det utfordrende å velge det rette verktøyet, rammeverket eller biblioteket for en spesifikk oppgave. Det finnes som regel flere alternativer for nesten alt du ønsker å gjøre med JavaScript. Særlig i begynnelsen kan det være vanskelig å bestemme seg for hvilket bibliotek eller rammeverk man skal satse på å lære.
Denne artikkelen har som mål å demystifisere fordelene ved bruk av ulike JavaScript front-end rammeverk og biblioteker, og gi et klarere bilde av hva de ulike alternativene har å tilby. Målet er å gjøre beslutningsprosessen ved valg av teknologi mer oversiktlig og enklere.
React
React er ikke et rammeverk, men et JavaScript-bibliotek for å utvikle brukergrensesnitt.
Det er et åpen kildekode-prosjekt som vedlikeholdes av Facebook og et aktivt fellesskap av individuelle utviklere. React ble opprinnelig skapt av Jordan Walke som et internt verktøy hos Facebook. Det ble senere gjort tilgjengelig for offentligheten i 2013 og har siden den gang opplevd en enorm popularitetsvekst.
Noen av de viktigste funksjonene inkluderer:
- Gir reaktive, tilpassbare og gjenbrukbare komponenter.
- Bruker en virtuell DOM (Document Object Model).
- Er kjent for sin høye ytelse.
- Har en komponentbasert arkitektur.
- Anvender envei databinding.
- Fremmer gjenbrukbarhet av kode.
- Har et stort og aktivt økosystem.
- Tilbyr praktisk håndtering av tilstand (state management).
Installasjon og bruk
React kan benyttes på to ulike måter i front-end utvikling:
Via CDN
Du kan finne skriptlenker på deres offisielle side som du kan inkludere i HTML-dokumentets <head>-seksjon. Velg lenkene basert på dine behov.
For eksempel, hvis du utvikler i et utviklingsmiljø, kan du bruke disse:
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
Og for produksjon:
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
Via Node.js
Det antas at du allerede har Node.js installert. For å installere React, bruk følgende kommando:
sudo npm i -g create-react-app –save-dev
Etter fullført installasjon, kjør følgende kommando:
create-react-app min-forste-react-applikasjon
Denne kommandoen vil installere alle nødvendige biblioteker for at React skal fungere korrekt, inkludert en utviklingsserver, Webpack og Babel.
Naviger til mappen «min-forste-react-applikasjon» og kjør kommandoen:
npm start
Dette vil starte en utviklingsserver på port 3000. Når du åpner serverens IP-adresse med port 3000 i nettleseren, vil du se noe lignende som nedenfor:
React sin popularitet øker jevnlig, og det er etterspurt av en rekke store organisasjoner. Hvis du er interessert i å lære React, vil vi anbefale dette omfattende kurset.
Vue.js
Vue.js er et progressivt JavaScript-rammeverk for å bygge interaktive brukergrensesnitt og ensideapplikasjoner (SPA). Det er et modell-visning-rammeverk med kjernbiblioteket som fokuserer på visningslaget. Vue er populært på grunn av sin evne til å drive ensideapplikasjoner. I motsetning til React, bruker Vue standard HTML i stedet for JSX.
Vue.js er et åpen kildekode-prosjekt som opprinnelig ble skapt av Evan You og offentliggjort i februar 2014. Her er noen av de viktigste funksjonene:
- Tilbyr reaktive og sammensettbare visningskomponenter.
- Bruker en virtuell DOM.
- Opprettholder fokus på kjernbiblioteket (f.eks. ruting og tilstandshåndtering).
- CSS-scoping håndteres uten CSS-in-JS.
- Anvender envei binding i komponenter.
- Støtter viktige tilleggsfunksjoner.
- Fremmer gjenbrukbarhet av kode.
Installasjon og bruk
Du kan bruke Vue.js i front-end utvikling enten via CDN eller med Node.js.
For bruk via CDN, kan du legge til følgende script i <head>-seksjonen av HTML-dokumentet:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Skriptet ovenfor er egnet for utviklingsformål da det inneholder en konsollmelding. For produksjon anbefales det å bruke følgende:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
For å bruke Vue med Node.js, kan du installere det via npm:
npm install vue
Vi anbefaler på det sterkeste at du leser den offisielle Vue JS dokumentasjonen for å lære mer, eller vurder å ta dette kurset.
Angular
Angular er et strukturert JavaScript-rammeverk for å bygge dynamiske nettsider. Det tillater bruk av HTML som templating språk, og tillater bruk av HTML-syntaks for å uttrykke applikasjonskomponenter på en klar og konsistent måte. Det er et åpen kildekode-prosjekt som vedlikeholdes av Google og andre bidragsytere.
Installasjon
Sørg for at du har den nyeste versjonen av Node.js installert. Det første vi må installere er Angular CLI-verktøyet:
npm install -g @angular/cli
Når det er installert, kan vi opprette et nytt prosjekt med følgende kommando:
ng new min-forste-angular-app
Følg instruksjonene som vises på skjermen. Dette vil generere de nødvendige filene og mappene, og laste ned tredjepartsbiblioteker med npm-modulen, som er nødvendige for at Angular skal fungere korrekt.
For å starte den nyopprettede applikasjonen, kjør følgende kommando fra app-mappen:
ng serve
Dette vil automatisk starte serveren på port 4200.
[[email protected] min-forste-angular-app]# ng serve
10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html
chunk {main} main.js, main.js.map (main) 47.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 10 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered]
Date: 2019-12-28T12:08:20.138Z - Hash: 5d4b93c7bf9e61979c4d - Time: 12864ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.
Konklusjon
Valget av rammeverk eller bibliotek er i stor grad en personlig preferanse, og det er vanskelig å si at ett alternativ er «bedre» enn et annet.
Alle de nevnte rammeverkene og bibliotekene er gode alternativer. Her er en kort oppsummering:
- Du bør vurdere å lære Angular hvis du ønsker et rammeverk som er komplett og stabilt, uten å måtte forholde deg til en rekke eksterne avhengigheter.
- Du bør vurdere å lære React hvis du vil bygge raske Progressive Web Apps (PWA) og ensideapplikasjoner, og er komfortabel med JSX.
- React har det største og mest aktive fellesskapet, og det finnes mange jobbmuligheter innenfor React-utvikling.
- React er relativt enkelt å komme i gang med.
- React er svært tilpassbart, og behandler hver del av brukergrensesnittet som en komponent.
- Vue har mange av de samme fordelene som React, men bruker ikke JSX.
- Arbeidsmarkedet for Vue-utviklere er i stadig vekst.
Her er et diagram fra Google Trends som viser en sammenligning av popularitetsraten for de tre teknologiene:
Hvis du er interessert i front-end utvikling, kan du sjekke ut dette Udemy kurset.