JavaScript a câștigat din ce în ce mai mult popularitate de-a lungul anilor, comunitatea crește rapid, iar dezvoltatorii dezvoltă și construiesc în mod continuu instrumente pentru limbă zilnic.
Acest lucru îl face copleșitor atunci când vine vorba de a decide ce instrument/cadru/biblioteca să folosești pentru o anumită sarcină, deoarece există întotdeauna mai multe opțiuni pentru orice vrei să faci în JavaScript. La început, este încă dificil să decizi ce bibliotecă sau cadru să înveți.
Acest articol se concentrează pe demitificarea avantajului utilizării mai multor cadre/biblioteci JavaScript front-end și, în cele din urmă, oferă o imagine mai clară a acestora. Este destinat să ușureze procesul de decizie de selectare a unuia.
Cuprins
Reacţiona
Reacţiona nu este un cadru, ci o bibliotecă JavaScript pentru construirea de interfețe cu utilizatorul.
Este open-source și întreținut de Facebook și de o comunitate de dezvoltatori individuali. React a fost scris inițial de Jordan Walke ca instrument intern la Facebook. Mai târziu, a fost sursă deschisă și a fost lansată publicului larg în 2013 și a câștigat o gamă largă de popularitate după aceea.
Unele dintre caracteristici includ următoarele.
- Oferă componente reactive, personalizabile și reutilizabile
- Utilizează un DOM virtual
- Extrem de rapid
- Bazat pe componente
- Legare de date unidirecțională
- Reutilizarea codului
- Are în spate un ecosistem vibrant și înfloritor
- Manevrare convenabilă a managementului de stat
Instalare/Utilizare
React poate fi folosit pe front-end în două moduri diferite.
Peste CDN
Vă puteți referi la ei site-ul oficial pentru a obține un link pentru scripturi, pe care îl puteți include în eticheta de antet din marcajul HTML. Alegeți linkurile în funcție de scop.
De exemplu, dacă se utilizează într-un mediu de dezvoltare, atunci:
<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>
Și, pentru producție
<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>
Folosind Node.JS
Presupun că aveți deja instalat NodeJS. Pentru a instala React, tastați pur și simplu următoarea comandă.
sudo npm i -g create-react-app –save-dev
Odată ce instalarea este finalizată, tastați următoarea comandă
creați-reacție-aplicația mea-prima-reacție-aplicație
Comanda de mai sus va instala toate bibliotecile necesare pentru ca React să ruleze corespunzător, care include un server de dezvoltare, webpack și babel.
Navigați la folderul my-first-react-application și rulați următoarea comandă
npm start
Cele de mai sus vor lansa un server de dezvoltare pe portul 3000. Și, atunci când accesați IP-ul serverului cu portul 3000, ar trebui să vedeți ceva ca mai jos.
React câștigă popularitate și la cerere de către un număr de organizații mari. Dacă sunteți interesat să învățați, vă recomand să luați acest lucru curs complet.
Vue.js
Vue.js este un cadru JavaScript progresiv pentru construirea de interfețe interactive de utilizator și aplicații cu o singură pagină. Este un cadru de vizualizare model cu biblioteca de bază, concentrându-se pe stratul de vizualizare. Vue este popular, deoarece este capacitatea de a alimenta aplicații cu o singură pagină. Spre deosebire de React, Vue folosește HTML brut și nu JSX.
Vue.js este o sursă deschisă și a fost creat inițial de Evan Tu și lansat public în februarie 2014. Următoarele sunt câteva dintre caracteristici.
- Oferă componente de vizualizare reactive și compozabile.
- Utilizează un DOM virtual
- Menține concentrarea asupra bibliotecii de bază (adică, gestionarea rutei și a stării)
- Scoping în CSS este gestionat fără CSS-In-Js
- Legare unidirecțională în cadrul componentelor.
- Suport pentru suplimente esențiale
- Reutilizarea codului
Instalare/Utilizare
Puteți utiliza Vue.js pe front-end fie prin CDN, fie cu Node.js
Pentru a utiliza modul CDN, puteți adăuga următorul script la secțiunea antetului paginii HTML.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Scriptul de mai sus este potrivit pentru scopuri de dezvoltare, deoarece include un mesaj important de consolă. Cu toate acestea, pentru producție, ar trebui să îl utilizați pe cel de mai jos.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Și, pentru a-l folosi cu Nodejs, îl puteți instala folosind comanda npm.
npm install vue
Vă sfătuiesc cu tărie să citiți versiunea oficială Vue JS documentație pentru a afla mai multe sau pentru a lua în considerare acest lucru cale.
unghiular
unghiular este un cadru JavaScript structural pentru pagini dinamice. Permite utilizarea HTML ca limbaj de șablon și permite utilizarea sintaxei HTML pentru a exprima componenta aplicațiilor în mod clar și concis. Este un proiect open-source întreținut de Google și de alți contribuitori.
Instalare
Asigurați-vă că aveți instalat cel mai recent Nodejs. Primul lucru pe care va trebui să-l instalăm este instrumentul Angular CLI.
npm install -g @angular/cli
Odată instalat, putem crea un nou proiect cu următoarea comandă.
ng new my-first-angular-app
Urmați instrucțiunile de pe ecran. Aceasta generează unele dintre fișierele și folderele și utilizează modulul npm pentru a descărca biblioteci terțe necesare pentru ca Angular să funcționeze corect.
Pentru a porni aplicația nou creată, executați următoarea comandă din folderul aplicații.
ng server
Acest lucru ar trebui să pornească automat serverul pe portul 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.
Concluzie
Deci, ceea ce alegi să înveți este mai mult o preferință personală decât un lucru „care este mai bun”.
Toate cadrele/bibliotecile enumerate mai sus sunt grozave. Iată o scurtă recapitulare;
- Ar trebui să învățați Angular dacă doriți un cadru pe care doriți să vă bazați fără a trebui să vă ocupați de dependențe externe.
- Ar trebui să învățați React dacă doriți să construiți rapid, aplicație PWA, o singură pagină și vă simțiți confortabil cu JSX.
- React are cea mai vibrantă comunitate și mai multe oportunități de angajare datorită comunității sale mari.
- React este relativ ușor de început.
- React este extrem de personalizabil și tratează fiecare parte a interfeței de utilizare ca pe o componentă.
- Vue are aceleași avantaje ca React, dar fără JSX.
- Piața muncii pentru Vue este în continuă creștere.
Iată un grafic pe Google Trends care arată o comparație a ratei de popularitate a celor 3 dintre ele.
Dacă dezvoltarea front-end vă interesează, atunci puteți verifica acest lucru curs Udemy.