3 Millor Framework / Biblioteca de JavaScript per al desenvolupament de front-end

El JavaScript ha guanyat popularitat cada cop més gran amb els anys, la comunitat està creixent ràpidament i els desenvolupadors estan desenvolupant i construint contínuament eines per a l’idioma cada dia.


Això fa que sigui aclaparador a l’hora de decidir quina eina / entramat / biblioteca heu d’utilitzar per a una tasca determinada, perquè sempre hi ha múltiples opcions per literalment qualsevol cosa que vulgueu fer amb JavaScript. D’entrada, encara és difícil decidir quina biblioteca o marc s’ha d’aprendre.

Aquest article es centra en desmitificar l’avantatge d’utilitzar diversos frameworks / biblioteques de JavaScript i, en definitiva, en proporciona una imatge més clara. Es pretén facilitar el procés de decisió de selecció d’una.

Reacciona

Reacciona no és un marc, sinó una biblioteca JavaScript per crear interfícies d’usuari.

És de codi obert i mantingut per Facebook i una comunitat de desenvolupadors individuals. Inicialment es va escriure React Jordan Walke com a eina interna a Facebook. Posteriorment va ser obert i obert al públic general el 2013, i després va obtenir una àmplia popularitat.

Algunes de les funcions inclouen les següents.

  • Proporciona components reactius, personalitzables i reutilitzables
  • Utilitza una DOM virtual
  • Extremadament ràpid
  • Basat en components
  • Enquadernació única de dades
  • Reutilitzabilitat del codi
  • Té un ecosistema vibrant i pròsper darrere
  • Maneig convenient de la gestió de l’estat

Instal·lació / ús

React es pot utilitzar al frontend de dues maneres diferents.

  • Sobre CDN
  • Utilitzant Node.JS

Sobre CDN

Podeu referir-vos a la seva lloc oficial per obtenir un enllaç de scripts, que podeu incloure a l’etiqueta de la capçalera del vostre marcador HTML. Trieu els enllaços en funció del propòsit.

Per exemple, si l’utilitzeu en un entorn de desenvolupament, llavors:

I, per a la producció

Utilitzant Node.JS

Suposo que ja teniu NodeJS instal·lat. Per instal·lar React, simplement escriviu la següent comanda.

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

Un cop finalitzada la instal·lació, escriviu la següent comanda

create-react-app my-first-react-application

La comanda anterior instal·larà totes les biblioteques necessàries necessàries perquè React per funcionar adequadament, que inclou un servidor de desenvolupament, webpack i babel.

Vés a la carpeta de la meva primera reacció i executa la següent comanda

npm inici

A continuació, es llançarà un servidor de desenvolupament al port 3000. I, quan accediu a la vostra IP del servidor amb el port 3000, hauríeu de veure una cosa com ara a continuació.

Reactivitat està guanyant popularitat i la demanda per diverses organitzacions. Si esteu interessats en aprendre, us recomano fer-ho curs complet.

Vue.js

Vue.js és un marc progressiu de JavaScript per crear interfícies d’usuari interactives i aplicacions d’una sola pàgina. És un marc de visió de models amb la biblioteca principal, centrada en la capa de visualització. Vue és popular, ja que és la capacitat d’alimentar aplicacions d’una sola pàgina. A diferència de React, Vue utilitza HTML en brut i no JSX.

Vue.js és un codi obert i inicialment va ser creat per Evan Vostè Es van publicar al febrer de 2014. A continuació es mostren algunes de les funcions.

  • Proporciona components de vista reactiva i composable.
  • Utilitza una DOM virtual
  • Manté el focus en la biblioteca bàsica (és a dir, l’encaminament i la gestió de l’estat)
  • Scoping en CSS es gestiona sense CSS-In-Js
  •  Enquadernació unidireccional dins de components.
  • Suport per a complements essencials
  • Reutilitzabilitat del codi

Instal·lació / ús

Podeu utilitzar Vue.js al front-end ja sigui a través del CDN o amb Node.js

Per utilitzar el Via CDN, podeu afegir el següent script a la secció d’encapçalament de pàgines HTML.

El guió anterior és adequat per a propòsits de desenvolupament, ja que inclou un missatge de consola important. Tanmateix, per a la producció, heu d’utilitzar el següent.

I, a utilitzar amb Nodejs, podeu instal·lar-lo mitjançant la comanda npm.

npm instal·la vista

Us recomano fermament que llegiu el Vue JS oficial documentació per obtenir més informació o per considerar-ho Camí.

Angular

Angular és un marc estructural de JavaScript per a pàgines dinàmiques. Permet l’ús de l’HTML com a llenguatge de plantilla i permet l’ús de la sintaxi HTML per expressar el component d’aplicacions de manera clara i concisa. És un projecte de codi obert mantingut per Google i altres col·laboradors.

Instal·lació

Assegureu-vos que tingueu instal·lats els darrers Nodejs. El primer que haurem d’instal·lar és l’eina Angular CLI.

npm install -g @ angular / cli

Un cop instal·lat, podem crear un nou projecte amb la següent comanda.

nou nova primera aplicació angular

Seguiu les instruccions que apareixen a la pantalla. Això genera alguns fitxers i carpetes i fa servir el mòdul npm per descarregar les biblioteques de tercers necessàries perquè funcionin correctament Angular..

Per iniciar l’aplicació de nova creació, executeu la següent comanda des de la carpeta d’aplicacions.

servidor ng

Això ha d’iniciar automàticament el servidor al port 4200.

[[correu electrònic protegit] my-first-angular-app] # ng servir
10% construcció 3/3 mòduls 0 actius ℹ wds 」: el projecte s’està executant a http: // localhost: 4200 / webpack-dev-server /
ℹ 「wds」: la sortida de paquet web es proporciona a partir de /
ℹ 「wds」: 404s es descendeixen a //index.html

chunk {main} main.js, main.js.map (main) 47,8 kB [inicial] [representat]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 264 kB [inicial] [renderitzat]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6,15 kB [entrada] [prestat]
chunk {styles} styles.js, styles.js.map (styles) 10 kB [inicial] [representat]
chunk {vendor} vendor.js, vendor.js.map (venedor) 3.81 MB [inicial] [prestat]
Data: 2019-12-28T12: 08: 20.138Z – Llanxa: 5d4b93c7bf9e61979c4d – Hora: 12864ms
** Angular Live Development Server escolta en localhost: 4200, obre el navegador a http: // localhost: 4200 / **
ℹ 「wdm」: S’ha compilat correctament.

Conclusió

Per tant, el que trieu per aprendre és més una preferència personal que una cosa que “és millor”.

Tots els marcs / biblioteques enumerats anteriorment són excel·lents. Aquí hi ha una breu recopilació;

  • Hauríeu d’aprendre Angular si voleu un framework en què voleu confiar sense haver de fer front a dependències externes.
  • Hauríeu d’aprendre Reactiu si voleu crear una aplicació ràpida, PWA, d’una sola pàgina i us sentiu còmode al voltant de JSX.
  • React té la comunitat més vibrant i més oportunitats laborals a causa de la seva gran comunitat.
  • Amb què reaccionar és relativament fàcil començar.
  • React és altament personalitzable i tracta cada component d’UI com a component.
  • Vue té els mateixos avantatges que React, però sense JSX.
  • El mercat de treball de Vue està en constant augment.

Aquí es mostra un gràfic a Google Trends que mostra una comparació de la taxa de popularitat dels tres.

Si el desenvolupament de primera línia és el vostre interès, podeu comprovar-ho Curs Udemy.

Tags:

  • Codi obert

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