JavaScript har upplevt en markant ökning i popularitet under åren. Gemenskapen växer snabbt och utvecklare skapar ständigt nya verktyg och resurser för språket.
Denna ständiga utveckling kan göra det svårt att välja rätt verktyg, ramverk eller bibliotek för en specifik uppgift, eftersom det nästan alltid finns flera alternativ för allt man vill göra i JavaScript. I synnerhet kan det vara svårt i början att avgöra vilket bibliotek eller ramverk som är bäst att lära sig.
Denna artikel syftar till att ge en klarare bild av fördelarna med att använda olika JavaScript-ramverk och bibliotek för frontend-utveckling, vilket ska underlätta beslutsprocessen.
React
React är inte ett ramverk, utan ett JavaScript-bibliotek avsett för att skapa användargränssnitt.
Det är öppen källkod och underhålls av Facebook samt en grupp enskilda utvecklare. React skapades ursprungligen av Jordan Walke som ett internt verktyg på Facebook. År 2013 blev det tillgängligt för allmänheten och har sedan dess vunnit stor popularitet.
Här är några av Reacts funktioner:
- Erbjuder reaktiva, anpassningsbara och återanvändbara komponenter.
- Använder en virtuell DOM.
- Är extremt snabbt.
- Komponentbaserat arkitektur.
- Envägsdatabindning.
- Möjlighet till kodåteranvändning.
- Har ett aktivt och växande ekosystem.
- Hanterar tillstånd på ett effektivt sätt.
Installation och användning
React kan användas i frontend-utveckling på två huvudsakliga sätt:
Via CDN
Du kan hitta skriptlänkar på den officiella webbplatsen, som du sedan kan lägga in i `head`-taggen i din HTML-kod. Länkarna ska väljas baserat på avsett användningsområde.
Till exempel, för utvecklingsmiljö, använd:
<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>
Och för produktionsmiljö:
<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>
Med Node.js
Förutsatt att du har NodeJS installerat, kan du installera React med följande kommando:
sudo npm i -g create-react-app --save-dev
Efter installationen, använd detta kommando:
create-react-app min-forsta-react-applikation
Detta kommando installerar alla nödvändiga bibliotek för att React ska fungera korrekt, inklusive en utvecklingsserver, webbpaket och Babel.
Navigera sedan till mappen `min-forsta-react-applikation` och kör:
npm start
Detta startar en utvecklingsserver på port 3000. När du går in på serverns IP-adress med port 3000, bör du se något liknande som visas nedan.
React är populärt och används av många stora organisationer. Om du är intresserad av att lära dig React, kan denna omfattande kurs vara ett bra alternativ.
Vue.js
Vue.js är ett progressivt JavaScript-ramverk för att skapa interaktiva användargränssnitt och enkelspelsapplikationer. Det är ett MVVM-ramverk (Model-View-ViewModel) där fokus ligger på vy-lagret. Vue är populärt för sin förmåga att driva single-page applikationer. Till skillnad från React, använder Vue vanlig HTML istället för JSX.
Vue.js är öppen källkod och skapades av Evan You, och släpptes offentligt i februari 2014. Några av dess funktioner inkluderar:
- Reaktiva och komponerbara vykomponenter.
- Användning av en virtuell DOM.
- Fokus på kärnbiblioteket (t.ex. routing och tillståndshantering).
- CSS-hantering utan CSS-in-JS.
- Envägsdatabindning inom komponenter.
- Stöd för viktiga tillägg.
- Möjlighet till kodåteranvändning.
Installation och användning
Vue.js kan användas i frontend antingen via CDN eller med Node.js.
För att använda CDN, lägg till följande skript i din HTML-sidas `head`-sektion:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Ovanstående skript är lämpligt för utveckling eftersom det innehåller konsolmeddelanden. För produktion bör du använda:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
För att använda med Node.js kan du installera det med npm:
npm install vue
Jag rekommenderar att läsa den officiella Vue JS-dokumentationen för att lära dig mer, eller att ta den här kursen.
Angular
Angular är ett strukturellt JavaScript-ramverk för dynamiska sidor. Det tillåter användning av HTML som ett mall-språk och gör det möjligt att uttrycka applikationskomponenter tydligt och koncist med hjälp av HTML-syntax. Det är ett öppen källkod-projekt som underhålls av Google och andra bidragsgivare.
Installation
Se till att du har den senaste versionen av Node.js installerad. Först behöver vi installera Angular CLI-verktyget:
npm install -g @angular/cli
När det är installerat kan vi skapa ett nytt projekt med följande kommando:
ng new min-forsta-angular-app
Följ instruktionerna som visas på skärmen. Detta genererar filer och mappar och använder npm för att ladda ner bibliotek från tredje part som behövs för att Angular ska fungera korrekt.
För att starta det nyligen skapade programmet, kör följande kommando från applikationsmappen:
ng serve
Detta startar automatiskt servern på port 4200.
[[email protected] min-forsta-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.
Slutsats
Valet av vilket ramverk eller bibliotek du ska lära dig handlar mer om personliga preferenser än att det finns en klar ”bästa” lösning.
Alla ramverk och bibliotek som nämns ovan är utmärkta alternativ. Här är en kort sammanfattning:
- Lär dig Angular om du vill ha ett ramverk som du kan lita på utan att behöva hantera externa beroenden.
- Lär dig React om du vill skapa snabba applikationer, PWA (Progressive Web Apps) och Single Page Applications och om du är bekväm med JSX.
- React har det mest livliga communityt och flest jobbmöjligheter på grund av sin stora användarbas.
- React är relativt enkelt att komma igång med.
- React är mycket anpassningsbart och behandlar varje del av användargränssnittet som en komponent.
- Vue erbjuder liknande fördelar som React, men utan JSX.
- Arbetsmarknaden för Vue växer stadigt.
Här är en jämförelse av populariteten mellan de tre, hämtad från Google Trends:
Om frontend-utveckling intresserar dig, kolla in denna Udemy-kurs.