JavaScript har blivit allt mer populärt under åren, communityn växer snabbt och utvecklare utvecklar och bygger kontinuerligt verktyg för språket dagligen.
Detta gör det överväldigande när det gäller att bestämma vilket verktyg/ramverk/bibliotek som ska användas för en viss uppgift eftersom det alltid finns flera alternativ för bokstavligen allt du vill göra i JavaScript. Till en början är det fortfarande utmanande att bestämma vilket bibliotek eller ramverk man ska lära sig.
Den här artikeln fokuserar på att avmystifiera fördelen med att använda flera JavaScript-front-end-ramverk/bibliotek och ger i slutändan en tydligare bild av dem. Det är avsett att göra beslutsprocessen för att välja en enklare.
Innehållsförteckning
Reagera
Reagera är inte ett ramverk utan ett JavaScript-bibliotek för att bygga användargränssnitt.
Det är öppen källkod och underhålls av Facebook och en grupp av enskilda utvecklare. React skrevs ursprungligen av Jordan Walke som ett internt verktyg på Facebook. Det var senare öppna källor och släpptes för allmänheten 2013, och har vunnit ett brett spektrum av popularitet efter det.
Några av funktionerna inkluderar följande.
- Ger reaktiva, anpassningsbara och återanvändbara komponenter
- Använder en virtuell DOM
- Extremt snabbt
- Komponentbaserat
- Envägsdatabindning
- Kod återanvändbarhet
- Den har ett levande, blomstrande ekosystem bakom sig
- Bekväm State Management Hantering
Installation/Användning
React kan användas på frontend på två olika sätt.
Över CDN
Du kan hänvisa till deras officiella webbplats för att få en skriptlänk, som du kan inkludera i header-taggen i din HTML-kod. Välj länkarna utifrån syftet.
Till exempel, om du använder i en utvecklingsmiljö, då:
<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 produktion
<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>
Använder Node.JS
Jag antar att du redan har NodeJS installerat. För att installera React, skriv helt enkelt följande kommando.
sudo npm i -g create-react-app –save-dev
När installationen är klar skriver du följande kommando
skapa-reagera-app min-första-reagera-applikation
Ovanstående kommando kommer att installera alla nödvändiga bibliotek som behövs för att React ska fungera korrekt, vilket inkluderar en utvecklingsserver, webbpaket och babel.
Navigera till mappen my-first-react-application och kör följande kommando
npm start
Ovanstående kommer att starta en utvecklingsserver på port 3000. Och när du kommer åt din server-IP med port 3000 bör du se något liknande nedan.
React vinner popularitet och på begäran av ett antal stora organisationer. Om du är intresserad av att lära dig, så skulle jag rekommendera att ta detta komplett kurs.
Vue.js
Vue.js är ett progressivt JavaScript-ramverk för att bygga interaktiva användargränssnitt och ensidiga applikationer. Det är ett ramverk för modellvy med kärnbiblioteket, med fokus på vylagret. Vue är populärt eftersom det är förmågan att driva ensidiga applikationer. Till skillnad från React använder Vue rå HTML och inte JSX.
Vue.js är en öppen källkod och skapades ursprungligen av Evan du och släpptes offentligt i februari 2014. Följande är några av funktionerna.
- Den tillhandahåller reaktiva och komponerbara vykomponenter.
- Använder en virtuell DOM
- Behåller fokus på kärnbiblioteket (dvs routing och tillståndshantering)
- Scoping i CSS hanteras utan CSS-In-Js
- Envägsbindning inom komponenter.
- Stöd för viktiga tillägg
- Kod återanvändbarhet
Installation/Användning
Du kan använda Vue.js på front-end antingen över CDN eller med Node.js
För att använda CDN-sättet kan du lägga till följande skript till din HTML-sidhuvudsektion.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Ovanstående skript är lämpligt för utvecklingsändamål eftersom det innehåller ett viktigt konsolmeddelande. Men för produktion bör du använda nedanstående.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Och för att använda med Nodejs kan du installera det med npm-kommandot.
npm install vue
Jag rekommenderar starkt att du läser den officiella Vue JS dokumentation för att lära dig mer eller överväga att ta detta väg.
Vinkel
Vinkel är ett strukturellt JavaScript-ramverk för dynamiska sidor. Det tillåter användning av HTML som ett mallspråk och tillåter användning av HTML-syntax för att uttrycka applikationskomponenter klart och koncist. Det är ett projekt med öppen källkod som underhålls av Google och andra bidragsgivare.
Installation
Se till att du har de senaste Nodejs installerade. Det första vi behöver installera är verktyget Angular CLI.
npm installera -g @angular/cli
När det är installerat kan vi skapa ett nytt projekt med följande kommando.
ng new my-first-angular-app
Följ instruktionerna på skärmen. Detta genererar några av filerna och mapparna och använder npm-modulen för att ladda ner tredjepartsbibliotek som behövs för att Angular ska fungera korrekt.
För att starta det nyskapade programmet, kör följande kommando från app-mappen.
ng server
Detta bör automatiskt starta upp servern på port 4200.
[[email protected] my-first-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
Så vad du väljer att lära dig är mer en personlig preferens än ”vilket är bättre”.
Alla ramar/bibliotek som anges ovan är fantastiska. Här är en kort sammanfattning;
- Du bör lära dig Angular om du vill ha ett ramverk som du vill lita på utan att behöva hantera externa beroenden.
- Du bör lära dig React om du vill bygga snabb, PWA, Single Page-applikation och du är bekväm med JSX.
- React har det mest levande samhället och fler jobbmöjligheter tack vare sitt stora community.
- React är relativt lätt att komma igång med.
- React är mycket anpassningsbar och behandlar varje del av användargränssnittet som en komponent.
- Vue har samma fördelar som React men utan JSX.
- Arbetsmarknaden för Vue ökar ständigt.
Här är ett diagram på Google Trends som visar en jämförelse av popularitetsgraden för de tre av dem.
Om frontend-utveckling är ditt intresse kan du kolla in det här Udemy kurs.