notifications Notificaciones

Marcar todas como leídas

Ver más

lightbulb_outline

3900 veces ha sido leído este artículo

Angular, React o Vue ¿cuál elegir?

Lo lees en 6 Min.

Con la creciente popularidad de Vue, Angular y React como frameworks y librerías para el desarrollo de aplicaciones web y móviles, una constante duda es cuál de estos 3 debo aprender, en cuál debo invertir mi tiempo, cuál tiene mayor futuro o simple y llanamente cuál es el mejor.

Thumbnail del artículo

En este vídeo voy a tratar de ayudarte, basado en mi experiencia, a decidir en cuál de estas librerías deberías invertir tu tiempo.

Aclaraciones antes de la comparativa.

Primero quiero comenzar diciendo que no hay respuesta incorrecta, si bien cada uno tiene implementaciones diferencia, la base es muy similar, programación reactiva y desarrollo basado en componentes. Esto significa que sin importar en cuál decidas especializarte, el conocimiento fundamental del uso de estas librerías es intercambiable, saber Vue significa que es fácil pasar a React, o de React a Vue, o a Angular, esto no quiere decir que si sabes uno sabes todos, más bien es que al dominar uno te será más fácil moverte a otro en caso de que te sea necesario.

Dicho esto, aclaremos los puntos comparativos.

Versus de Frameworks

Curva de aprendizaje

Comencemos por atacar la curva de aprendizaje, una de las consideraciones más importantes al iniciar en una nueva tecnología. Cuando hablamos de la curva de aprendizaje nos referimos a una gráfica que describa qué tan complicado es aprender algo y qué tan pronto puedo obtener beneficios y resultados del esfuerzo que estoy dedicando a aprender algo.

En lo que respecta a estos 3 frameworks, Angular es el que se separa de los otros 3 por ser una tecnología que toma más tiempo dominar y en la que quizás sentirte cómodo pueda tomar más tiempo, más adelante hablaremos de la robustez de las tecnologías y cuáles son los beneficios de invertir tiempo en una tecnología como Angular que es más complicada de digerir.

React y Vue en este apartado son muy similares, con una pequeña ventaja para Vue porque es un ecosistema mucho más uniforme. Si bien existen muchísimas librerías muy buenas para React, Vue tiene la ventaja de que el mismo equipo que desarrolla el framework trabaja en las librerías más populares y útiles del ecosistema de Vue, en términos de aprendizaje esto se traduce en que Vue y sus librerías son muy similares por lo que sentirse productivo en esta tecnología es mucho más fácil.

** Ganador, Vue, perdedor Angular. **

Aplicaciones de gran escala

Segundo punto, robustez. Este punto tiene mucho que ver con aplicaciones de gran escala. Como en muchos de estos puntos, la competencia es pareja, con cada uno de los 3 frameworks se han creado productos de gran escala en empresas como Facebook, Google, Uber, Walmart, Airbnb, Netflix, entre muchos otros más.

Aquí creo que el primero en caer será Vue, porque aunque internamente se usa en Netflix e incluso Facebook usa Vue, no tiene los grandes nombres que vienen con Angular y React.

En lo que respecta a Angular y React, la competencia es mucho más cerrada, comenzando por el fuerte impulso que reciben de Google y Facebook respectivamente. Ambas librerías son usadas tanto en Google como en Facebook mismo, además de otras empresas enormes como Uber, PayPal, The New York Times, entre otros más. Sin embargo, declararé ganador de este punto a Angular, simplemente porque el framework está concebido para esta clase de tareas, aplicaciones de gran escala y bases de código grandes.

Hay que recordar que Angular es toda una plataforma de desarrollo que incluye por supuesto Angular para el navegador, herramientas de la terminal, Angular Universal, librerías de interfaz gráfica, y mucho más. A diferencia de React que es una librería, que si bien la comunidad ha construido una increíble plataforma alrededor de React, Angular gana porque desde el core está hecha para interactuar con todos estos componentes.

Ganador Angular, perdedor Vue.

Experiencia de desarrollo

Tercer encuentro, herramientas de desarrollo. Conforme vas adquiriendo experiencia y vas trabajando en más proyectos, comienzas a crear un cariño especial por las herramientas que te permiten programar más rápido, detectar errores de manera anticipada, depurar problemas, trabajar en equipo, mantener el código, etc.

En este apartado, como las tecnologías maduras que son, las 3 tienen muy buenas herramientas para desarrollo, buena integración con los editores de texto más populares y por supuesto herramientas diseñadas para mejorar tu flujo de trabajo.

Quisiera darle puntos positivos a Angular porque todos los frameworks se crean usando Typescript, un lenguaje que mejora considerablemente la experiencia de desarrollo de aplicaciones JavaScript como las de Angular, sin embargo, el desarrollo usando Typescript también es muy popular en React y Vue, aunque no es una norma como en Angular. De hecho, para Vue 3.0 tendremos un mejor soporte de Typescript, por lo que en este apartado están muy parejos con ligera ventaja a Angular.

En este apartado creo que React se lleva la batalla por el desarrollo de herramientas como las React Developer Tools, una extensión para el navegador que, precisamente, extiende el soporte para depurar aplicaciones creadas con React. Quiero aclarar que como las React Developer Tools, existen similares para Angular y Vue, pero damos la ventaja a React porque es Facebook mismo quien crea esta herramienta.

Puntos bonus para React porque en Facebook también desarrollan Jest, una librería para pruebas automatizadas que puedes usar con React.

En resumen, ganador React, perdedor Vue.

Expresividad

Como siguiente punto a considerar, quiero compararlos en términos de expresividad y qué tan fácil es mantener el código de la aplicación.

Esto tiene mucho que ver con el punto anterior por las herramientas de depuración, pero también con cómo funciona el framework internamente.

En programación tenemos un concepto al que llamamos la caja negra, la caja negra es una referencia a una pieza de código a la que le podemos entregar datos y nos dará una respuesta, pero, no queda claro cómo funciona internamente o qué está produciendo estos datos.

Las cajas negra están estrechamente asociadas con la productividad, porque no necesitas configurar muchas cosas o entrar a fondo para obtener los resultados que esperas, sin embargo, una vez que algo se rompe o que la caja no entrega los resultados esperados, tienes un problema muy grande, porque ahora hay que tratar de entender una pieza de código que es normalmente compleja para saber por qué está fallando.

Conforme tu experiencia crezca, vas a querer alejarte de estos patrones y mejor utilizar herramientas en las que quede claro qué está sucediendo, cómo fluye la información, de dónde vienen los cambios y qué elementos del código afectan la ejecución de una solución.

Estos puntos benefician muchísimo la experiencia de mantener una aplicación, detectar bugs, anticiparlo y por supuesto solucionarlos. En este apartado creo que a Angular le va más mal porque si bien el inyector de dependencias o el data binding doble son mágicos e increíbles, pueden ser difíciles de comprender y convertirse en tu caja negra cuando se trata de encontrar un bug. Por otro lado, Vue y React se distinguen por ser frameworks mucho más expresivos, particularmente me agrada que React tenga componentes funcionales y que no haya data binding porque bueno, el flujo de información es muy claro y detectar un posible error más fácil.

Así que declaro de este punto ganadores a ambos React y Vue, mientras que el perdedor sería Angular.

Configuración del entorno de trabajo

Y ahora sí por último hablemos del entorno necesario para usar estas aplicaciones, que es muy importante también. Si bien, una aplicación JavaScript grande y de alta escala siempre vendrá acompañada de un entorno de desarrollo complejo y diseñado a la medida, que normalmente involucre herramientas como Webpack, Babel, Linters y más, no siempre queremos tener que descargar 200mb de librerías para poder arrancar un hola mundo.

Además, si estás un proyecto sencillo donde quieres aprovechar tus conocimientos en estas librerías, integrar tantas herramientas puede resultar demasiado para soluciones pequeñas, es por eso que en ocasiones es importante considerar la flexibilidad que puedan tener estos frameworks para adaptarse a soluciones pequeñas tan bien como a soluciones de gran escala.

En este punto definitivamente ganan Vue y React, porque no necesitas nada más que importar algunas librerías y listo, puedes usarlas sin problemas, de hecho, creo que Vue destaca mucho más porque a diferencia de React, está diseñado para funcionar en cualquier entorno siempre y cuando importes la librería de Vue. Y aunque React también puede hacerlo, tienes que traer al menos algunas herramientas como JSX, porque sin ellas sería muy raro escribir código de React.

Si quieres agregarle un poco de magia a una página estática, a Wordpress o a un proyecto existente, definitivamente el ganador es Vue y el perdedor es Angular como es un framework mucho más robusto con el que te tienes que comprometer mucho más para poder aprovecharlo.

Ganador Vue, perdedor Angular

Conclusión

Bien, luego de estas consideraciones quizás aún quieras una respuesta tan simple como usa Vue, o usa Angular o usa React, pero bueno, no es tan sencillo como eso, la respuesta correcta es, considerando las ventajas y desventajas de cada librería, usa la que mejor te convenga. Yo personalmente uso Angular para proyectos que iniciaré desde 0 y donde todo pasará por el framework, uso React por React Native, por herramientas como Redux y JSX que lo hacen una maravilla a la hora de desarrollar, de verdad la experiencia de desarrollo de React es increíble, y uso Vue considerando el último punto, cuando voy a trabajar con un proyecto existente, cuando solo algunos de los componentes del sitio web requieren de los beneficios de estas librerías, ahí me encanta Vue.

Si tú tienes otro proceso de elección, déjalo en los comentarios estaré feliz de leerlo.

Recomendaciones

Comunidad