Angular vs React vs Vue: Quin marc escollireu el 2020

Angular vs React vs Vue: Quin marc escollireu el 2020

Angular vs React vs Vue: Quin marc escollireu el 2020
СОДЕРЖАНИЕ
02 июня 2020

Aquest post és una guia completa sobre la qual potser és la solució adequada per a vosaltres: Angular vs React vs Vue.


Fa tan sols un parell d’anys, els desenvolupadors debatien principalment sobre si haurien d’utilitzar Angular vs React per als seus projectes. En el transcurs dels darrers dos anys, hem vist un creixement d’interès en un tercer jugador anomenat Vue.js.

Si sou un desenvolupador que parteix d’un projecte i no podeu decidir quin és el marc de JavaScript que cal utilitzar, aquesta guia us ha d’ajudar a prendre una decisió.

Cobrim diversos aspectes d’Angular, Vue i React per veure com s’adapten a les vostres necessitats. Aquesta publicació no és només una guia sobre Angular vs React vs Vue, sinó que pretén proporcionar una estructura que ajudi a jutjar els marcs de JavaScript de primera línia en general. En cas que arribi un nou marc l’any que ve, sabreu exactament quins paràmetres cal mirar!

* En aquesta publicació suposem que coneixeu de forma bàsica JavaScript i que també heu utilitzat marcs de JavaScript.

Angular vs React vs Vue

Comencem:

Primera part: Breu història de Vue vs React vs Angular

Abans d’entrar en els detalls tècnics, parlem primer de la història d’aquests marcs, només per apreciar millor la seva filosofia i la seva evolució en el temps.

Com va començar tot ��

logotip angular

Angular, desenvolupat per Google, va ser llançat per primera vegada el 2010, convertint-lo en el més antic del solar. És un marc JavaScript basat en TypeScript. El 2016 es va produir un canvi substancial en l’alliberament d’Angular 2 (i en la caiguda de la secció) "JS" del nom original – AngularJS). Angular 2+ es coneix com a angular. Tot i que AngularJS (versió 1) encara rep actualitzacions, centrem la discussió en Angular. La darrera versió estable és Angular 9, que es va publicar el febrer del 2020.

logo de vue

Vue, també conegut com Vue.js, és el membre més jove del grup. Va ser desenvolupat per l’ex-empleat de Google Evan You el 2014. Durant els últims tres anys, Vue ha experimentat un canvi important en la popularitat, tot i que no té el suport d’una gran empresa. La versió estable actual és 2.6, publicada el febrer de 2019 (amb algunes petites versions llançades des de llavors). Els col·laboradors de Vue són suportat per Patreon. Punt 3, actualment en fase alfa, té previst fer-ho aneu a TypeScript.

logotip de reaccionar

Reacciona, desenvolupat per Facebook, va ser llançat inicialment el 2013. Facebook utilitza React àmpliament en els seus productes (Facebook, Instagram i WhatsApp). La versió estable actual és 16.X, publicada el novembre de 2018 (amb actualitzacions incrementals més petites des de llavors).

Aquí teniu un petit resum de Angular vs React vs Vue, en termes d’estat i història:

La història de Angular vs React vs Vue

Angular
Reacciona
Vue

versió inicial201020132014
Lloc oficialangular.ioreaccions.orgvuejs.org
Aprox. mida (KB)50010080
Versió actual916.x2.6.x
Utilitzat perGoogle, WixFacebook, UberAlibaba, GitLab

Llicència ��‍♂️

Abans d’utilitzar un marc de codi obert, assegureu-vos de passar per la seva llicència. Curiosament, els tres marcs utilitzen el programa Llicència MIT, que proporciona restriccions limitades a la reutilització, fins i tot en programari propietari. Assegureu-vos de conèixer les implicacions de la llicència abans d’utilitzar qualsevol marc o programari.

Aquí està un resum breu de la llicència MIT en termes anglesos.

Popularitat ��

Com a "angular" i "reacciona" són paraules habituals; és difícil comprendre la seva popularitat a partir de Google Trends. Tot i que, un bon representant per la seva popularitat és el nombre d’estrelles que obtenen els seus dipòsits de GitHub. Un canvi sobtat del nombre d’estrelles de Vue es va produir a mitjans del 2016 i, recentment, Vue ha estat allà mateix amb React entre els marcs més populars..

Projectes Estel·les de GitHub per a Angular vs React vs VueNombre d’estrelles en els projectes de GitHub per a Angular, React i Vue

Comprovem com és el mercat de treball d’Angular vs React vs Vue, que també és una bona mesura de popularitat:

Mercat de treball d’Angular vs React vs Vue ��‍♂️

El millor fonts de dades que indiquen les tendències en el mercat de treball són les diverses taules de treball.

Com s’observa de les tendències de finals de 2018, el nombre de treballs que requereixen un conjunt d’habilitats de Angular o React és aproximadament el mateix, mentre que el de Vue encara era només una fracció d’aquest nombre (aproximadament un 20%). Aquesta llista definitivament no és exhaustiva, però dóna una bona imatge de la indústria tecnològica global.

Si teniu una visió estricta des del punt de vista del mercat laboral actual, la vostra millor aposta és aprendre angularment o reaccionar. No obstant això, atès que Vue ha guanyat popularitat en els darrers tres anys, pot trigar un temps perquè els projectes utilitzin Vue o els nous projectes que adoptin Vue per assolir un nivell de maduresa que comanda un major nombre de desenvolupadors..

2ª part: Comunitat i desenvolupament

Ara que coneixeu la història i les tendències de cadascun d’aquests marcs, veurem la comunitat per valorar el desenvolupament d’aquests marcs. Ja hem vist que per a tots els marcs s’han llançat regularment llançaments incrementals durant l’últim any, la qual cosa indica que el desenvolupament està en ple desenvolupament..

Mirem Angular vs React vs Vue pel que fa a les estadístiques dels dipòsits de GitHub:

Angular
Reacciona
Vue

# Vigilants3,2k6,6 k6,0k
# Estrelles57k144k157k
# Tenidors15,9k27,6 k23,7k
# Col·laboradors1.0891.361289

Vue té un gran nombre de vigilants, estrelles i forquilles. Això mostra la seva popularitat entre els usuaris i el seu valor quan es compara Vue vs React. Tot i això, el nombre de col·laboradors de Vue són inferiors a Angular i React.

Una possible explicació és que Vue està dirigida íntegrament per la comunitat de codi obert, mentre que Angular i React tenen una part important dels empleats de Google i Facebook que contribueixen als dipòsits.

A partir de les estadístiques, els tres projectes mostren una important activitat de desenvolupament i això segurament continuarà en el futur; només aquestes estadístiques no poden ser la base per no decidir utilitzar cap dels dos..

3ª part: Migracions

A mesura que treballeu amb el marc que escolliu, no voldreu que us hagueu de preocupar d’una actualització del marc que us presenti i de traure el vostre codi. Tot i que en la majoria dels casos no trobareu molts problemes d’una versió a una altra, és important mantenir el dit sobre el pols perquè algunes actualitzacions poden ser més significatives i requereixen ajustaments per mantenir les coses compatibles..

Angular planifica actualitzacions principals cada sis mesos. També hi ha un període de sis mesos abans que s’expirin qualsevol API principal, cosa que us proporciona el temps de dos cicles de llançament (un any) per fer els canvis necessaris si n’hi ha..

Quan es tracta de Angular vs React, Facebook ho ha afirmat l’estabilitat és de la màxima importància a ells, ja que empreses enormes com Twitter i Airbnb utilitzen React. Les actualitzacions mitjançant versions són generalment les més fàcils de React, amb scripts com reaccionar-codemod ajudant-vos a migrar.

A la secció Migració de les preguntes freqüents, Vue menciona que El 90% de l’API és el mateix si migreu d’1x a 2. Hi ha un eina d’ajuda de migració que funciona a la consola per avaluar l’estat de l’aplicació.

4ª part: Treball amb Vue vs Angular vs React

Hi ha un munt de característiques importants a veure aquí, principalment són la mida general i els temps de càrrega, els components disponibles i la corba d’aprenentatge.

Mida i temps de càrrega ⏲️

Les mides de les biblioteques són les següents:

  • Angular 4+: depèn de la mida del paquet produït
  • Reacció: 116 KB
  • Punt: 91 KB

Tot i que hi ha una diferència significativa entre les mides dels frameworks, encara són petites en comparació amb la mida mitjana de la pàgina web (2+ MB el 2018). A més, si utilitzeu un CDN popular per carregar aquestes biblioteques, és molt probable que un usuari tingui la biblioteca ja carregada al seu sistema local.

Components ��️

Els components són parts integrants dels tres marcs, sense importar si parlem de Vue, React o Angular. Generalment un component obté una entrada i canvia el comportament basat en ell. Aquest canvi de comportament es manifesta generalment com un canvi a la interfície d’usuari d’alguna part de la pàgina. L’ús de components facilita la reutilització del codi. Un component pot ser un carret en un lloc de comerç electrònic o una caixa de sessió d’una xarxa social.

Angular Angular:
A Angular, es coneix com a components directives. Les directives són només marcadors d’elements DOM, que Angular pot rastrejar i connectar també un comportament específic. Per tant, Angular separa la part de la interfície d’usuari dels components com a atributs de les etiquetes HTML i els seus comportaments en forma de codi JavaScript. Això és el que el diferencia quan es mira Angular vs React.
Reacciona Reacciona:
Reacciona, interessantment, combina la interfície d’usuari i el comportament dels components. Per exemple, aquí està el codi per crear un component del món hola a React. A React, la mateixa part del codi és l’encarregada de crear un element d’UI i de dictar-ne el comportament.
Vue Punt:
A Vue, la interfície d’usuari i el comportament també són una part dels components, cosa que fa que les coses siguin més intuitives quan es mira Vue vs React. A més, Vue és altament personalitzable, el que permet combinar la interfície d’usuari i el comportament dels components des d’un script. A més, també podeu utilitzeu els pre-processadors a Vue en lloc de CSS, que és una gran funcionalitat. Vue és excel·lent quan es tracta d’integració amb altres biblioteques, com Bootstrap.

Per comparar com es veu la mateixa aplicació amb diferents biblioteques, aquí teniu una publicació fantàstica creant el mateix Aplicació de llista per fer a React i Vue i contrastant les diferències dels dos marcs.

Corba d’aprenentatge ��

Així que, què tan difícil és aprendre cadascun d’aquests marcs?

Angular Angular:
Angular té una corba d’aprenentatge abrupta, ja que és una solució completa, i dominar Angular requereix que aprengueu conceptes associats com TypeScript i MVC. Tot i que es necessita temps per aprendre Angular, la inversió paga dividends per entendre el funcionament del front end.
reacciona Reacciona:
Ofereix React Començant guia que hauria d’ajudar a configurar una reacció en aproximadament una hora. La documentació és completa i completa, amb solucions a problemes habituals ja presents a Stack Overflow. React no és un marc complet i les funcions avançades requereixen l’ús de biblioteques de tercers. Això fa que la corba d’aprenentatge del marc bàsic no sigui tan forta però depèn del camí que feu amb una funcionalitat addicional. Tanmateix, aprendre a utilitzar React no significa necessàriament que l’utilitzeu les bones pràctiques.
vue Punt:
Vue proporciona una personalització més gran i, per tant, és més fàcil d’aprendre que Angular o React. A més, Vue té un solapament amb Angular i React respecte a la seva funcionalitat, com l’ús de components. Per tant, la transició a Vue de qualsevol dels dos és una opció fàcil. No obstant això, la senzillesa i la flexibilitat de Vue és una espasa de doble tall: permet un codi deficient, cosa que dificulta la depuració i la prova.

Tot i que Angular, React i Vue tenen una corba d’aprenentatge significativa, els seus usos sobre el domini són il·limitats. Per exemple, podeu integrar Angular i Reactar amb WordPress i WooCommerce per crear aplicacions web progressives.

Angular vs React vs Vue: qui guanya?

Cap al final d’aquest missatge, recordem les característiques de cada marc per intentar respondre a la pregunta: Angular vs React vs Vue: quina triaria?

logotip angular Angular és el més madur dels marcs, té un bon suport en termes de col·laboradors i és un paquet complet.

Tanmateix, la corba d’aprenentatge és forta i els conceptes de desenvolupament a Angular poden deixar de banda els nous desenvolupadors.

Angular és una bona opció per a empreses amb grans equips i desenvolupadors que ja utilitzin TypeScript.

A més, hi ha algunes plantilles de tauler d’administració angulars que us poden interessar.

logotip de reaccionar Reacciona Només té edat per ser madur i té una gran quantitat de contribucions de la comunitat. Ha obtingut una acceptació generalitzada. El mercat de treball de React és realment bo i el futur d’aquest marc sembla brillant.

Reactar sembla una bona opció per a algú que s’iniciï amb frameworks JavaScript, funcions inicials i desenvolupadors que tinguin una mica de flexibilitat. La possibilitat d’integrar-se amb altres frameworks perfectament li proporciona un gran avantatge per a aquells que desitgin una certa flexibilitat en el seu codi.

logo de vue Vue és el més recent a la zona, sense el suport d’una empresa important.

Tot i això, en els darrers anys ha sortit molt bé per sortir com a gran competidor per a Angular i React. Potser està jugant un paper amb molts gegants xinesos com Alibaba i Baidu, escollint Vue com el seu principal marc de JavaScript final.

Tanmateix, queda per veure com ho fa en el futur i es justifica que sigui prudent. Vue ha de ser la vostra elecció si preferiu la simplicitat, però també us agrada la flexibilitat.

Més �� A continuació, es mostren algunes plantilles d’administrador de Vue construïdes amb Bootstrap que us poden interessar.

La resposta al debat de Angular vs React vs Vue és que no hi ha cap opció correcta absoluta, que probablement espereu.

Cadascuna d’aquestes biblioteques té els seus propis avantatges i inconvenients. Segons el projecte en què treballeu i els vostres requisits, un d’ells serà més adequat que els altres. Sempre és clau fer les vostres pròpies investigacions abans de decidir-vos, sobretot si aneu treballant en una empresa i no en un projecte personal.

Quin marc creieu que és el guanyador aquí: Angular vs React vs Vue? Feu-nos-ho saber als comentaris a continuació.

Per llegir més: ��

  • Plantilles de disseny de materials per a Vue, Angular, React (IU de material)
  • Millor reaccionar les biblioteques de components de la interfície d’usuari
  • Biblioteques de components d’interès de VU interessants
  • Les millors plantilles de tauler d’administració angulars
  • Millors plantilles gratuïtes per a arrencaments per a ReactJS
  • Plantilles natives de reacció gratuïta
  • Plantilles d’administració gratuïtes i premium VueJS, construïdes amb Bootstrap

En una altra nota, què me’n diria de fer servir WordPress? WordPress és perfectament adequat per executar gairebé qualsevol projecte de lloc web imaginable, i hi ha alguns temes impressionants disponibles per fer que el vostre disseny es vegi genial (molts d’ells gratis). Per no oblidar que podeu allotjar un lloc web de WordPress de manera més barata.

No oblideu unir-se al nostre curs d’accidents per agilitzar el vostre lloc de WordPress. Amb algunes solucions senzilles, podeu reduir fins i tot un 50-80% del temps de càrrega:

Maquetació i presentació de Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector