3 najboljši JavaScript okvir / knjižnica za razvoj spredaj

JavaScript z leti vse bolj pridobiva na priljubljenosti, skupnost hitro raste, razvijalci pa nenehno razvijajo in gradijo orodja za jezik vsak dan.


Zaradi tega je odločilno, katero orodje / ogrodje / knjižnico uporabiti za določeno opravilo, ker je v JavaScriptu vedno več možnosti za dobesedno vse, kar želite storiti. Sprva je še vedno izziv odločiti, v kateri knjižnici ali okviru se je treba naučiti.

Ta članek se osredotoča na demistifikacijo prednosti uporabe več JavaScript okvirjev / knjižnic v sprednjem delu in na koncu daje jasnejšo sliko o njih. Namen je olajšati postopek odločanja o izbiri.

Reagirajte

Reagirajte ni okvir, ampak JavaScript knjižnica za gradnjo uporabniških vmesnikov.

Je odprtokoden in ga vzdržujeta Facebook in skupnost posameznih razvijalcev. React je sprva napisal avtor Jordan Walke kot notranje orodje na Facebooku. Pozneje so bili odprti viri in širši javnosti objavljeni leta 2013, po tem pa je pridobil široko paleto priljubljenosti.

Nekatere funkcije vključujejo naslednje.

  • Zagotavlja reaktivne, prilagodljive in večkratne komponente
  • Uporablja virtualni DOM
  • Izjemno hitro
  • Temelji na komponentah
  • Enosmerna vezava podatkov
  • Ponovna uporaba kode
  • Za seboj ima živahen, uspešen ekosistem
  • Priročno upravljanje države

Namestitev / uporaba

React je mogoče uporabiti na prednji strani na dva različna načina.

  • Čez CDN
  • Uporaba Node.JS

Čez CDN

Lahko se sklicujete na njihove uradna stran da dobite povezavo za skripte, ki jo lahko vključite v oznako glave v oznako HTML. Izberite povezave glede na namen.

Na primer, če uporabljate v razvojnem okolju, potem:

In, za proizvodnjo

Uporaba Node.JS

Predvidevam, da že imate nameščen NodeJS. Če želite namestiti React, preprosto vnesite naslednji ukaz.

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

Ko je namestitev končana, vnesite naslednji ukaz

ustvari-reagiraj-aplikacijo moja prva-reagira-aplikacija

Zgornji ukaz namesti vse potrebne knjižnice, ki so potrebne za ustrezen zagon React, vključno z razvojnim strežnikom, spletnim pakiranjem in babel.

Pomaknite se do mape aplikacije moj prvi odziv in zaženite naslednji ukaz

npm začetek

Zgornje bo sprožilo razvojni strežnik na pristanišču 3000. In ko do dostopa do strežnika dostopate do vrat 3000, bi morali videti nekaj podobnega spodaj.

Več velikih organizacij React pridobiva na popularnosti in na zahtevo. Če vas zanima učenje, vam priporočam, da to vzamete popoln tečaj.

Vue.js

Vue.js je napreden JavaScript okvir za gradnjo interaktivnih uporabniških vmesnikov in aplikacij za eno stran. Gre za okvir modela z osnovno knjižnico, ki se osredotoča na plast pogleda. Vue je priljubljen, saj lahko poganja aplikacije na eni strani. Za razliko od React-a, Vue uporablja surov HTML in ne JSX.

Vue.js je open-source in sprva ga je ustvaril Evan You in javno objavljena februarja 2014. Sledi nekaj funkcij.

  • Zagotavlja reaktivne in sestavljive sestavne dele za pogled.
  • Uporablja virtualni DOM
  • Ohranja osredotočenost na osnovno knjižnico (tj. Usmerjanje in upravljanje države)
  • Obseg v CSS se izvaja brez CSS-in-J-jev
  •  Enosmerna vezava znotraj komponent.
  • Podpora bistvenim dodatkom
  • Ponovna uporaba kode

Namestitev / uporaba

Vue.js lahko uporabljate na sprednjem delu bodisi prek CDN bodisi z Node.js

Za uporabo CDN način, Naslednji skript lahko dodate v poglavje glave HTML strani.

Zgornji skript je primeren za razvojne namene, saj vključuje pomembno sporočilo konzole. Za proizvodnjo pa bi morali uporabiti spodnjega.

In, da uporaba z Nodejs, lahko ga namestite s pomočjo ukaza npm.

npm namestite vue

Toplo vam svetujem, da preberete uradni Vue JS dokumentacijo če želite izvedeti več ali razmisliti o tem pot.

Kotne

Kotne je strukturni okvir JavaScript za dinamične strani. Omogoča uporabo HTML kot jezika predloge in omogoča uporabo sintakse HTML za jasno in jedrnato izražanje komponent aplikacij. Gre za projekt z odprto kodo, ki ga vzdržujeta Google in drugi sodelavci.

Namestitev

Prepričajte se, da imate nameščen najnovejši Nodejs. Prva stvar, ki jo bomo morali namestiti, je orodje Angular CLI.

npm namestite -g @ kotni / cli

Ko je nameščen, lahko ustvarimo nov projekt z naslednjim ukazom.

nova aplikacija moje prve kotne aplikacije

Sledite navodilom na zaslonu. To ustvari nekaj datotek in map in uporabi modul npm za nalaganje drugih knjižnic, potrebnih za pravilno delovanje Angularja.

Če želite zagnati novo ustvarjeno aplikacijo, zaženite naslednji ukaz iz mape z aplikacijami.

strežnik

To bi moralo samodejno zagnati strežnik na vratih 4200.

[[zaščitena e-pošta] my-first-angular-app] # ng služi
10% gradnja 3/3 modulov 0 aktivnih ℹ wds 」: Projekt se izvaja na http: // localhost: 4200 / webpack-dev-server /
「wds」: izhod spletnega paketa je na voljo iz /
ℹ 「wds」: 404s bo vrnjeno v //index.html

kos {main} main.js, main.js.map (glavni) 47,8 kB [začetno] [upodobljeno]
kos {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [začetno] [upodobljeno]
kos {runtime} runtime.js, runtime.js.map (trajanje) 6,15 kB [vnos] [upodobljeno]
kos {styles} styles.js, styles.js.map (styles) 10 kB [začetno] [upodobljeno]
kos {vendor} vendor.js, vendor.js.map (prodajalec) 3,81 MB [začetno] [upodobljeno]
Datum: 2019-12-28T12: 08: 20.138Z – Hash: 5d4b93c7bf9e61979c4d – Čas: 12864ms
** Angular Live Development Server posluša v localhostu: 4200, odprite brskalnik na http: // localhost: 4200 / **
ℹ 「wdm」: uspešno sestavljeno.

Zaključek

Torej, tisto, kar se odločiš za učenje, je bolj osebna želja, kot pa “kar je boljše”.

Vsi zgoraj navedeni okviri / knjižnice so odlični. Tu je kratek povzetek;

  • Angular naj se naučite, če želite okvir, na katerega se želite zanesti, ne da bi se morali ukvarjati z zunanjimi odvisnostmi.
  • React bi se morali naučiti, če želite hitro graditi, PWA, aplikacijo za eno stran in vam je všeč okoli JSX.
  • Zaradi svoje velike skupnosti ima React najnaprednejšo skupnost in več možnosti za zaposlitev.
  • React je razmeroma enostavno začeti.
  • React je zelo prilagodljiv in obravnava vsak del uporabniškega vmesnika kot komponento.
  • Vue ima enake prednosti kot React, vendar brez JSX.
  • Trg dela za Vue nenehno narašča.

Tu je grafikon v Google Trendih, ki prikazuje primerjavo stopnje priljubljenosti treh od njih.

Če vas zanima razvoj vnaprej, lahko to preverite Seveda Udemy.

Oznake:

  • Odprtokodno

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map