Benvingut a la sèrie de publicacions tècniques d’Unimedia. Aquesta vegada hem fet una comparació entre Angular i React per als nostres lectors.
Què és Angular?
Angular és un marc de disseny d’aplicacions i una plataforma de desenvolupament per crear aplicacions eficients i sofisticades d’una sola pàgina.
Angular és utilitzat per grans com Google, Upwork, Nike, Sony, General Motors, Forbes, etc.
Lloc del producte aquí: https://angular.io/
Què és React?
Una biblioteca de JavaScript per crear interfícies d’usuari.
React és utilitzat per grans com Facebook, Instagram, Whatsapp, Uber, Netflix, Airbnb, Netflix, etc.
Lloc del producte aquí: https://es.reactjs.org/
Biblioteca
| Una biblioteca és una col·lecció de codis que utilitzareu amb freqüència. Podeu trucar directament al codi si el necessiteu. |
| En poques paraules, si tu fas la crida, és una “Biblioteca”. |
Marc
| Un marc defineix com s’estructurarà la vostra aplicació, decideix quan trucar al codi i pot incloure biblioteques, que s’utilitzaran si cal |
| En poques paraules, si et crida, és un “Marc”. |
Característiques bàsiques:
Característiques
| Manipulació d’IU / DOM |
| Gestió de l’Estat |
| Routing |
| Validació i gestió de formularis |
| Client HTTP |
Angular
 |
|
|
|
|
React
|
 |
 |
|
|
Enllaç de dades:
L’enllaç de dades és una tècnica que uneix les fonts de dades del proveïdor i del consumidor i les sincronitza.
Unidireccional
| Qualsevol canvi en la lògica (dades) del component es reflecteix dins de la IU (visualització). |
| Qualsevol canvi a la interfície d’usuari (vista) es reflecteix dins de la lògica (model) del component. |
Bidireccional
| El canvi en la vista es reflecteix en la lògica del component. |
| El canvi en la lògica del component es reflecteix a la vista. |
Manipulació DOM:
DOM significa “Model d’objectes de document”.
DOM incremental
| El DOM incremental té un DOM virtual i camina per l’arbre per trobar canvis i després muta el DOM virtual i després aplica aquests canvis al DOM real. |
| Aquest enfocament no crea un nou DOM virtual per determinar els canvis. |
| No necessita una empremta tan gran, ja que la memòria només s’assigna per als canvis. |
DOM virtual
| El DOM virtual compara (difereix) un DOM virtual complet nou amb el DOM virtual anterior per als canvis, i després aplica aquests canvis al DOM real. |
| Aquest enfocament crea un nou DOM virtual per determinar els canvis. |
| Té una gran empremta de memòria perquè necessita espai per als canvis que “podrien” passar al DOM virtual. |
Les proves han demostrat que el DOM incremental és prou ràpid per funcionar fins i tot sense un DOM virtual.
Corba d’aprenentatge:
Angular
| Angular té una corba d’aprenentatge més pronunciada en comparació. |
| Els programadors que provenen de llenguatges OOP tradicionals escrits de manera estàtica com C++, C# o Java poden tenir més diversió treballant amb Angular, perquè TypeScript té una sintaxi similar a aquests llenguatges. |
React
| React és una mica més fàcil d’aprendre comparativament. |
| Malgrat que a React, cal aprendre molts paquets de tercers per construir una aplicació complexa (que potser us sembla avorrit) i que la documentació és molt més curta, té una gran qualitat amb tones d’exemples. |
Popularitat:
Mirem Angular vs React pel que fa a les estadístiques dels seus repositoris GitHub per veure quin d’aquests 2 és popular al mercat.
Estadístiques de Github.
| ️️ Vigilants |
| ⭐ Estrelles |
| Forquilles |
| Col·laboradors |
Angular
| 3,2 k |
| 66,6 k |
| 17,7 k |
| 1236 |
React
| 6,7 k |
| 157k |
| 31k |
| 1513 |
Tendències:
A continuació es mostra una comparació del nombre de descàrregues de paquets al llarg del temps
Font: npm trends
Experiència de l’enquestat:
Angular
React
Conclusió:
Aquí a Unimedia , després de crear MVP d’èxit per als clients que utilitzen els dos marcs, la nostra opinió és que,
React és el guanyador en popularitat, més adequat per a projectes petits i mitjans, Angular és un marc més robust i ben dissenyat per a grans projectes.
