Hace solo un par de años, los desarrolladores debatían principalmente si deberían usar Angular vs React para sus proyectos. Pero en el transcurso de los últimos años, hemos visto un aumento el interés en un tercer jugador llamado Vue.js.
Si eres un desarrollador que está comenzando con un proyecto y no puede decidir qué framework de JavaScript utilizar, esta guía debería ayudarte a tomar una decisión.
Aquí cubriremos varios aspectos de Angular, Vue y React para ver cómo se adaptan a tus necesidades. Esta publicación no es solo una guía sobre Angular vs React vs Vue, sino que tiene como objetivo proporcionar una estructura para ayudarte a evaluar los frameworks de JavaScript front-end en general. En caso de que llegue un nuevo framework el próximo año, ¡sabrá exactamente qué parámetros debe tener en cuenta!
En esta publicación, asumimos que tiene conocimientos básicos de JavaScript y también ha utilizado framework de JavaScript.
Parte 1: Una breve historia de Vue vs React vs Angular
Antes de entrar en los detalles técnicos, primero hablemos de la historia detrás de estos frameworks, solo para apreciar mejor su filosofía y su evolución a lo largo del tiempo.
¿Cómo empezó todo?
Angular, desarrollado por Google, se lanzó por primera vez en 2010, lo que lo convierte en el más antiguo. Es un framework de JavaScript basado en TypeScript. En 2016 se produjo un cambio sustancial con el lanzamiento de Angular 2 (y la eliminación del “JS” del nombre original: AngularJS). Angular 2+ se conoce simplemente como Angular. Aunque AngularJS (versión 1) todavía recibe actualizaciones, centraremos la discusión en Angular. La última versión estable es Angular 11, que se lanzó en noviembre de 2020.
Vue, también conocido como Vue.js, es el miembro más joven del grupo. Fue desarrollado por el ex empleado de Google Evan You en 2014. Durante los últimos tres años, Vue ha experimentado un cambio sustancial en popularidad, aunque no cuenta con el respaldo de una gran empresa. La versión estable actual es 3.0, lanzada en septiembre de 2020 (con algunas pequeñas versiones incrementales desde entonces). Los colaboradores de Vue cuentan con el apoyo de Patreon. Cabe señalar que Vue 3 se encuentra actualmente en su propio repositorio de GitHub y se ha trasladado a TypeScript.
React, desarrollado por Facebook, se lanzó inicialmente en 2013. Facebook usa React ampliamente en sus productos (Facebook, Instagram y WhatsApp). La versión estable actual es 17.X, lanzada en octubre de 2020 (con actualizaciones incrementales más pequeñas desde entonces).
Aquí hay un breve resumen de Angular vs React vs Vue, en términos de su estado e historia:
Licencia ?♂️
Antes de utilizar un framework de código abierto, asegúrate de pasar por su licencia. Curiosamente, los tres frameworks utilizan la licencia MIT, que proporciona restricciones limitadas sobre la reutilización, incluso en software propietario. Asegúrate de conocer las implicaciones de la licencia antes de utilizar cualquier framework o software.
Popularidad ?
Como “angular” y “react” son palabras comunes, es difícil captar su popularidad en Google Trends. Sin embargo, un buen indicador de su popularidad es la cantidad de estrellas que obtienen sus repositorios de GitHub. Un cambio repentino en la cantidad de estrellas de Vue ocurrió a mediados de 2016 y, recientemente, Vue ha estado a la altura de React entre los frameworks más populares.
Veamos cómo está el mercado laboral para Angular vs React vs Vue, que también es una buena medida de popularidad:
Mercado laboral para Angular vs React vs Vue ?♂️
Las mejores fuentes de datos que indican las tendencias del mercado laboral son las distintas bolsas de trabajo.
Como se ve en las tendencias de finales de 2018, la cantidad de trabajos que requieren un conjunto de habilidades de Angular o React es aproximadamente la misma, mientras que la de Vue todavía era solo una fracción de este número (aproximadamente el 20%).
Si lo que busca es estrictamente desde el punto de vista del mercado laboral actual, su mejor opción es aprender Angular o React. Sin embargo, dado que Vue ha ganado popularidad en los últimos tres años, puede llevar algún tiempo que los proyectos utilicen Vue, o que los proyectos nuevos que adopten Vue alcancen un nivel de madurez que requiera un mayor número de desarrolladores.
Parte 2: Comunidad y desarrollo
Ahora que está familiarizado con la historia y las tendencias recientes de cada uno de estos frameworks, analizaremos la comunidad para evaluar el desarrollo de estos. Ya hemos visto que para todos los frameworks, las versiones incrementales se enviaron regularmente durante el año pasado, lo que indica que el desarrollo está en pleno apogeo.
Veamos Angular vs React vs Vue con respecto a las estadísticas en sus repositorios de GitHub (y tenga en cuenta que los números de Vue también incluyen el repositorio de Vue 3.0 separado):
Al comparar Vue vs React, Vue tiene una gran cantidad de observadores, estrellas y forks. Esto muestra la popularidad de Vue entre los usuarios y su valor en comparación con React. Sin embargo, la cantidad de contribuidores para Vue es menor que Angular y React.
Una posible explicación es que Vue está impulsado completamente por la comunidad de código abierto, mientras que Angular y React tienen una parte significativa de los empleados de Google y Facebook que contribuyen a los repositorios.
Según las estadísticas, los tres proyectos muestran una actividad de desarrollo significativa, y esto seguramente continuará en el futuro, solo que estas estadísticas no pueden ser la base para no decidir utilizar ninguno de ellos.
Una métrica adicional que debe considerar es la insignia “Usado por” de GitHub, que debe ser habilitada por el autor del repositorio. Esto muestra cuántos otros repositorios en GitHub dependen de ese repositorio. El repositorio de GitHub de Angular muestra 1,7 millones, React muestra actualmente casi 5,7 millones de usuarios, mientras que Vue muestra más de 167.000 para sus dos repositorios combinados. Una gran diferencia entre los tres frameworks, pero esto se debe en gran parte a que Vue es el framework más nuevo y no ofrece una imagen completa de la demanda general.
Parte 3: Migraciones
Mientras trabajas con el framework de tu elección, no quieres tener que preocuparte de que se presente una actualización del framework y estropee tu código. Aunque en la mayoría de los casos no encontrarás muchos problemas de una versión a otra, es importante estar al tanto porque algunas actualizaciones pueden ser más importantes y requieren ajustes para mantener la compatibilidad.
Angular planea actualizaciones importantes cada seis meses. También hay un período de otros seis meses antes de que se desactiven las principales APIs, lo que le da el tiempo de dos ciclos de lanzamiento (un año) para realizar los cambios necesarios, si corresponde.
Cuando se trata de Angular vs React, Facebook ha declarado que la estabilidad es de suma importancia para ellos, ya que grandes empresas como Twitter y Airbnb usan React. Las actualizaciones a través de versiones son generalmente más fáciles en React, con scripts como react-codemod que lo ayudan a migrar.
En la sección Migración, de los documentos de Vue 3, Vue menciona que mucho es lo mismo entre Vue 2 y Vue 3, mientras que el 90% de la API es la misma si está migrando de 1.xa 2. Hay una herramienta para migrar de Vue 2 a Vue 1 que funciona en la consola para evaluar el estado de su aplicación.
Parte 4: Trabajar con Vue vs Angular vs React
Hay un puñado de características importantes para considerar aquí, las principales de ellas son el tamaño general y los tiempos de carga, los componentes disponibles y la curva de aprendizaje.
Tamaño y tiempos de carga ⏲️
Los tamaños de las bibliotecas no serán un factor tan importante, ya que el almacenamiento en caché y la minificación son bastante estándar hoy en día. Aunque puede haber una diferencia significativa entre los tamaños de los frameworks (por ejemplo, Angular es el más grande), siguen siendo pequeños en comparación con el tamaño medio de la página web (alrededor de 2 MB según los datos más recientes). Además, si usa un CDN popular para cargar estas bibliotecas, es muy probable que un usuario ya tenga la biblioteca cargada en su sistema local.
Componentes ?️
Los componentes son partes integrales de los tres frameowrks, sin importar si estamos hablando de Vue, React o Angular. Un componente generalmente recibe una entrada y cambia el comportamiento en función de ella. Este cambio de comportamiento generalmente se manifiesta como un cambio en la interfaz de usuario de alguna parte de la página. El uso de componentes facilita la reutilización del código. Un componente puede ser un carrito en un sitio de comercio electrónico o un cuadro de inicio de sesión en una red social.
Angular: En Angular, los componentes se denominan directivas. Las directivas son solo marcadores en elementos DOM, que Angular puede rastrear y adjuntar un comportamiento específico también. Por lo tanto, Angular separa la parte de la interfaz de usuario de los componentes como atributos de las etiquetas HTML y sus comportamientos en forma de código JavaScript. Esto es lo que lo distingue cuando se mira Angular vs React.
React: React, curiosamente, combina la interfaz de usuario y el comportamiento de los componentes. Por ejemplo, aquí está el código para crear un componente de hola mundo en React. En React, la misma parte del código es responsable de crear un elemento de interfaz de usuario y dictar su comportamiento.
Vue: Al mirar Vue vs React, en Vue, la interfaz de usuario y el comportamiento también son parte de los componentes, lo que hace que las cosas sean más intuitivas. Además, Vue es altamente personalizable, lo que le permite combinar la interfaz de usuario y el comportamiento de los componentes desde un script. Además, también puede usar preprocesadores en Vue en lugar de CSS, que es una gran funcionalidad. Vue es excelente cuando se trata de integración con otras bibliotecas, como Bootstrap.
Para comparar cómo se ve la misma aplicación con diferentes bibliotecas, aquí hay una excelente publicación sobre cómo crear la misma aplicación de lista de tareas en React y Vue y contrastar las diferencias de los dos frameworks.
Curva de aprendizaje ?
Entonces, ¿qué tan difícil es aprender cada uno de estos frameworks?
Angular: Angular tiene una curva de aprendizaje pronunciada, considerando que es una solución completa, y dominar Angular requiere que aprenda conceptos asociados como TypeScript y MVC. Aunque se necesita tiempo para aprender Angular, la inversión paga dividendos en términos de comprender cómo funciona la interfaz.
React: React ofrece una guía de introducción que debería ayudar a configurar React en aproximadamente una hora. La documentación es exhaustiva y completa, con soluciones a problemas comunes que ya están presentes en Stack Overflow. React no es un framework completo y las funciones avanzadas requieren el uso de bibliotecas de terceros. Esto hace que la curva de aprendizaje del framework principal no sea tan empinada, pero depende del camino que tome con funcionalidad adicional. Sin embargo, aprender a usar React no significa necesariamente que esté usando las mejores prácticas.
Vue: Vue proporciona una mayor personalización y, por lo tanto, es más fácil de aprender que Angular o React. Además, Vue se superpone con Angular y React con respecto a su funcionalidad, como el uso de componentes. Por lo tanto, la transición a Vue desde cualquiera de los dos es una opción fácil. Sin embargo, la simplicidad y flexibilidad de Vue es un arma de doble filo: permite un código deficiente, lo que dificulta la depuración y pruebas.
Aunque Angular, React y Vue tienen una curva de aprendizaje significativa, sus usos tras el dominio son ilimitados. Por ejemplo, puede integrar Angular y React con WordPress y WooCommerce para crear aplicaciones web progresivas.
¿Qué framework crees que es el ganador aquí: Angular vs React vs Vue? Comparte este articulo y no te quedes con el.
