3 bedste JavaScript-ramme/bibliotek til frontend-udvikling

Af
Tweet
Share
Share
Pin

JavaScript har i stigende grad vundet popularitet gennem årene, fællesskabet vokser hurtigt, og udviklere udvikler og bygger løbende værktøjer til sproget dagligt.

Dette gør det overvældende, når det kommer til at beslutte, hvilket værktøj/ramme/bibliotek, der skal bruges til en bestemt opgave, fordi der altid er flere muligheder for bogstaveligt talt alt, hvad du vil gøre i JavaScript. I starten er det stadig udfordrende at beslutte, hvilket bibliotek eller hvilken ramme man skal lære.

Denne artikel fokuserer på at afmystificere fordelen ved at bruge flere JavaScript front-end frameworks/biblioteker og giver i sidste ende et klarere billede af dem. Det er beregnet til at gøre beslutningsprocessen med at vælge en nemmere.

Reagere

Reagere er ikke et framework, men et JavaScript-bibliotek til opbygning af brugergrænseflader.

Det er open source og vedligeholdes af Facebook og et fællesskab af individuelle udviklere. React blev oprindeligt skrevet af Jordan Walke som internt værktøj hos Facebook. Det var senere åbne kilder og udgivet til den brede offentlighed i 2013, og har vundet en bred vifte af popularitet efter da.

Nogle af funktionerne inkluderer følgende.

  • Giver reaktive, tilpasselige og genanvendelige komponenter
  • Bruger en virtuel DOM
  • Ekstremt hurtig
  • Komponentbaseret
  • Envejs databinding
  • Kode genanvendelighed
  • Det har et levende, blomstrende økosystem bag sig
  • Praktisk State Management Håndtering

Installation/brug

React kan bruges på frontend på to forskellige måder.

Over CDN

Du kan henvise til deres officielle side for at få et script-link, som du kan inkludere i header-tagget i din HTML-markering. Vælg links ud fra formålet.

  Jitsi – Self-Hosted Open Source videokonferenceløsning [+3 Hosting Platforms]

For eksempel, hvis du bruger i et udviklingsmiljø, så:

<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 til 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>

Brug af Node.JS

Jeg antager, at du allerede har NodeJS installeret. For at installere React skal du blot skrive følgende kommando.

sudo npm i -g create-react-app –save-dev

Når installationen er færdig, skriv følgende kommando

oprette-reager-app min-første-reager-applikation

Ovenstående kommando vil installere alle de nødvendige biblioteker, der er nødvendige for at React kan køre korrekt, som inkluderer en udviklingsserver, webpack og babel.

Naviger til mappen my-first-react-application og kør følgende kommando

npm start

Ovenstående vil starte en udviklingsserver på port 3000. Og når du får adgang til din server IP med port 3000, skulle du se noget som nedenfor.

React vinder popularitet og on-demand af en række store organisationer. Hvis du er interesseret i at lære, så vil jeg anbefale at tage dette komplet kursus.

Vue.js

Vue.js er en progressiv JavaScript-ramme til opbygning af interaktive brugergrænseflader og enkeltsidede applikationer. Det er en model-view-ramme med kernebiblioteket, der fokuserer på visningslaget. Vue er populært, for det er evnen til at drive enkeltsides applikationer. I modsætning til React bruger Vue rå HTML og ikke JSX.

Vue.js er en open source og blev oprindeligt skabt af Evan dig og udgivet offentligt i februar 2014. Følgende er nogle af funktionerne.

  • Det giver reaktive og komponerbare visningskomponenter.
  • Bruger en virtuel DOM
  • Fastholder fokus på kernebiblioteket (dvs. Routing og statsstyring)
  • Scoping i CSS håndteres uden CSS-In-Js
  • Envejsbinding i komponenter.
  • Understøttelse af væsentlige tilføjelser
  • Kode genanvendelighed
  6 måder at få mere ud af Microsoft Whiteboard på

Installation/brug

Du kan bruge Vue.js på front-end enten over CDN eller med Node.js

For at bruge CDN-måden kan du tilføje følgende script til din HTML-sidehovedsektion.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Ovenstående script er velegnet til udviklingsformål, da det indeholder en vigtig konsolmeddelelse. Til produktion skal du dog bruge nedenstående.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Og for at bruge med Nodejs kan du installere det ved hjælp af npm-kommandoen.

npm install vue

Jeg vil kraftigt råde dig til at læse den officielle Vue JS dokumentation for at lære mere eller overveje at tage dette sti.

Kantet

Kantet er en strukturel JavaScript-ramme til dynamiske sider. Det tillader brugen af ​​HTML som et skabelonsprog og tillader brugen af ​​HTML-syntaks til at udtrykke applikationskomponent klart og kortfattet. Det er et open source-projekt, der vedligeholdes af Google og andre bidragydere.

Installation

Sørg for at have de nyeste Nodejs installeret. Den første ting, vi skal installere, er Angular CLI-værktøjet.

npm installer -g @angular/cli

Når det er installeret, kan vi oprette et nyt projekt med følgende kommando.

ng new my-first-angular-app

Følg instruktionerne på skærmen. Dette genererer nogle af filerne og mapperne og bruger npm-modulet til at downloade tredjepartsbiblioteker, der er nødvendige for, at Angular kan køre korrekt.

For at starte det nyoprettede program skal du køre følgende kommando fra apps-mappen.

ng server

Dette bør automatisk starte serveren 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.

Konklusion

  Sådan efterlader du en gruppebeskedstråd på LinkedIn

Så hvad du vælger at lære er mere en personlig præference end “hvilket er en bedre” ting.

Alle de rammer/biblioteker, der er anført ovenfor, er fantastiske. Her er en kort opsummering;

  • Du bør lære Angular, hvis du vil have et Framework, som du vil stole på uden at skulle håndtere eksterne afhængigheder.
  • Du bør lære React, hvis du vil bygge hurtig, PWA, Single Page applikation, og du er komfortabel med JSX.
  • React har det mest levende fællesskab og flere jobmuligheder på grund af dets store fællesskab.
  • React er forholdsvis let at komme i gang med.
  • React er meget tilpasselig og behandler hvert stykke UI som en komponent.
  • Vue har de samme fordele som React men uden JSX.
  • Arbejdsmarkedet for Vue er konstant stigende.

Her er et diagram på Google Trends, der viser en sammenligning af popularitetsraten for de 3 af dem.

Hvis frontend-udvikling er din interesse, så kan du tjekke dette ud Udemy kursus.