Hay tres cuadros para la construcción de aplicaciones web que escuchó cada desarrollador frontal: React, Vue.js y Angular. React es una biblioteca de UI, Angular es un marco frontal completo, mientras que Vue.js es un marco progresivo. Se pueden usar casi indistintamente para construir aplicaciones frontales, pero no son 100% iguales, por lo que es lógico compararlas y comprender sus diferencias. Cada cuadro se basa en componentes y permite la rápida creación de funciones de IU. Sin embargo, todos tienen una estructura y arquitectura diferentes, por lo que analizaremos sus diferencias arquitectónicas para comprender la filosofía detrás de ellos.
Architecture React React no impone una estructura de proyecto específica y, como puede ver en el ejemplo oficial “Hello World” a continuación, puede comenzar a usar React con solo unas pocas líneas de código. Reactdom.render (

hola, mundo!

,
Document.gementById (‘root’)
);
React puede usarse como una biblioteca de UI para jugar elementos, sin imponer una estructura de proyecto específica y, por lo tanto, no es estrictamente un marco. Los elementos React son los bloques de construcción más pequeños de aplicaciones React. Son más fuertes que los elementos DOM, porque React Dom asegura que los actualicen de manera efectiva cuando algo cambia.
Los componentes son bloques de construcción más grandes que definen las piezas independientes y reutilizables que se utilizarán en toda la aplicación. Acepta entradas llamadas accesorios y produce elementos que luego se muestran al usuario. React se basa en JavaScript, pero se combina en gran medida con JSX (JavaScript XML), una extensión de sintaxis que le permite crear elementos que contienen HTML y JavaScript. Lo que sea que cree con JSX también se puede crear con la API React JavaScript, pero la mayoría de los desarrolladores prefieren JSX porque es más intuitivo. Vue Vue.js Basic Library se centra solo en la capa de vista. Se llama un marco progresivo porque puede expandir su funcionalidad con paquetes oficiales y de terceros, como el enrutador VUE o VUEX, para convertirlo en un marco real. Aunque Vue no está estrictamente asociado con el MVVM (Model-View-V-Vis ), el diseño el suyo fue parcialmente inspirado por él. Con Vue, trabajará especialmente en la capa ViewModel, para garantizar que los datos de la aplicación se procesen de una manera que permita que el cuadro recupere una vista actualizada. La sintaxis de la plantilla Vue le permite crear componentes de vista y combinar HTML familiar con directivas y características especiales. Se prefiere esta sintaxis de plantilla, incluso si se aceptan JavaScript y JSX gruesas. Los componentes en VUE son pequeños, autónomos y se pueden reutilizar durante toda la aplicación. Los componentes de archivo únicos (SFC) con la extensión .Vue contienen HTML, CSS y JavaScript para que todo el código relevante se pueda encontrar en un solo archivo.
Los SFC son la forma recomendada de organizar el código en proyectos Vue.js, especialmente en el más grande. Se necesitan herramientas como Webpack o Browserify para trasplicar los SFC a un código funcional de JavaScript. Angular en este artículo, discuto sobre Angular 2 y no sobre la primera versión del marco que ahora se conoce como AngularJS. AngularJS, el marco original, es un marco MVC (modelo-visión-controlador)). Pero en Angular 2, no existe una asociación estricta con los modelos MV*, ya que se basa en componentes. Los proyectos angulares están estructurados en módulos, componentes y servicios. Cada aplicación angular tiene al menos un componente raíz y un módulo raíz. Cada componente en el angular contiene una plantilla, una clase que define la lógica de la aplicación y los metadatos (decoradores). Los metadatos para un componente le dicen al angular dónde encontrar los bloques que necesita para crear y presentar su punto de vista. Las plantillas angulares se escriben en el HTML, pero también pueden incluir la sintaxis de la plantilla angular con directivas especiales para eliminar datos reactivos y jugar más elementos, entre otros. Los servicios angulares son utilizados por componentes para delegar tareas de la lógica empresarial, como tomar datos o validar entradas. Son una parte distinta de las aplicaciones angulares. Aunque el Angular no requiere su uso, se recomienda altamente estructurar aplicaciones como un conjunto de servicios distintos que se pueden reutilizar.
Angular está integrado en TypeScript, por lo que se recomienda su uso para lograr la experiencia más simple, pero JavaScript también es aceptado. Popularity React React es uno de los proyectos JavaScript más populares con 160,000 estrellas en GitHub. Es desarrollado y mantenido por Facebook y se usa internamente en muchos de sus proyectos. Además, alimenta más de 2 millones de sitios web, según las estadísticas de uso integradas. Vue de los tres cuadros, Vue tiene la mayoría de las estrellas en Github, con 176,000 estrellas. El proyecto está desarrollado y dirigido por el ex Googler Evan You. Es un proyecto muy poderoso, independiente en la comunidad de código abierto y es utilizado por más de 1 millón de sitios web, según Buildwith. Angular Ungle es desarrollado por Google, pero sorprendentemente, no se usa en algunos de sus productos emblemáticos. como búsqueda o youtube. A menudo se usa en proyectos empresariales y alimenta a más de 97,000 sitios web basados ​​en datos construidos. Es el menos marcado de los tres cuadros, con 68,000 estrellas en Github. Sin embargo, en la transición de Angular 1 a Angular 2, crearon un depósito completamente nuevo en lugar de continuar el proyecto AngularJS, que también tiene 59,000 estrellas. Los paquetes de código abierto del ecosistema le ahorran un tiempo precioso al desarrollar aplicaciones. No solo eso, sino que a menudo son mejores que los componentes y paquetes personalizados porque se prueban en la batalla.
Es importante observar la disponibilidad de componentes listos para usar, temas y otras herramientas que pueden ayudarlo a crear nuevas funciones más fácilmente. Reaccionar muchas aplicaciones frontales se basa en la gestión de estado global para almacenar información, como quién está conectado y otras configuraciones de usuario. El proyecto más popular para JavaScript Status Management es Rodux. La mayoría de los desarrolladores usan los enlaces REACT oficiales para Redux, que mantienen el equipo de Rodux. Debido a la reaccionamiento de popularidad, encontrar los componentes de entrada y los elementos listos para usar es extremadamente fácil. Todos están solo en una búsqueda en Google o GitHub. El React-Native React también es, lo que le permite crear aplicaciones nativas de iOS y Android a partir de una sola base de bacalao en React. Por lo tanto, React puede ser una excelente opción para crear aplicaciones móviles, también utilizando tecnologías web. React es parte de la pila Mern, que contiene MongoDB, ExpressJS, React y NodeJs. Lo maravilloso en esta combinación es que un solo idioma, JavaScript, alimenta toda la aplicación. Vue, incluso si Redux se puede usar en Vue, no hay enlaces oficiales. Pero eso no debería preocuparse, porque Vuex es la biblioteca oficial de gestión estatal creada especialmente para aplicaciones VUE. Además del hecho de que se integra muy bien con Vue, es fácil solucionar problemas con las herramientas de desarrolladores VUE.
En los primeros días de Vue, fue más difícil encontrar listo para su uso. Debido a que la comunidad ha crecido, hay una amplia gama de componentes de entrada y elementos avanzados que puede usar para acelerar su desarrollo. Para el desarrollo de aplicaciones móviles, hay un proyecto de desarrollo llamado WEEX. Weex es desarrollado y utilizado por Alibaba, pero no es tan maduro y poderoso como un reaccionamiento nativo. Además, debido a que el proyecto se desarrolla y se usa más en China, es más difícil encontrar documentación y soluciones a problemas en inglés. Vue se integra bien con Laravel y, por lo tanto, a menudo se usan juntos. Laravel ofrece andamios completos de JavaScript y CSS para permitir el uso de VUE en nuevos proyectos. Angular para el manejo del estado en Angular, puede usar el proyecto NGRX. Fue inspirado en Redux, pero se crea especialmente para el angular. Al igual que con Vue y React, hay muchos componentes listos para usar que puede importar en sus proyectos, lo que es ligeramente diferente en Angular es que hay muchos componentes oficiales en el proyecto Angular de material. Este es un proyecto oficial de Google que ofrece componentes de material de aplicación angular. Puede crear aplicaciones móviles multiplataformas en Angular usando NativeScript. También acepta Vue, pero el soporte angular es más maduro. Angular es parte de la media de la pila bien conocida que combina Angular con MongoDB, ExpressJS y NodeJs. Similar a Mern Stack, se basa completamente en JavaScript tanto para front-end como para back-end. Las tecnologías comunes Angular, React y Vue se pueden utilizar para desarrollar aplicaciones web progresivas, también conocidas como PWA.
PWA no son aplicaciones móviles, sino aplicaciones web que los usuarios de teléfonos inteligentes pueden agregar como accesos directos en su pantalla de inicio y ofrecer una apariencia y sensación similares a las aplicaciones móviles nativas. También puede encontrar plantillas premium y aplicaciones prefabricadas para cada cuadro, pero Angular y React tienen más opciones premium que Vue. Rendimiento Al elegir un marco o biblioteca, también debe pensar en el rendimiento. En muchos casos, no tendrá que preocuparse por el rendimiento, especialmente si construye un pequeño proyecto. Sin embargo, cuanto más aumente un proyecto en extensión y complejidad, el rendimiento puede (y) convertirse en una preocupación. Es importante tener en cuenta que la calidad del desarrollo y el respeto por las mejores prácticas cuando se trata del rendimiento web es más importante que elegir el marco. Pero debido a que hay algunas métricas de rendimiento y diferencias, las analizaré y explicaré cómo cada uno podría afectar sus esfuerzos de desarrollo. Benchmark de marco JS: Angular vs React vs Vue Resultados JS Framework Benchmark muestra que todos funcionan bastante bien en la mayoría de los puntos de referencia, como crear o agregar líneas en una tabla. Después de ver anteriormente, Vue es considerablemente más lento que angular y reaccionar a filas seleccionadas . Por otro lado, Angular y React no son muy efectivos para cambiar las filas.
Estas son las únicas diferencias sustanciales entre los puntos de referencia y, en la mayoría de los casos, no producirán resultados visibles.Debido a que la selección de filas es una funcionalidad más común que cambiar las filas, diría que este punto de referencia coloca en el tercer lugar detrás del angular y reaccionan, lo que divide la posición anterior.Cuando se trata de la memoria y el tiempo de inicio, Reaccion y Vue tienen muy buenos resultados, pero Angular es un poco más lento.Angular puede tomar 150 ms para iniciar un script básico y requerir más memoria para ejecutarse.PERF Track: Angular vs React vs Vue PERF Track de Google Chrome Labs muestra datos de producción de miles de sitios web.Estas estadísticas se ven afectadas por muchas otras cosas y no solo por el marco de elección, sino para mirar los números.
La primera pintura satisfactoria Los sitios web Vue y React son de rango anterior para esta medición, en comparación con el Angular, que puede tardar más en comenzar y presentar el contenido del usuario. La pintura de contenido angular más grande también es la más lenta de los tres cuadros para reproducir una página completa, solo el 27 por ciento de los sitios web angulares obtienen puntajes en el rango aceptable. Retraso a la primera entrada para los tres cuadros, más del 80% de los sitios web están en el rango aceptable para el primer retraso de entrada, lo que muestra cuánto es hasta que el usuario pueda interactuar con la página. BYTEI JavaScript Las aplicaciones más livianas son, con mucho, las desarrolladas con VUE, con el 68% de las aplicaciones VUE que cargan menos de 1 MB de JavaScript. Por otro lado, las aplicaciones Angular y React tienden a tener una dimensión de código más grande. Cómo usar estos valores Puede ver una tendencia de estas figuras, pero no debe apresurarse para sacar conclusiones. Para el último dígito, por ejemplo, una explicación podría ser que Vue se usa para desarrollar aplicaciones más ligeras, mientras que Angular se usa para proyectos más grandes. Las estadísticas pueden ayudarlo a tomar una buena decisión, pero no puede usarlas para demostrar que un marco es más rápido o mejor que el otro. Características avanzadas Para aplicaciones más avanzadas, el marco frontal debería poder realizar algunas tareas que mejoren el rendimiento y pueden escalar mejor. Dos tecnologías clave son la representación en el servidor (SSR) y la virtualización. React React acepta la fila en el servidor con el paquete oficial ReactDomServer.
Para la virtualización, puede usar una herramienta popular de tercera parte llamada React Virtualized. Vue jugando en el servidor se acepta en Vue y con el paquete oficial de SSR. Además, también puede usar el marco Next.js, que se basa en Vue y acepta SSR. Las opciones de virtualización en VUE no son tan fuertes, desafortunadamente. En mi opinión, Vue Virtual Scroll List es la mejor solución para el desfile virtual, pero es poco con problemas y no es tan estable como las opciones para reaccionar y angular. Angular Angular tiene el paquete Angular Universal oficial para SSR y un componente oficial para el desarrollo virtual y la reproducción eficiente de grandes listas. Curva de aprendizaje ¿Qué tan fácil es aprender cada uno de estos cuadros? Para responder a esta pregunta, debemos observar la complejidad de cada cuadro y los conceptos que introducen. El uso más básico en su caso de uso es React, React es el menos complejo entre los tres cuadros. Esto se debe a que solo tiene que importar la biblioteca, entonces puede comenzar a escribir la aplicación React con algunas líneas de código. Pero, aparte del ejemplo de Hello World, la mayoría de las aplicaciones React se basan en componentes y no solo juegan algunos elementos en la página. Una cosa que algunos desarrolladores consideran extraño o difícil de reaccionar es que el aprendizaje JSX es una calle de una sola vía. También puede usar JavaScript bruto, pero debido a que la mayoría de los desarrolladores reaccionan el uso de JSX, su aprendizaje es casi inevitable. Esto es lo principal que puede hacer la curva de aprendizaje de React, pero además, es una biblioteca fácil de aprender para los desarrolladores que conocen a JavaScript y entienden los conceptos de desarrollo web.
Vue Vue es un poco más complejo de configurar que reaccionar. Puede usarlo como una biblioteca para definir los componentes que puede usar en HTML, pero de manera similar a React, no es así como se construyen la mayoría de los proyectos. La mayoría de los proyectos VUE tendrán un componente raíz llamado App.vue y varios componentes secundarios para mostrar cosas diferentes. Cuando se trata de sintaxis, lo único nuevo que tiene que aprender es la sintaxis de la plantilla VUE, que es muy fácil de entender si conoce HTML. Las directivas básicas, como V-IF y V-For, para la representación y reproducción condicionales, son fáciles de entender incluso para principiantes. Además, los componentes de archivo únicos del VUE conservan todo el código frontal en un solo lugar, facilitando la organización de nuevos proyectos. Vue es el más fácil de aprender, en mi opinión, debido a la simplicidad y la sintaxis intuitiva. Angular Angular tiene la estructura del proyecto más compleja entre los tres y, debido a que es un marco frontal completo, se basa en varios conceptos. Además de los componentes, Angular acepta módulos y servicios. Espere escribir y diseñar su base de código de manera específica que haga que su proyecto sea más fácil de mantener cuando se extienda. En cuanto a la sintaxis, debido a que Angular funciona mejor con TypeScript, es importante saber TypeScript al construir un proyecto angular. Al igual que con Vue, también debe estar familiarizado con la sintaxis similar de HTML, por lo que puede comenzar a codificar nuevas funciones angulares. En mi opinión, Angular es el más difícil de aprender para un desarrollador promedio, porque es más complejo y se basa en TypeScript.

Los futuros pronostican muchos proyectos y marcos de código abierto se desvanecen en el olvido y no se tocan. ¿Deberías preocuparte por alguno de los marcos de los que estamos hablando aquí? Aunque no podemos anticipar completamente lo que sucederá, la actividad de desarrollo continuo es un buen indicador de la salud de estos proyectos. La popularidad y el crecimiento también son valores importantes para predecir la longevidad de un proyecto, así que echemos un vistazo a cada cuadro. React V17.0 Reacted se ha lanzado, pero sorprendentemente, no incluye nuevas características para los desarrolladores. El cambio principal es que esta nueva versión facilita la actualización React en sí. Puede actualizar solo unas pocas partes del React de la versión más antigua a la más reciente, sin tener que actualizar todo el proyecto. Si su aplicación se basa en funciones que cambian o se deprecian con la nueva versión, puede mantener la versión anterior para mantener esta funcionalidad. Esta actualización hace que React sea una excelente elección a largo plazo, porque hace que sea más fácil mantenerse al día con las nuevas versiones. React aumentó en un 44% en comparación con el año pasado en descargas semanales de NPM. En cifras absolutas, sigue siendo el más descargado de los tres proyectos. Vue Vue 3 se lanzó en septiembre de 2020 y aborda muchos problemas serios que Vue 2 tiene en grandes proyectos. Presenta la composición API inspirada en los ganchos react y facilita la reutilización de la lógica entre los componentes.

Todo el proyecto se ha reescrito en TypeScript, que mejora el soporte de TypeScript en los nuevos proyectos VUE, al tiempo que hace que el proyecto sea más fácil de mantener. Vue 3 es una actualización muy necesaria y hace que Vue sea más adecuado para proyectos a gran escala. Las descargas semanales de VUE aumentaron en un 87% en comparación con el año pasado, lo que hace que Vue sea el crecimiento más rápido en términos relativos. Si Vue puede mantener esta tasa de crecimiento, entonces ciertamente excederá Angular pronto. Angular Angular introdujo recientemente el compilador de hiedra. Reduce el tiempo del edificio, optimiza los activos, permite pruebas más rápidas y generalmente mejora la experiencia del desarrollador. El equipo Angular lanza actualizaciones importantes varias veces al año, que pueden incluir nuevas funciones o solo llevar el marco a la velocidad con las nuevas versiones del navegador. Angular ha aumentado en aproximadamente un 50% en descargas semanales el año pasado, por lo que sigue siendo un proyecto popular. La conclusión angular, React y Vue están en un desarrollo muy activo. Regularmente lanzan nuevas versiones y mantienen las existentes. Debido a que el nivel de soporte actual es alto en cada caso, puede usar de forma segura cualquiera de estos cuadros. Es importante tener en cuenta que Angular no crece tan rápido como antes, mientras que Vue, incluso si ha comenzado más recientemente, parece crecer mucho.