El marco de front-end de 2021 es Angular, React y Vue.
React es una biblioteca de interfaz de usuario, Angular es un marco de interfaz de usuario maduro y Vue.js es un marco progresivo.
Se pueden usar casi indistintamente para crear aplicaciones front-end, pero no son 100 iguales, por lo que tiene sentido compararlas y comprender sus diferencias.
Cada marco está basado en componentes y permite la creación rápida de funcionalidades de interfaz de usuario.
Sin embargo, todos tienen estructuras y arquitecturas diferentes, por lo que primero veremos sus diferencias arquitectónicas para comprender las filosofías detrás de ellas.
React no impone una estructura de proyecto específica. Como puede ver en el ejemplo oficial "Hello World" a continuación, solo se necesitan unas pocas líneas de código para comenzar a usar React.
React se puede utilizar como una biblioteca de interfaz de usuario para representar elementos sin imponer una estructura de proyecto específica, por lo que no es un marco estricto.
Los elementos de React son los bloques de construcción más pequeños de las aplicaciones de React. Son más poderosos que los elementos DOM porque React DOM garantiza que se actualicen de manera eficiente cuando se produzcan cambios.
Los componentes son bloques de construcción más grandes que definen piezas independientes y reutilizables que se utilizan en toda una aplicación. Aceptan entradas llamadas accesorios y generan elementos que luego se muestran al usuario.
React está basado en JavaScript, pero se combina principalmente con JSX (JavaScript XML), una extensión de sintaxis que permite crear elementos que contienen HTML y JavaScript.
Cualquier cosa creada usando JSX también se puede crear usando la API React JavaScript, pero la mayoría de los desarrolladores prefieren JSX porque es más intuitivo.
La biblioteca principal de Vue.js solo se centra en la capa de vista. Se denomina marco progresivo porque puede utilizar paquetes oficiales y de terceros como Vue Router o Vuex para ampliar su funcionalidad y convertirlo en un marco real.
Aunque Vue no está estrictamente relacionado con el patrón MVVM (Model-View-ViewModel), su diseño está parcialmente inspirado en él. Con Vue, trabajará principalmente en la capa ViewModel para garantizar que los datos de la aplicación se manejen de una manera que permita que el marco represente vistas actualizadas.
La sintaxis de plantilla de Vue le permite crear componentes de vista y combinar HTML familiar con directivas y funcionalidades especiales. Se prefiere esta sintaxis de plantilla e incluso se admiten JavaScript y JSX sin formato.
Los componentes de Vue son pequeños, independientes y se pueden reutilizar en toda la aplicación. Componente de archivo único (SFC) con extensión. vue contiene HTML, CSS y JavaScript, por lo que todo el código relevante está en un solo archivo.
SFC es la forma recomendada de organizar el código en proyectos Vue.js, especialmente proyectos grandes. Debe utilizar una herramienta como Webpack o Browserify para convertir el SFC en código JavaScript utilizable.
En este artículo, estoy hablando de Angular 2, no de la primera versión del marco ahora conocido como AngularJS.
El framework original AngularJS es un framework MVC (Modelo-Vista-Controlador). Pero en Angular 2 no está estrictamente relacionado con el patrón MV* ya que también está basado en componentes.
Los proyectos en Angular se organizan 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 de Angular contiene una plantilla, una clase que define la lógica de la aplicación y metadatos (decoradores). Los metadatos de un componente le indican a Angular dónde encontrar los bloques de construcción necesarios para crear y representar la vista.
Las plantillas de Angular están escritas en HTML, pero también pueden contener sintaxis de plantilla de Angular con directivas especiales para generar datos reactivos y representar múltiples elementos.
Los componentes utilizan servicios en Angular para delegar tareas de lógica de negocios, como obtener datos o validar entradas. Son partes únicas de las aplicaciones Angular. Aunque Angular no exige su uso, se recomienda encarecidamente crear aplicaciones como un conjunto de diferentes servicios que puedan reutilizarse.
Angular está integrado en TypeScript, por lo que se recomienda para una experiencia más fluida, pero también es compatible con JavaScript puro.
React es uno de los proyectos de JavaScript más populares, con 65.438 600.000 estrellas en GitHub. Es desarrollado y mantenido por Facebook y utilizado en muchos de sus proyectos. Además, según las estadísticas de uso de BuiltWith, admite más de 2 millones de sitios web.
Entre los tres frameworks, Vue tiene la calificación de estrellas más alta en GitHub, con 176k. El proyecto fue desarrollado y dirigido por el ex empleado de Google, You Yuxi. Según BuiltWith, este es un proyecto independiente muy sólido en la comunidad de código abierto, con más de 654,38 millones de sitios web que lo utilizan.
Angular es desarrollado por Google, pero sorprendentemente no se utiliza en algunos de sus productos estrella como la Búsqueda o Youtube. Se utiliza comúnmente en proyectos empresariales y admite más de 97.000 sitios web según los datos de BuiltWith.
Tiene la menor cantidad de estrellas entre los tres frameworks, con 68.000 estrellas en GitHub. Sin embargo, al cambiar de Angular 1 a Angular 2, crearon una base de código completamente nueva en lugar de continuar con el proyecto AngularJS, que también tenía 59k estrellas.
Los paquetes de software de código abierto pueden ahorrarle un tiempo valioso al desarrollar aplicaciones. No solo eso, a menudo son mejores que los componentes y paquetes personalizados porque están probados en batalla.
Es importante comprobar la disponibilidad de componentes, temas y otras herramientas ya preparados que pueden ayudarle a crear nuevas funciones más fácilmente.
Muchas aplicaciones front-end dependen de la administración del estado global para almacenar información como quién inició sesión y otras configuraciones del usuario.
El proyecto de gestión de estado de JavaScript más popular es Redux. La mayoría de los desarrolladores utilizan los enlaces oficiales de React para Redux, que son mantenidos por el equipo de Redux.
Debido a la popularidad de React, es fácil encontrar componentes de entrada y elementos listos para usar. Todos simplemente buscan en Google o GitHub.
El ecosistema React también incluye React Native, que le permite crear aplicaciones nativas para iOS y Android a partir de una única base de código escrita en React. Por lo tanto, React también puede ser una excelente opción para crear aplicaciones móviles utilizando tecnologías web.
React es parte de la pila MERN, que incluye MongoDB, ExpressJS, React y NodeJS. Lo mejor de esta combinación es que un lenguaje, JavaScript, impulsa toda la aplicación.
Aunque Redux se puede utilizar en Vue, no existe un vínculo oficial. Pero esto no debería preocuparle, ya que Vuex es una biblioteca oficial de administración estatal creada específicamente para aplicaciones Vue. Además de estar bien integrado con Vue, también es fácil de depurar utilizando las herramientas de desarrollo de Vue.
En los primeros días de Vue, era difícil encontrar componentes disponibles en el mercado.
A medida que su comunidad crece, puede utilizar una variedad de componentes de entrada y elementos avanzados para acelerar el desarrollo.
Para el desarrollo de aplicaciones móviles, existe un proyecto emergente llamado Weex. Weex es desarrollado y utilizado por Alibaba, pero no es tan maduro y poderoso como React Native. Es más, debido a que este proyecto se desarrolla y utiliza en China, es difícil encontrar documentación y soluciones a los problemas en inglés.
Vue y Laravel se integran bien, por lo que a menudo se usan juntos. Laravel proporciona un andamiaje completo de JavaScript y CSS para respaldar el uso de Vue en nuevos proyectos.
Para la gestión del estado en Angular, puedes utilizar el proyecto NgRx. Está inspirado en Redux, pero creado específicamente para Angular.
Como es el caso de Vue y React, puedes importar muchos componentes ya preparados a tu proyecto. Ligeramente diferente de Angular, Angular Material tiene muchos ingredientes oficiales. Este es un proyecto oficial de Google que proporciona componentes de diseño de materiales para aplicaciones Angular.
Puedes utilizar NativeScript para crear aplicaciones móviles multiplataforma en Angular. También es compatible con Vue, pero el soporte Angular es más maduro.
Angular forma parte del famoso stack MEAN, que combina Angular con MongoDB, ExpressJS y NodeJS. Al igual que la pila MERN, su front-end y back-end dependen completamente de JavaScript.
Angular, React y Vue se pueden utilizar para desarrollar aplicaciones web progresivas, también conocidas como PWA.
PWA no es una aplicación móvil, sino una aplicación web. Los usuarios de teléfonos inteligentes pueden agregarlo como un acceso directo a su pantalla de inicio y brindar una apariencia similar a una aplicación móvil nativa.
También puedes encontrar plantillas avanzadas y aplicaciones prediseñadas para cada framework, pero Angular y React ofrecen opciones más avanzadas que Vue.
Al elegir un framework o biblioteca, también debes considerar el rendimiento.
En muchos casos, no tienes que preocuparte por el rendimiento, especialmente cuando construyes proyectos pequeños. Sin embargo, cuanto mayor sea el alcance y la complejidad del proyecto, el rendimiento se convertirá (y se convertirá) en un problema.
Vale la pena señalar que cuando se trata de rendimiento web, la calidad del desarrollo y seguir las mejores prácticas son más importantes que la elección del marco.
Pero dado que existen algunas métricas de rendimiento y diferencias, las analizaré y explicaré cómo cada métrica afecta sus esfuerzos de desarrollo.
Los resultados de las pruebas comparativas del marco JS muestran que funcionan razonablemente bien en la mayoría de las pruebas comparativas, como crear o agregar filas en una tabla.
Como se mencionó anteriormente, Vue es mucho más lento que Angular y React a la hora de seleccionar filas. Angular y React, por otro lado, son muy ineficientes al intercambiar filas.
Estas son las únicas diferencias sustanciales en los puntos de referencia de renderizado; en la mayoría de los casos no producirán resultados notables. Dado que seleccionar filas es una característica más común que intercambiar filas, diría que este punto de referencia ubica a Vue en tercer lugar, detrás de Angular y React.
En términos de memoria y tiempo de inicio, tanto React como Vue obtienen buenos puntajes, pero Angular es un poco más lento. Angular puede tardar hasta 150 milisegundos en iniciar un script básico y requiere más memoria para ejecutarse.
El seguimiento del rendimiento de Google Chrome Labs muestra datos de producción de miles de sitios web. Estas estadísticas se ven afectadas por muchos otros factores, no sólo por el marco elegido. Miremos los números.
Los sitios web de Vue y React tienen una clasificación más alta en esta métrica en comparación con Angular, que requiere más tiempo para lanzar y presentar contenido al usuario.
Angular es también el más lento de los tres frameworks a la hora de representar páginas completas, con sólo 27 sitios web de Angular con una puntuación dentro del rango aceptable.
Para los tres cuadros, más del 80% de los sitios estaban dentro del rango aceptable para la primera latencia de entrada, lo que muestra cuánto tiempo le toma a un usuario interactuar con una página.
Con diferencia, las aplicaciones más ligeras son las desarrolladas con Vue, con 68 aplicaciones de Vue que cargan menos de 1 MB de JavaScript. Por otro lado, las aplicaciones Angular y React tienden a tener códigos de mayor tamaño.
Puedes ver tendencias en estos números, pero no debes sacar conclusiones precipitadas. Por ejemplo, para la última imagen, se puede explicar que Vue se usa para desarrollar aplicaciones más livianas, mientras que Angular se usa para proyectos más grandes.
Las estadísticas pueden ayudarte a tomar buenas decisiones, pero no puedes usarlas para demostrar que un marco es más rápido o mejor que otro.
Para aplicaciones más avanzadas, el marco de front-end utilizado debería poder realizar algunas tareas que mejoren el rendimiento y escalar mejor.
Dos tecnologías clave son la renderización del lado del servidor (SSR) y la virtualización.
React admite la renderización del lado del servidor utilizando el paquete oficial ReactDOMServer. Para la virtualización, puede utilizar React Virtualized, una popular herramienta de terceros.
Vue también admite renderizado del lado del servidor y paquetes SSR oficiales. Además, puede utilizar el marco Nuxt.js, que está construido en Vue y es compatible con SSR.
Desafortunadamente, las opciones de virtualización en Vue no son tan poderosas. En mi opinión, la lista de desplazamiento virtual de Vue es la mejor solución para el desplazamiento virtual, pero tiene algunos problemas y no es tan estable como las opciones de React y Angular.
Angular tiene el paquete oficial Angular Universal para SSR y componentes oficiales para desplazamiento virtual y renderizado eficiente de listas grandes.
¿Qué tan fácil es aprender estos marcos?
Para responder a esta pregunta, debemos observar la complejidad de cada marco y los conceptos que introduce.
En los casos de uso más básicos, React es el menos complejo de los tres frameworks. Esto se debe a que solo necesita importar la biblioteca y luego puede comenzar a escribir aplicaciones React con solo unas pocas líneas de código.
Pero aparte del ejemplo de Hello World, la mayoría de las aplicaciones React se basan en componentes, en lugar de simplemente representar algunos elementos en la página.
Una cosa que algunos desarrolladores encuentran extraña o difícil acerca de React es que aprender JSX es una calle de sentido único. También puedes usar JavaScript sin formato, pero dado que la mayoría de los desarrolladores de React usan JSX, aprenderlo es casi inevitable.
Este es el factor principal que hace que la curva de aprendizaje de React sea más pronunciada, pero aparte de eso, es una biblioteca simple y fácil de aprender para desarrolladores que conocen JavaScript y entienden los conceptos de desarrollo web.
La configuración de Vue es un poco más complicada que la de React. Puede usarlo como una biblioteca para definir componentes que se pueden usar en todo su HTML, pero al igual que React, no es así como se construyen la mayoría de los proyectos.
La mayoría de los proyectos de Vue tienen un componente raíz llamado App.vue y una serie de subcomponentes que se utilizan para mostrar diversos contenidos.
Hablando de sintaxis, lo único nuevo que necesitas aprender es la sintaxis de la plantilla de Vue, que es fácil de dominar si sabes HTML. Las instrucciones básicas como v-if y v para renderizado condicional y renderizado de listas son fáciles de entender incluso para principiantes.
Además, el componente de archivo único de Vue mantiene todo el código de front-end en un solo lugar, lo que facilita la organización de nuevos proyectos.
En mi opinión, Vue es el más fácil de aprender porque su sintaxis es sencilla e intuitiva.
La estructura del proyecto de Angular es la más compleja de las tres. Dado que es un marco de front-end maduro, se basa en más conceptos.
Además de componentes, Angular también admite módulos y servicios. Espera que escriba y diseñe su código base de una manera específica, haciendo que su proyecto sea más fácil de mantener a medida que escala.
En cuanto a la sintaxis, es importante comprender TypeScript al crear proyectos de Angular, ya que Angular se utiliza mejor con TypeScript.
Al igual que Vue, también debes familiarizarte con la sintaxis similar a HTML para poder comenzar a escribir nuevas funciones de interfaz de usuario con Angular.
En mi opinión, Angular es el más difícil de aprender para el desarrollador promedio porque es más complejo y depende de TypeScript.
Muchos proyectos y marcos de código abierto se olvidan gradualmente y a nadie le importan. ¿Debería preocuparse por alguno de los marcos que analizamos aquí?
Si bien no podemos predecir completamente lo que sucederá, el trabajo de desarrollo en curso es una buena indicación de la salud de estos proyectos. La popularidad y el crecimiento también son indicadores importantes para predecir la longevidad del proyecto, así que echemos un vistazo a cada marco.
Se ha lanzado React v17.0, pero, sorprendentemente, no proporciona ninguna característica nueva para los desarrolladores.
El principal cambio es que esta nueva versión facilita la actualización del propio React. Puede actualizar partes de React de una versión anterior a una nueva sin actualizar todo el proyecto.
Si su aplicación depende de una característica que cambia o queda obsoleta en una nueva versión, puede conservar la versión anterior para que la característica siga funcionando. Esta actualización convierte a React en una buena opción a largo plazo, ya que facilita mantenerse al día con las nuevas versiones.
Las descargas semanales de npm de React han aumentado en 44 desde el año pasado. En términos absolutos, sigue siendo el más descargado de los tres proyectos.
Vue 3 se lanzó en septiembre de 2020, resolviendo muchos problemas graves con Vue 2 en proyectos grandes. Introduce una API de composición inspirada en React Hooks, que facilita la reutilización de la lógica entre componentes.
Todo el proyecto se reescribió en TypeScript, lo que mejora la compatibilidad con TypeScript en el nuevo proyecto Vue y hace que el proyecto sea más fácil de mantener.
Vue 3 es una actualización muy necesaria que hace que Vue sea más adecuado para proyectos a gran escala.
Las descargas semanales de Vue han crecido un 87% desde el año pasado, lo que convierte a Vue en el framework de más rápido crecimiento. Si Vue puede mantener esta tasa de crecimiento, definitivamente pronto superará a Angular.
Angular lanzó recientemente el compilador Ivy. Reduce los tiempos de compilación, optimiza los activos, permite pruebas más rápidas y, en general, mejora la experiencia del desarrollador.
El equipo de Angular lanza actualizaciones importantes dos veces al año, que pueden incluir nuevas funciones o simplemente actualizar el marco con nuevas versiones del navegador.
Las descargas semanales de Angular han aumentado en aproximadamente 50 desde el año pasado, por lo que sigue siendo un proyecto popular.
Angular, React y Vue se encuentran en etapas de desarrollo muy activas. Lanzan nuevas versiones periódicamente y mantienen las versiones existentes. Debido a que el nivel actual de soporte en cada caso es alto, puede utilizar cualquiera de estos marcos de manera segura.
Cabe señalar que Angular no está creciendo tan rápido como antes, mientras que Vue, aunque recién comenzó, parece estar creciendo mucho.
Como se mencionó anteriormente, no podemos predecir qué marcos seguirán siendo relevantes a largo plazo, pero hay una gran comunidad detrás de cada proyecto y está en constante crecimiento.
El objetivo de este artículo es explicar las diferencias arquitectónicas, desglosar los pros y los contras de cada marco y compararlos cuando corresponda.
Antes de lanzarse a un nuevo marco, hay algunas cosas a considerar.
En primer lugar, la experiencia de su equipo puede ser el factor decisivo a la hora de elegir nueva tecnología.
Del mismo modo, debes considerar el talento disponible en tu área para que puedas contratar desarrolladores para tu proyecto.
Finalmente, cuando se trata del proyecto en sí, la complejidad y el alcance también influirán en la elección del marco.
Al considerar todas las diferencias clave, espero que puedas decidir qué framework front-end se adapta mejor a tus objetivos y necesidades.
(Este artículo está traducido del artículo de Aris Pattakos "Angular vs React vs Vue 2021", indique la fuente, enlace original: /guides/Angular-vs-React-vs-Vue/)