3 beste JavaScript-rammeverk/bibliotek for grensesnittutvikling

by
Tweet
Share
Share
Pin
0 Shares

JavaScript har blitt mer og mer populært gjennom årene, fellesskapet vokser raskt, og utviklere utvikler og bygger verktøy for språket daglig.

Dette gjør det overveldende når det gjelder å bestemme hvilket verktøy/rammeverk/bibliotek som skal brukes til en bestemt oppgave, fordi det alltid er flere alternativer for bokstavelig talt alt du vil gjøre i JavaScript. Til å begynne med er det fortsatt utfordrende å bestemme hvilket bibliotek eller rammeverk du skal lære.

Denne artikkelen fokuserer på å avmystifisere fordelen ved å bruke flere JavaScript-front-end-rammeverk/biblioteker og gir til slutt et klarere bilde av dem. Det er ment å gjøre beslutningsprosessen for å velge en enklere.

Reagere

Reagere er ikke et rammeverk, men et JavaScript-bibliotek for å bygge brukergrensesnitt.

Den er åpen kildekode og vedlikeholdes av Facebook og et fellesskap av individuelle utviklere. React ble opprinnelig skrevet av Jordan Walke som et internt verktøy hos Facebook. Det ble senere åpne kilder og utgitt for allmennheten i 2013, og har fått et bredt spekter av popularitet etter det.

Noen av funksjonene inkluderer følgende.

  • Gir reaktive, tilpassbare og gjenbrukbare komponenter
  • Bruker en virtuell DOM
  • Ekstremt raskt
  • Komponentbasert
  • Enveis databinding
  • Gjenbrukbarhet av kode
  • Den har et levende, blomstrende økosystem bak seg
  • Praktisk State Management Handling

Installasjon/bruk

React kan brukes på frontend på to forskjellige måter.

Over CDN

Du kan henvise til deres offisiell side for å få en skriptlink, som du kan inkludere i header-koden i HTML-koden. Velg lenkene basert på formålet.

  Forskjeller mellom Flask og Django

For eksempel, hvis du bruker i et utviklingsmiljø, 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 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>

Bruker Node.JS

Jeg antar at du allerede har NodeJS installert. For å installere React, skriv ganske enkelt inn følgende kommando.

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

Når installasjonen er fullført, skriv inn følgende kommando

lag-reager-app min-første-reager-applikasjon

Kommandoen ovenfor vil installere alle nødvendige biblioteker som trengs for at React skal kjøre riktig, som inkluderer en utviklingsserver, webpack og babel.

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

npm start

Ovennevnte vil starte en utviklingsserver på port 3000. Og når du får tilgang til serverens IP med port 3000, bør du se noe som nedenfor.

React blir stadig mer populært og på forespørsel fra en rekke store organisasjoner. Hvis du er interessert i å lære, så vil jeg anbefale å ta dette komplett kurs.

Vue.js

Vue.js er et progressivt JavaScript-rammeverk for å bygge interaktive brukergrensesnitt og enkeltsideapplikasjoner. Det er et modellvisningsrammeverk med kjernebiblioteket, med fokus på visningslaget. Vue er populært fordi det er muligheten til å drive enkeltsideapplikasjoner. I motsetning til React, bruker Vue rå HTML og ikke JSX.

Vue.js er en åpen kildekode og ble opprinnelig opprettet av Evan du og utgitt offentlig i februar 2014. Følgende er noen av funksjonene.

  • Den gir reaktive og komponerbare visningskomponenter.
  • Bruker en virtuell DOM
  • Opprettholder fokus på kjernebiblioteket (dvs. ruting og statlig ledelse)
  • Scoping i CSS håndteres uten CSS-In-Js
  • Enveis binding i komponenter.
  • Støtte for viktige tillegg
  • Gjenbrukbarhet av kode
  Slik sletter du Tango-konto

Installasjon/bruk

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

For å bruke CDN-måten kan du legge til følgende skript til HTML-sideoverskriften.

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

Skriptet ovenfor er egnet for utviklingsformål da det inneholder en viktig konsollmelding. For produksjon bør du imidlertid bruke den nedenfor.

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

Og for å bruke med Nodejs, kan du installere den ved å bruke npm-kommandoen.

npm install vue

Jeg vil sterkt anbefale at du leser den offisielle Vue JS dokumentasjon for å lære mer eller vurdere å ta dette sti.

Kantete

Kantete er et strukturelt JavaScript-rammeverk for dynamiske sider. Den tillater bruk av HTML som malspråk og tillater bruk av HTML-syntaks for å uttrykke applikasjonskomponenter klart og konsist. Det er et åpen kildekode-prosjekt vedlikeholdt av Google og andre bidragsytere.

Installasjon

Sørg for at du har de nyeste Nodejs 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 my-first-angular-app

Følg instruksjonene på skjermen. Dette genererer noen av filene og mappene og bruker npm-modulen til å laste ned tredjepartsbiblioteker som er nødvendige for at Angular skal kjøre ordentlig.

For å starte det nyopprettede programmet, kjør følgende kommando fra app-mappen.

ng server

Dette skal automatisk starte opp 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.

Konklusjon

  Hva er en smartskjerm, og bør du kjøpe en?

Så hva du velger å lære er mer en personlig preferanse enn «som er en bedre» ting.

Alle rammene/bibliotekene som er oppført ovenfor er flotte. Her er en kort oppsummering;

  • Du bør lære Angular hvis du vil ha et rammeverk du vil stole på uten å måtte forholde deg til eksterne avhengigheter.
  • Du bør lære React hvis du vil bygge rask PWA, Single Page-applikasjon, og du er komfortabel med JSX.
  • React har det mest levende samfunnet og flere jobbmuligheter på grunn av det store samfunnet.
  • React er relativt enkelt å komme i gang med.
  • React er svært tilpassbar og behandler hver del av brukergrensesnittet som en komponent.
  • Vue har de samme fordelene som React, men uten JSX.
  • Arbeidsmarkedet for Vue øker stadig.

Her er et diagram på Google Trends som viser en sammenligning av popularitetsraten til de tre av dem.

Hvis frontend-utvikling er din interesse, kan du sjekke ut dette Udemy kurs.