3 parimat JavaScripti raamistikku / teeki kasutajaliidese arendamiseks

Aastate jooksul on JavaScripti populaarsus tõusnud, kogukond kasvab kiiresti ning arendajad arendavad ja arendavad pidevalt keele arendamiseks vajalikke tööriistu.


See teeb tohutuks, kui otsustatakse, millist tööriista / raamistikku / teeki konkreetse ülesande jaoks kasutada, kuna JavaScripti sõna otseses mõttes kõige jaoks, mida soovite teha, on alati mitu võimalust. Alguses on endiselt keeruline otsustada, millist raamatukogu või raamistikku õppida.

See artikkel keskendub mitme JavaScripti kasutajaliidese raamistiku / raamatukogu kasutamise eelise demüstifitseerimisele ja annab neist lõppkokkuvõttes selgema pildi. Selle eesmärk on lihtsustada selle valimise otsustusprotsessi.

Reageeri

Reageeri ei ole raamistik, vaid JavaScripti teek kasutajaliideste loomiseks.

See on avatud lähtekoodiga ning seda haldab Facebook ja üksikute arendajate kogukond. Reakt kirjutas algselt Jordan Walke sisemise vahendina Facebookis. See oli hiljem avatud lähtekoodiga ja lasti üldsusele välja 2013. aastal ning on pärast seda saanud laialdase populaarsuse.

Mõned funktsioonid hõlmavad järgmist.

  • Pakub reaktiivseid, kohandatavaid ja korduvkasutatavaid komponente
  • Kasutab virtuaalset DOM-i
  • Äärmiselt kiire
  • Komponendipõhine
  • Ühesuunaline andmete sidumine
  • Koodi korduvkasutatavus
  • Selle taga on ergas, õitsev ökosüsteem
  • Riigi juhtimise mugav käitlemine

Paigaldamine / kasutamine

Reaktorit saab esipaneelil kasutada kahel erineval viisil.

  • Üle CDN
  • Node.JS kasutamine

Üle CDN

Võite viidata nendele ametlik sait skriptide lingi saamiseks, mille saate lisada oma HTML-i märgistuses päisesilti. Valige lingid eesmärgi põhjal.

Näiteks kui kasutate arenduskeskkonnas, siis tehke järgmist.

Ja tootmiseks

Node.JS kasutamine

Ma eeldan, et teil on NodeJS juba installitud. Reaketi installimiseks tippige järgmine käsk.

sudo npm i -g loo-reageeri -rakendus – salvesta-dev

Kui installimine on tehtud, tippige järgmine käsk

loo-reageeri-rakendus minu-esimene-reageeri-rakendus

Ülaltoodud käsk installib kõik vajalikud teegid, mis on vajalikud Reakti nõuetekohaseks käitamiseks, sealhulgas arendusserver, veebipakett ja babel.

Liikuge kausta Minu esimene reageeri-rakendus ja käivitage järgmine käsk

npm algus

Ülaltoodud käivitavad arendusserveri pordil 3000. Kui serveri IP-le juurde pääsete pordiga 3000, peaksite nägema midagi sellist nagu allpool.

React kogub paljudes suurtes organisatsioonides populaarsust ja nõudlust. Kui olete huvitatud õppimisest, siis soovitaksin seda võtta täielik kursus.

Vue.js

Vue.js on progressiivne JavaScripti raamistik interaktiivsete kasutajaliideste ja üheleheliste rakenduste loomiseks. See on tuumikkoguga mudelvaate vaateraamistik, keskendudes vaatekihile. Vue on populaarne, kuna sellel on võime toita ühelehelisi rakendusi. Erinevalt Reaktist kasutab Vue toores HTML-i, mitte JSX-i.

Vue.js on avatud lähtekoodiga ja selle algselt lõi Evan Sina ja avalikustati 2014. aasta veebruaris. Allpool on toodud mõned funktsioonid.

  • See pakub reaktiivseid ja komposteeritavaid vaatekomponente.
  • Kasutab virtuaalset DOM-i
  • Jätkab keskendumist tuumakogule (st marsruutimine ja olekuhaldus)
  • Ulatuse määramine CSS-is toimub ilma CSS-In-J-ideta
  •  Ühesuunaline sidumine komponentide sees.
  • Toetus olulistele lisandmoodulitele
  • Koodi korduvkasutatavus

Paigaldamine / kasutamine

Vue.js-i saate kasutada esiotsa kas CDN-i kaudu või koos Node.js-ga

Et kasutada CDN-viis, saate oma HTML-i lehe päise sektsiooni lisada järgmise skripti.

Ülaltoodud skript sobib arendamiseks, kuna see sisaldab olulist konsoolisõnumit. Tootmiseks peaksite siiski kasutama järgmist.

Ja, kellele kasutage koos Nodejsiga, saate selle installida käsu npm abil.

npm install vue

Soovitan tungivalt lugeda ametlikku Vue JS-i dokumentatsioon rohkem teada saada või kaaluda selle võtmist tee.

Nurgeline

Nurgeline on dünaamiliste lehtede struktuurne JavaScripti raamistik. See võimaldab HTML-i kasutamist mallikeelena ja HTML-i süntaksi kasutamist rakenduste komponendi selgeks ja kokkuvõtlikuks väljendamiseks. See on avatud lähtekoodiga projekt, mida hooldavad Google ja teised kaasautorid.

Paigaldamine

Veenduge, et teil oleks installitud uusim Nodejs. Esimene asi, mida peame installima, on nurga CLI tööriist.

npm install -g @ nurk / cli

Pärast installimist saame luua järgmise projektiga uue projekti.

uus minu esimene-nurk-rakendus

Järgige ekraanil kuvatavaid juhiseid. See genereerib osa failidest ja kaustadest ning kasutab moodulit npm, et laadida alla nurga korralikult töötamiseks vajalikke kolmanda osapoole teegid..

Uue rakenduse käivitamiseks käivitage rakenduste kaustast järgmine käsk.

serveris

See peaks serveri automaatselt käivitama pordil 4200.

[[e-posti aadress on kaitstud] minu esimene-nurk-rakendus] # teenindab
10% 3/3 moodulite ehitamine 0 aktiivsetℹ 「wds」: projekt töötab aadressil http: // localhost: 4200 / webpack-dev-server /
ℹ 「wds」: veebipaketi väljundit pakutakse /
「「 wds 」: 404 on varundatud //index.html

tükk {main} main.js, main.js.map (main) 47,8 kB [esialgne] [muudetud]
tükk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [esialgne] [muudetud]
tükk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [sisestus] [muudetud]
tükk {stiilid} stiilid.js, stiilid.js.map (stiilid) 10 kB [esialgne] [muudetud]
tükk {müüja} vendor.js, vendor.js.map (tarnija) 3,81 MB [esialgne] [muudetud]
Kuupäev: 2019-12-28T12: 08: 20.138Z – jaotis: 5d4b93c7bf9e61979c4d – aeg: 12864ms
** Nurga all elavat arendusserverit kuulatakse localhostis: 4200, avage brauser aadressil http: // localhost: 4200 / **
「「 wdm 」: edukalt kompileeritud.

Järeldus

Niisiis, see, mille valite õppimiseks, on pigem isiklik eelistus kui “mis on parem” asi.

Kõik ülaltoodud raamistikud / teegid on suurepärased. Siin on lühike kokkuvõte;

  • Te peaksite nurga all õppima, kui soovite raamistikku, millele soovite tugineda, ilma et peaksite tegelema väliste sõltuvustega.
  • Peaksite õppima reageerima, kui soovite ehitada kiiret, PWA-d, ühelehelist rakendust ja teil on JSX-is mugav.
  • Reaktil on tänu oma suurele kogukonnale elavaim kogukond ja rohkem töövõimalusi.
  • Reaketiga on suhteliselt lihtne alustada.
  • React on väga kohandatav ja käsitleb kõiki UI tükke komponendina.
  • Vue-l on samad eelised kui Reaktil, kuid ilma JSX-iga.
  • Vue tööturg kasvab pidevalt.

Siin on Google Trendsi diagramm, mis näitab nende kolme populaarsuse määra võrdlust.

Kui teie huvides on esiotsa arendamine, võite seda vaadata Udemy kursus.

Sildid:

  • Avatud lähtekoodiga

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