Angular vs React vs. Vue - Comparació

La decisió sobre un marc de JavaScript per a la vostra aplicació web pot ser aclaparadora. Angular i React són molt populars en aquests dies, i hi ha una novetat que fa molta tracció últimament: VueJS. A més, aquests són només alguns dels nous nens del bloc.

Javascripts el 2017: els dies no són fàcils.

Llavors, com hem de decidir?

Abans de començar - SPA o no?

Primer hauríeu de prendre una decisió clara de si necessiteu una aplicació d'una sola pàgina (SPA) o si preferiu adoptar un enfocament de diverses pàgines.

Els titulars d’avui: Angular, React i Vue

Primer, voldríem parlar del cicle de vida i de les consideracions estratègiques. Aleshores, passarem a les funcions i conceptes dels tres frameworks javascript. Finalment, arribarem a una conclusió.

Aquí teniu les preguntes que abordarem avui:

  • Quina edat tenen els marcs / biblioteques?
  • És probable que els marcs hi hagi una estona?
  • Quina extensió i ajuda són les seves comunitats corresponents?
  • Què tan fàcil és trobar desenvolupadors per a cadascun dels marcs?
  • Quins són els conceptes bàsics de programació dels marcs?
  • Què tan fàcil és utilitzar els marcs per a aplicacions petites o grans?
  • Com sembla cada corba d’aprenentatge?
  • Quin tipus de rendiment podeu esperar dels marcs?
  • On es pot mirar de prop sota la caputxa?
  • Com es pot començar a desenvolupar amb el marc escollit?

1. Cicle de vida i consideracions estratègiques

1.1 Alguna història

Angular és un marc de Javascript basat en TypeScript. Desenvolupat i mantingut per Google, es descriu com un "Mheu de JavaScript superheroic de JavaScript". Angular (també "Angular 2+", "Angular 2" o "ng2") és la reescriptura, la majoria successora incompatible amb AngularJS (també "Angular.js" o "AngularJS 1.x"). Mentre que AngularJS (l'antic) es va publicar inicialment a l'octubre de 2010, encara s'està solucionant errors, etc., la nova Angular (sense JS) es va introduir el setembre del 2016 com a versió 2. La versió més recent principal és la versió 4, ja que la versió 3 es va saltar. Angular és utilitzat per Google, Wix, weather.com, health.gov i Forbes (segons madewithangular, stackshare i libscore.com).

React es descriu com "una biblioteca JavaScript per crear interfícies d'usuari". Inicialment llançat al març de 2013, React va ser desenvolupat i mantingut per Facebook, que utilitza components React en diverses pàgines (no com a aplicació d'una sola pàgina). Segons aquest article de Chris Cordle, React s'utilitza molt més a Facebook que Angular a Google. React també és utilitzat per Airbnb, Uber, Netflix, Twitter, Pinterest, Reddit, Udemy, Wix, Paypal, Imgur, Feedly, Stripe, Tumblr, Walmart i altres (segons Facebook, stackshare i libscore.com).

Facebook treballa en el llançament de React Fiber. Canviarà Reactivar sota la caputxa (suposadament, per tant, es produirà una rendibilitat molt més ràpida), però les coses seran compatibles amb el retard després dels canvis. Facebook va parlar dels canvis en la seva conferència de desenvolupadors de l’abril del 2017 i es va publicar un article no oficial sobre la nova arquitectura. React Fiber es va llançar amb React 16 el setembre de 2017.

Vue és un dels marcs JS amb més ràpid creixement el 2016. Vue es descriu a si mateix com un "MVVM intuïtiu, ràpid i composable per construir interfícies interactives". Va ser llançat per primera vegada el febrer de 2014 per l'ex-empleat de Google Evan You (BTW: Evan Va escriure una interessant publicació al bloc sobre les activitats i els números de màrqueting a la primera setmana). Ha estat un èxit força, sobretot tenint en compte que Vue obté tanta tracció com un xou únic sense el suport d’una gran companyia. Actualment, Evan compta amb un equip de dotzenes de desenvolupadors principals. El 2016 es va publicar la versió 2. Vue l'utilitza Alibaba, Baidu, Expedia, Nintendo, GitLab: es pot trobar una llista de projectes més petits a madewithvuejs.com.

Els tres marcs estan disponibles sota la llicència MIT.

Reaccioneu enviat amb un fitxer especial de llicència BSD3 fins a setembre de 2017. Hi va haver moltes discussions sobre el fitxer de patent. Si us interessa la història, podeu llegir aquesta discussió sobre el tema de Github, els motius i la història del fitxer de patents (de l'ex-enginyer James Ide James Ide), per què no us heu de fer por (de Dennis Walsh), la advertència de l’ús de les startups (de Raúl Kripalani) i una declaració anterior de Facebook sobre aquest tema: Explicating’s license of React. De totes maneres, tot no hauria d’importar, ja que finalment va anunciar Facebook, que React obtindrà la llicència MIT.

1.2 Desenvolupament bàsic

Com ja s'ha apuntat, Angular i React són recolzats i utilitzats per les grans empreses. Facebook, Instagram i Whatsapp l’utilitzen per a les seves pàgines. Google l'utilitza en molts projectes: per exemple, la nova interfície d'usuari d'Adwords es va implementar amb Angular & Dart. Una vegada més, Vue està realitzat per un grup d’individus que treballen amb el suport via Patreon i altres mitjans de patrocini. Pots decidir si és positiu o negatiu. Matthias Götzke creu que el petit equip de Vue és un benefici, ja que condueix a un codi / API més net i menys sobreeixit.

Vegem algunes estadístiques: Angular mostra 36 persones a la pàgina de l'equip, Vue enumera 16 persones i React no té una pàgina d'equip. A Github, Angular té> 25.000 estrelles i 463 col·laboradors, React té> 70.000 estrelles i> 1.000 col·laboradors, i Vue té gairebé 60.000 estrelles i només 120 col·laboradors. També podeu consultar l’historial d’estrelles de Github per trobar Angular, React i Vue. Una vegada més, Vue sembla estar de moda molt bé. Segons bestof.js, en els últims tres mesos, Angular 2 ha aconseguit una mitjana de 31 estrelles al dia, Reactar 74 estrelles i 107 estrelles Vue.JS.

Un historial d'estels de Github per angular, reacció i origen (font)

Actualització: Gràcies a Paul Henschel per assenyalar les tendències de la nit. Es mostren el nombre de descàrregues dels paquets npm donats i són encara més útils com un simple aspecte de les estrelles de Github:

Els números de descàrrega de npm dels paquets de npm donats en els darrers 2 anys.

1.3 Cicle de vida del mercat

És difícil comparar Angular, React i Vue a Google Trends a causa dels diversos noms i versions. Una manera d'aproximar-se podria ser la cerca a la categoria "Internet i tecnologies". Aquí està el resultat:

Ah, bé. Vue no es va crear abans del 2014, per tant hi ha alguna cosa aquí. La Vue és francesa per "vista", "vista" o "opinió". Potser és així. La comparació de "VueJS" i "Angular" o "React" tampoc és justa, ja que VueJS gairebé no té resultats en comparació amb els altres.

Provem una altra cosa, doncs. El radar tecnològic de ThoughtWorks dóna una bona impressió de com evolucionen les tecnologies amb el pas del temps. Redux està en fase d’adopció (per adoptar-se en projectes!), I ha estat inestimable en diversos projectes de ThoughtWorks. Vue.js està en fase de prova (prova-ho!). Es descriu com una alternativa lleugera i flexible a l’angular amb una corba d’aprenentatge inferior. L’Angular 2 es troba en fase d’avaluació: els equips ThoughtWork els utilitza amb èxit, però encara no és una recomanació contundent

Segons l’última enquesta Stackoverflow 2017, el 67% dels desenvolupadors enquestats i React s’estimen i el 52% d’AngularJS. "No té interès per continuar desenvolupant" registra un nombre més alt d'AngularJS (48%) davant Reacció (33%). Vue no és al Top 10 en cap dels dos casos. A continuació, hi ha l’enquesta statejs.com comparant “frameworks front-end”. Els fets més interessants: React i Angular tenen un 100% de consciència, i el 23% de les persones enquestades desconeix Vue. Pel que fa a la satisfacció, React va anotar el 92% per "tornar a utilitzar", el Vue el 89% i Angular 2 només el 65%.

Què passa amb una altra enquesta de satisfacció del client? Eric Elliott en va iniciar una a l’octubre de 2016 per avaluar Angular 2 i React. Només el 38% de les persones enquestades tornaria a utilitzar Angular 2, mentre que el 84% tornaria a utilitzar React.

1.4 Suport i migracions a llarg termini

Les API de reacció són força estables, tal com afirma Facebook en els seus principis de disseny. També hi ha alguns scripts que us ajudaran a passar de la vostra API actual a una de més nova: consulteu react-codemod. Les migracions són força fàcils i no hi ha cap cosa necessària com a versió de suport a llarg termini. En aquesta publicació de Reddit, la gent nota que les actualitzacions no van ser mai un problema. L’equip de React va escriure una publicació al bloc sobre el seu esquema de versió. Quan afegeixen un avís de desaprofitació, el guarden per a la resta de la versió de llançament actual abans de canviar el comportament a la següent versió principal. No hi ha cap canvi previst per a una nova versió principal: v14 es va publicar a l'octubre de 2015, v15 es va publicar a l'abril de 2016, i v16 encara no té data de llançament. L'actualització no hauria de suposar cap problema, tal com va assenyalar recentment un desenvolupador principal de React.

Pel que fa a Angular, hi ha una publicació de blog sobre la versió i el llançament d’Angular que comença amb la versió v2. Hi haurà una actualització important cada sis mesos i hi haurà un període d’inprecuració d’almenys sis mesos (dos llançaments importants). Hi ha algunes API experimentals marcades a la documentació amb períodes de desaprofitació més curts. Encara no hi ha cap anunci oficial, però, segons aquest article, l'equip angular ha anunciat versions de suport a llarg termini que comencen amb Angular 4. Aquestes seran compatibles amb almenys un any més enllà de la propera versió principal. Això vol dir que Angular 4 serà compatible fins a almenys setembre de 2018 amb correccions d'errors i pegats importants. En la majoria dels casos, actualitzar Angular de v2 a v4 és tan fàcil com actualitzar les dependències angulars. Angular també ofereix una guia amb informació sobre si calen canvis més.

El procés d’actualització de Vue 1.x a 2.0 hauria de ser fàcil per a una petita aplicació: l’equip de desenvolupadors ha afirmat que el 90% de les API continuaven igual. Hi ha una bona eina d’ajuda de migració-diagnòstic d’actualització que funciona a la consola. Un desenvolupador va assenyalar que l'actualització de v1 a v2 no era encara divertida en una aplicació gran. Malauradament, no hi ha cap full de ruta (públic) clar sobre la propera versió principal ni informació sobre els plans de versions LTS.

Una altra cosa: Angular és un marc complet i ofereix moltes coses que s’agrupen. React és més flexible que Angular i, probablement, acabareu utilitzant biblioteques més independents, no ajustades i que es mouen ràpidament. Això vol dir que heu de tenir cura de les actualitzacions i migracions corresponents pel vostre compte. També pot ser un perjudici si alguns paquets ja no es mantenen o algun altre paquet es converteix en l'estàndard de facto en algun moment.

1.5 Recursos humans i contractació

Si teniu desenvolupadors HTML interns que no volen aprendre més Javascript, preferiu escollir Angular o Vue. Reaccionar comporta més Javascript (en parlarem més endavant).

Tens dissenyadors que treballin a prop del codi? L'usuari "pier25" anota a Reddit que React té sentit si treballa per Facebook, on tothom és un desenvolupador de superherois. Al món real, no sempre trobareu un dissenyador que pugui modificar JSX, per tant, treballar amb plantilles HTML serà molt més senzill.

El bon aspecte del marc angular és que un nou desenvolupador d’Angular 2 d’una altra empresa es familiaritzarà ràpidament amb totes les convencions necessàries. Els projectes reaccionats es diferencien en termes de decisions arquitectòniques i els desenvolupadors han de familiaritzar-se amb la configuració del projecte.

Angular també és bo si teniu desenvolupadors amb un rerefons orientat a objectes o a qui no us agrada Javascript. Per arribar a aquest punt de casa, aquí teniu un pressupost de Mahesh Chand:

No sóc desenvolupador de JavaScript. Els meus antecedents són la creació de sistemes empresarials a gran escala mitjançant plataformes de programari “reals”. Vaig començar el 1997 a crear aplicacions mitjançant C, C ++, Pascal, Ada i Fortran. (...) Puc dir clarament que JavaScript només és una magnitud per a mi. Al ser un expert MVP de Microsoft, tinc una bona comprensió sobre TypeScript. Tampoc veig Facebook com una empresa de desenvolupament de programari. Tot i això, Google i Microsoft ja són els majors innovadors de programari. Em sento més còmode treballant amb un producte que compta amb un fort suport de Google i Microsoft. També (...) amb els meus antecedents, sé que Microsoft té plans encara més grans per TypeScript.

Bé, doncs ... Probablement hauria de mencionar que Mahesh és un director regional de Microsoft.

2. Comparació de React, Angular & Vue

2.1 Components

Els marcs en qüestió es basen en components. Un component obté una entrada i després d’alguna conducta interna / computació, retorna una plantilla d’UI renderitzada (una zona d’inici de sessió / sortida de sessió o un element de llista de tasques pendents) com a sortida. Els components definits han de ser fàcilment reutilitzables a la pàgina web o dins d'altres components. Per exemple, podeu tenir un component de graella (format per un component de capçalera i diversos components de fila) amb diverses propietats (columnes, informació de capçalera, files de dades, etc.) i poder reutilitzar el component amb diferents conjunts de dades en una altra pàgina. Aquí tens un article complet sobre els components, per si voleu obtenir més informació sobre això.

Ambdós reaccionen i Vue excel·len en manejar components mut: petites funcions sense estat que reben una entrada i una devolució d’elements com a sortida.

2.2 Tipografia i ES6 davant ES5

React se centra en l’ús de Javascript ES6. Vue utilitza Javascript ES5 o ES6.

Angular es basa en TypeScript. Això ofereix més coherència en exemples relacionats i en projectes de codi obert (els exemples de reacció es poden trobar a ES5 o ES6). També introdueix conceptes com a decoradors i tipus estàtics. Els tipus estàtics són útils per a les eines d’intel·ligència de codi, com ara la reactivació automàtica, el salt a les definicions, etc. - També suposa que redueixen el nombre d’errors d’una aplicació. Tot i que, certament, no hi ha consens sobre aquest tema. Eric Elliott no està d’acord amb el seu article “El xocant secret sobre els tipus estàtics”. Daniel C Wang diu que el cost d’utilitzar tipus estàtics no perjudica i que és bo tenir un desenvolupament basat en proves (TDD) i una tipografia estàtica.

Probablement també heu de saber que podeu utilitzar el flux per activar la comprovació del tipus a React. És un verificador de tipus estàtic desenvolupat per Facebook per JavaScript. El flux també es pot integrar a VueJS.

Si esteu escrivint el vostre codi en TypeScript, ja no esteu escrivint JavaScript estàndard. Tot i que va creixent, TypeScript encara té una base d’usuaris minúscula en comparació amb la de tot l’idioma JavaScript. Un dels riscos podria ser que aneu en una direcció equivocada perquè TypeScript, per molt poc probable que sigui, també desaparegui amb el pas del temps. A més, TypeScript afegeix una gran quantitat d'aprenentatge (aprenentatge) als projectes: podeu llegir més informació sobre això en la comparació Angular 2 vs. React d'Eric Elliott.

2.3 Plantilles - JSX o HTML

Reaccioneu les pauses amb bones pràctiques de llarga durada. Durant dècades, els desenvolupadors van intentar separar les plantilles d’UI i la lògica de Javascript en línia, però amb JSX, aquestes es tornen a barrejar. Pot semblar terrible, però hauríeu d’escoltar la xerrada de Peter Hunt “Reaccionar: repensar les bones pràctiques” (d’octubre de 2013). Assenyala que separar les plantilles i la lògica no és més que una separació de tecnologies, no és qüestió. Hauríeu de crear components en lloc de plantilles. Els components són reutilitzables, composables i homologables.

JSX és un preprocessador opcional per a la sintaxi semblant a HTML que es compilarà més endavant en Javascript. Té alguns quirks: per exemple, heu d'utilitzar className en lloc de classe, perquè aquest darrer és un nom protegit a Javascript. JSX és un gran avantatge per al desenvolupament, ja que ho teniu tot en un sol lloc, i la realització de codis i els controls de temps de compilació funcionen millor. Quan feu un text tipogràfic a JSX, React no es compila i imprimeix el número de línia on es va produir el error. L’Angular 2 falla silenciosament durant el temps d’execució (això és probable que l’argument no sigui vàlid si feu servir AOT amb Angular).

JSX implica que tot el que hi ha a React és Javascript: s'utilitza tant per a les plantilles JSX com per a la lògica. Cory House ho assenyala en el seu article de gener de 2016: "Angular 2 continua" JS "a HTML. React posa "HTML" a JS. " Això és bo, perquè Javascript és més potent que l'HTML.

Les plantilles angulars són HTML millorat amb un llenguatge angular especial (coses com ngIf o ngFor). Mentre que React requereix coneixement de JavaScript, Angular t’obliga a aprendre sintaxi específica angular.

Vue ofereix "components d'un sol fitxer". Sembla una reducció de la separació de preocupacions: les plantilles, els scripts i els estils es troben en un sol fitxer, però en tres seccions ordenades diferents. Això significa que podeu ressaltar sintaxi, suport CSS i un ús més fàcil de preprocessadors com Jade o SCSS. He llegit en altres articles que JSX és més fàcil de depurar perquè Vue no mostrarà errors de sintaxi HTML incorrectes. Això no és cert perquè Vue converteix HTML en representació de funcions, de manera que els errors es mostren sense problemes (Gràcies a Vinicius Reis per fer comentaris i la correcció!).

Nota lateral: Si us agrada la idea de JSX i voleu utilitzar-la a Vue, podeu utilitzar babel-plugin-transform-vue-jsx.

2.4 Framework vs biblioteca

Angular és un marc més que una biblioteca, ja que ofereix opinions fortes sobre la forma en què s'ha d'estructurar l'aplicació i també té més funcionalitat fora de caixa. Angular és una "solució completa": les bateries incloses i a punt per proporcionar-vos un inici agradable. No heu d’analitzar biblioteques, solucions d’encaminament o similars, només podeu començar a treballar.

React i Vue, en canvi, són universalment flexibles. Les seves biblioteques es poden combinar amb tot tipus de paquets (hi ha moltíssims per a Reactar a la nit, però Vue té menys paquets perquè és bastant jove). Amb React, fins i tot podeu canviar la biblioteca en si per alternatives compatibles amb API com Inferno. Tanmateix, amb una gran flexibilitat és una gran responsabilitat: no hi ha normes i orientacions limitades amb React. Cada projecte requereix una decisió sobre la seva arquitectura i les coses poden funcionar amb més facilitat.

Angular, d’altra banda, arriba amb un niu confús d’eines de construcció, placa de seguretat, llençols i embornadors d’hora. Això també és cert per a Reactivar si s’utilitzen kits d’arrencada o plaques de caldera. Naturalment són molt útils, però React funciona fora de caixa, i probablement sigui la manera d'haver-lo après. De vegades, la varietat d’eines necessàries per treballar en un entorn Javascript s’anomena “fatiga Javascript”. Hi ha un article al respecte d'Eric Clemmons, que diu això:

Encara hi ha un munt d’eines instal·lades, que no estàs acostumat a l’hora de començar amb el marc. Es generen, però probablement molts desenvolupadors no ho entenen, què passa sota la caputxa, o bé triguen molt a fer-ho.

Vue sembla ser el més net i lleuger dels tres marcs. GitLab té una publicació al bloc sobre la seva decisió sobre Vue.js (octubre de 2016):

Vue.js ofereix el perfecte balanç de què farà per tu i del que necessites fer tu mateix (...) Vue.js sempre està a l’abast, una xarxa de seguretat robusta però flexible preparada per ajudar-te a mantenir la programació eficient i el vostre patiment causat per DOM al mínim.

Els agrada la senzillesa i la facilitat d’ús: el codi font és molt llegible i no cal documentació ni biblioteques externes. Tot és molt senzill. Vue.js "tampoc no suposa grans supòsits sobre res". També hi ha un podcast sobre la decisió de GitLab.

Pixeljets, un altre bloc sobre un canvi cap a Vue. React "va ser un gran pas endavant per al món de JS en termes de consciència de l'estat i va mostrar a moltes persones la programació funcional real d'una manera pràctica bona". Un dels grans avantatges de React vs. Vue és el problema de dividir components en components més petits a causa de les restriccions de JSX. Aquí teniu una cita de l’article:

Per a mi i el meu equip, la llegibilitat del codi és important, però és molt important que escriure codi sigui divertit. No és estrany crear 6 components quan implementeu un widget de calculadora senzill. En molts casos, també és dolent quant a manteniment, modificacions o aplicació de revisió visual a algun widget, ja que cal saltar per diversos fitxers / funcions i comprovar per separat cada petit tros d’HTML. Un cop més, no suggereixo escriure monòlits: suggereixo utilitzar components en lloc de microcomponents per al desenvolupament del dia a dia.

Hi ha debats interessants sobre la publicació del bloc sobre les notícies de Hacker i Reddit; hi ha arguments de discrepants i altres partidaris de Vue.

2.5 Gestió de l'estat i enquadernació de dades

La creació d'UI és difícil, perquè hi ha estats a tot arreu; el canvi de dades amb el pas del temps comporta una complexitat. Els fluxos de treball d’estat definits són una gran ajuda quan les aplicacions creixen i es complexen. Per a aplicacions limitades, probablement això sigui excessiu i una cosa com Vanilla JS seria suficient.

Com funciona? Els components descriuen la interfície d'interès en qualsevol moment. Quan canvien les dades, el marc torna a presentar tot el component de la interfície d'usuari (les dades mostrades sempre estan actualitzades). Podem anomenar aquest concepte "interfície d'usuari com a funció".

React sovint funciona lligat amb Redux. Redux es descriu en tres principis fonamentals:

  • Font única de veritat
  • L’estat és de només lectura
  • Els canvis es realitzen amb funcions pures

Dit d’una altra manera: l’estat de l’aplicació completa s’emmagatzema en un arbre d’objectes dins d’un mateix magatzem. Això ajuda a depurar l’aplicació i algunes funcionalitats són més fàcils d’implementar. L’estat és de només lectura i només es pot canviar mitjançant accions per evitar les condicions de la cursa (també ajuda a la depuració). Els reductors s’escriuen per especificar com es poden transformar els estats mitjançant accions.

La majoria dels tutorials i plaques de calefacció tenen Redux ja integrat, però podeu utilitzar Reactar sense que això sigui possible (i és possible que no necessiteu mai Redux en el vostre projecte). Redux introdueix restriccions de complexitat i força fortes al vostre codi. Si apreneu React, haureu de pensar en aprendre React abans de dirigir-vos a Redux. Definitivament, heu de llegir “Pot ser que no necessiteu Redux” de Dan Abramov.

Alguns desenvolupadors suggereixen l’ús de Mobx en lloc de Redux. Podeu pensar-ho com un "Redux automàtic", cosa que fa que les coses siguin molt més fàcils d’utilitzar i d’entendre d’entrada. Si voleu fer una ullada, haureu de començar amb la introducció. També podeu llegir aquesta útil comparació entre Redux i MobX de Robin. El mateix autor també ofereix informació sobre com passar de Redux a MobX. Aquesta llista és útil si voleu consultar altres biblioteques Flux. I si proveniu d’un món MVC, voldreu llegir l’article “Pensar en Redux (quan tot el que coneixeu és MVC)” de Mikhail Levkovsky.

Vue pot fer servir Redux, però Vuex ofereix la seva solució.

Una gran diferència entre React i Angular és la unió unidireccional i bidireccional. L'enllaç bidireccional d'Angular canvia l'estat del model quan s'actualitza l'element UI (per exemple, una entrada d'usuari). Reaccionar només fa un sol camí: actualitza primer el model i, a continuació, mostra l'element UI. El mètode angular és més net del codi i més fàcil per a desenvolupar el desenvolupador. La manera de reaccionar es tradueix en una visió general de les dades, perquè les dades només flueixen en una direcció (cosa que facilita la depuració).

Els dos conceptes hi ha pros i contres. Heu d’entendre els conceptes i determinar si això influeix en la vostra decisió marc. L'article "Enllaç amb dades de dues formes: Angular 2 i React" i aquesta pregunta de Stackoverflow ofereixen una bona explicació. Aquí podeu trobar alguns exemples de codis interactius (de 3 anys, només per a Angular 1 i React). Per últim, però no per això menys important, Vue admet tant la unió d'unió com la de dos enllaços (de manera predeterminada).

Hi ha un llarg article sobre diferents tipus d’estats i la gestió de l’estat en aplicacions angulars (de Victor Savkin) si voleu llegir més.

2.6 Altres conceptes de programació

Angular inclou la injecció de dependència, un patró en el qual un objecte subministra les dependències (un servei) a un altre objecte (un client). Això comporta una flexibilitat i un codi més nets. L’article “Comprendre la injecció de dependència” explica aquest concepte amb més detall.

El patró model-view-controller (MVC) divideix un projecte en tres components: model, vista i controlador. Angular com a marc MVC té MVC fora de caixa. Reactiu només té la V: has de resoldre els M i C pel teu compte.

2.7 Flexibilitat i disminució dels microservicis

Podeu treballar amb React o Vue simplement afegint la biblioteca Javascript al codi font. Això no és possible amb Angular a causa del seu ús de TypeScript.

Ara estem avançant més cap als microserveis i microapps. React i Vue us proporciona més control per dimensionar una aplicació seleccionant només les coses realment necessàries. Ofereixen més flexibilitat per passar d’un SPA a microserveis mitjançant parts d’una aplicació anterior. El treball angular és el més adequat per a SPA, ja que probablement és massa inflat per ser usat per a microserveis.

Com Cory House assenyala:

JavaScript es mou ràpidament i React us permet canviar petites peces de la vostra aplicació per a millors biblioteques en lloc d’esperar i esperar que el vostre quadre innovi. La filosofia d’eines petites, composables i d’un sol ús, no passa mai de moda.

Algunes persones utilitzen React per a llocs web que no siguin SPA (per exemple, per a formes complexes o assistents). Fins i tot Facebook utilitza Reactar - no per a la pàgina principal, sinó per a pàgines i funcions específiques.

2,8 Mida i rendiment

Hi ha una inclinació de totes les funcionalitats: el marc angular està força inflat. La mida del fitxer gzipped és de 143 k, en comparació amb 23 K per a Vue i 43 k per React.

React i Vue tenen un DOM virtual que suposa millorar el rendiment. Si us interessa això, podreu llegir les diferències entre DOM i DOM virtual, així com els beneficis reals del DOM virtual en react.js. A més, un dels autors del Virtual-DOM respon a una pregunta relacionada amb el rendiment de Stackoverflow.

Per comprovar el rendiment, vaig fer una ullada a la gran referència de js-framework-benchmark. Podeu descarregar-lo o executar-lo o consultar la taula de resultats interactiva. Abans de comprovar els resultats, heu de saber que els marcs s’estan enganyant a punts de referència: una comprovació del rendiment no s’ha d’utilitzar per prendre decisions.

El rendiment d'Angular, React and VueAssignació de memòria en MB

Per resumir: Vue té un gran rendiment i l’assignació de memòria més profunda, però tots aquests marcs són realment força propers els altres en comparació amb els fotogrames especialment lents o ràpids (com Inferno). Una vegada més: els paràmetres de rendiment només s’han de considerar com a nota lateral, no com a veredicte.

2.9 Prova

Facebook utilitza Jest per provar el seu codi React. Aquí teniu una comparació entre Jest i Mocha. Hi ha un article sobre com utilitzar l'enzim amb Mocha. Enzyme és una utilitat de prova de JavaScript usada a Airbnb (conjuntament amb Jest, Karma i altres corredors de proves). Si voleu llegir més, hi ha alguns articles anteriors sobre proves a React (aquí i aquí).

Després hi ha Jasmine com a marc de proves a Angular 2. Hi ha un article en un article d’Eric Elliott que diu que Jasmine “dóna com a resultat milions de maneres d’escriure proves i afirmacions, necessitant llegir-les amb cura per entendre el que fa”. La producció també és molt inflat i laboriosa per llegir. Hi ha alguns articles informatius sobre la integració d’Angular 2 amb Karma i Mocha. Aquí teniu un vídeo antic (del 2015) sobre les estratègies de prova amb Angular 2.

Vue no té orientació sobre les proves, però Evan va escriure en la seva vista prèvia del 2017 que l'equip pensa treballar-hi. Recomanen utilitzar Karma. Vue funciona juntament amb Jest, i també hi ha avoriaz com a utilitat de prova.

2.10 Aplicacions natives i universals

Les aplicacions universals també introdueixen aplicacions a la web, a l'escriptori i al món de les aplicacions natives.

React i Angular donen suport al desenvolupament natiu. Angular té NativeScript (recolzat per Telerik) per a aplicacions natives i Ionic Framework per a aplicacions híbrides. Amb React, podeu consultar el react-native-renderer per crear aplicacions iOS i Android de format multiplicat, o bé reaccionar per a aplicacions natives. Hi ha moltes aplicacions (inclosa Facebook; comproveu-ne més a Showcase) amb natives per reaccionar.

Els frameworks Javascript mostren pàgines al client. Això és dolent per al rendiment percebut, l’experiència global de l’usuari i el SEO. La representació prèvia del costat del servidor és un avantatge. Els tres marcs disposen de biblioteques per trobar ajuda per aconseguir-ho. A React hi ha next.js, Vue té nuxt.js, i Angular a ... Angular Universal.

2.11 Corba d’aprenentatge

Definitivament, hi ha una corba d'aprenentatge abrupta per a Angular. Disposa de documentació completa, però de vegades es pot sentir frustrat amb les coses perquè són més difícils del que semblen. Fins i tot quan tingueu una comprensió profunda de Javascript, heu d’aprendre què passa sota la caputxa del marc. La configuració és màgica al principi i ofereix molts paquets i codi inclosos. Es pot considerar negatiu perquè hi ha un gran ecosistema preexistent que cal aprendre amb el pas del temps. D’altra banda, podria ser bo en una situació determinada perquè ja s’han pres moltes decisions. Amb React, probablement haureu de prendre moltes decisions sobre la imposició de biblioteques de tercers. Hi ha 16 paquets de flux diferents que la gestió de l'estat pot triar a Reactar només.

Vue és bastant fàcil d'aprendre. Les empreses canvien a Vue perquè sembla que és molt més fàcil per a desenvolupadors joves. Aquí podeu llegir sobre algú que descriu el pas del seu equip des d'Angular a Vue. Segons un altre usuari, l'aplicació React de la seva empresa era tan complexa que un nou desenvolupador no podia estar al dia del codi. Amb Vue, la bretxa entre desenvolupadors juvenils i sèniors es redueix i poden col·laborar amb més facilitat i amb menys errors, problemes i temps per desenvolupar-se.

Hi ha qui afirma que les coses que han fet a React haurien estat escrites millor a Vue. Si no ets un desenvolupador de Javascript inexpert, o si ha treballat principalment amb jQuery durant la darrera dècada, hauria de pensar en utilitzar Vue. El canvi de paradigma és més acusat quan es passa a React. Vue s’assembla més a Javascript senzill, a la vegada que introdueix algunes idees noves: components, un model basat en esdeveniments i un flux de dades d’un sol sentit. També té una petita petjada.

Mentrestant, Angular i React tenen la seva pròpia manera de fer les coses. Pot ser que us vagi a la vostra manera perquè heu d’ajustar les vostres pràctiques perquè les coses funcionin de la seva manera. Això pot suposar un perjudici perquè és menys flexible i hi ha una corba d'aprenentatge més forta. També pot ser un benefici perquè et veus obligat a aprendre els conceptes adequats mentre aprens la tecnologia. Amb Vue, podeu fer les coses a la moda antiga. Això pot ser més fàcil al començament, però pot arribar a ser un problema a llarg termini si les coses no es fan correctament.

Quan es tracta de depurar, és un avantatge que React i Vue tinguin menys màgia. La cerca d’errors és més fàcil perquè hi ha menys llocs on mirar i les traces de la pila tenen millors distincions entre el propi codi i el de les biblioteques. Les persones que treballen amb React denuncien que mai han de llegir el codi font de la biblioteca. No obstant això, quan depureu de l'aplicació Angular, sovint heu de depurar les internes d'Angular per comprendre el model subjacent. Pel costat brillant, se suposa que els missatges d'error són més clars i informatius a partir de Angular 4.

2.12 Angular, Reacting and Vue sota la caputxa

Voleu consultar el codi font? Voleu veure com se senten les coses?

Probablement voldreu consultar primer els dipòsits de Github: Reactar (github.com/facebook/react), Angular (github.com/angular/angular) i Vue (github.com/vuejs/vue)

Com es veu la sintaxi? ValueCoders compara la sintaxi de Angular, React i Vue.

També és bo veure les coses en producció, juntament amb el codi font subjacent. TodoMVC enumera desenes de la mateixa aplicació Todo, escrita amb diferents marcs Javascript. Podeu comparar les solucions Angular, Reactand Vue. RealWorld crea una aplicació del món real (un clon mitjà) i tenen a punt les solucions per a Angular (4+) i React (amb Redux). Vue és un treball en curs.

També hi ha algunes aplicacions del món real. Aquí es mostren solucions per a Reactivar:

  • Feu (una bonica aplicació de gestió de notes del món real construïda amb React & Redux)
  • sound-redux (un client de Soundcloud construït amb React & Redux)
  • Brainfock (una solució de gestió de projectes i equips construïda amb React)
  • reaccionar-hn i reaccionar-les notícies (clones de notícies de hackers)
  • react-native-whatsapp-ui + un tutorial (clon de Whatsapp amb react-native)
  • Phoenix-Trello (clon de Trello)
  • slack-clone + un altre tutorial (clics de Slack)

Hi ha algunes aplicacions per a Angular:

  • angular2-hn & hn-ng2 (clons de Hacker News + un bon tutorial sobre com crear-ne un altre per Ashwin Sureshkumar)
  • Redux-and-angular-2 (un clon de Twitter)

També hi ha solucions per a Vue:

  • Vista-hackernews-2.0 i Loopa (clones de Hacker News)
  • vue-soundcloud (una demostració de Soundcloud)

Conclusió

Decidiu ara un marc

React, Angular i Vue són molt macos i cap d'ells se situa clarament per sobre dels altres. Confia en la sensació intestinal. Aquesta última part de cinisme entretingut pot ajudar a la seva decisió:

El petit secret brut és que la majoria del “desenvolupament modern de JavaScript” no té res a veure amb la creació de llocs web realment, sinó que construeixen paquets que poden ser utilitzats per persones que construeixen biblioteques que poden ser utilitzades per gent que construeix frameworks que persones que escriuen tutorials i imparteixen cursos. No puc estar segur que ningú construeixi alguna cosa perquè interactuïn els usuaris reals.

És una exageració, per descomptat, però hi ha probablement un gra de veritat. Sí, hi ha molta broma a l’ecosistema de Javascript. Probablement trobareu moltes altres alternatives atractives durant la vostra cerca: proveu de no deixar-vos cegar pel marc més brillant i brillant.

Què he de triar?

Si treballes a Google: Angular

Si t'encanta TypeScript: Angular (o Reactiva)

Si us encanta la programació (OOP) orientada a objectes: Angular

Si necessiteu orientació, estructura i una mà útil: Angular

Si treballes a Facebook: reacciona

Si us agrada la flexibilitat: Reaccioneu

Si t’encanten els grans ecosistemes: reacciona

Si us agrada triar entre desenes de paquets: Reacciona

Si t'encanta JS i el "tot-és-Javascript-enfocament": reacciona

Si us agrada el codi net: Vue

Si voleu la corba d’aprenentatge més fàcil: Vue

Si voleu el marc més lleuger: Vue

Si voleu separar les preocupacions en un sol fitxer: Vue

Si treballeu sol o si teniu un equip petit: Vue (o React)

Si la vostra aplicació tendeix a ser molt gran: angular (o reacciona)

Si voleu crear una aplicació amb native-react: React

Si voleu tenir molts desenvolupadors a la piscina: Angular o React

Si treballes amb dissenyadors i necessites fitxers HTML nets: Angular o Vue

Si t'agrada Vue, però tens por de l'ecosistema limitat: reacciona

Si no podeu decidir-ho, apreneu primer a Reactivar, després a Vue, a continuació Angular.

https://pixxel.ml/angularjs-vs-reactjs-vs-vuejs-comparison/