Angular vs React

Toda comparativa es odiosa, pero para ser justos, comparar Angular con React no es comparar manzanas con manzanas. No es una pugna justa. Angular es un marco de desarrollo completo, mientras que React es una biblioteca de interfaz de usuario. Creo que es importante conocer la diferencia antes de continuar.

Esto no quiere decir que no merezcan una comparativa, pero quería dejar claro esto para ceñirme a un artículo sencillo, honesto y centrado en las principales diferencias y virtudes de ambos, además de las razones por las que deberías usar cada uno. Eso sí, vamos a intentar resumir dado que incluir todas las características y diferencias entre Angular y React podrían dar lugar a un artículo inmenso. Así que para resumirlo me centraré en las versiones de Angular 11 y React 17 y los cambios que introducen.

Creo que es un buen punto de partida, dado que tanto Angular como React se actualizan de manera frecuente pero pocas veces coinciden como en la liberación de estas versiones.

Un poco de historia

Tanto Angular como React tienen como punto de partida una historia bastante similar. Por ejemplo y para resumir un poco, tenemos a Jordan Walke un ingeniero Facebook había creado FaxJS, lo que luego llegaría a llamarse React. Posteriormente Facebook lo implementó en 2011 pero el verdadero despegue se consolidó en el momento que se implementó en Instagram allá por 2012. Posteriormente tuvo lugar el primer lanzamiento público bajo una licencia de código abierto en la que React fue finalmente liberado 2013, y desde entonces una comunidad de desarrolladores junto con Facebook lo mantiene. En 2015, Facebook lanzó React Native de código abierto para el desarrollo nativo en Android e iOS.

Unos años antes, Miško Hevery de Brat Tech LLC había desarrollado AngularJS en 2009. Pero no fue hasta un año después cuando Google lo libera tras adquirir la empresa en donde trabajaba Miško, no sin antes reescribir todo el código por completo lanzando lo que hoy conocemos como Angular en 2016. Desde entonces su comunidad de desarrolladores no ha hecho más que añadir nuevas funciones a este marco de desarrollo ágil que es hoy.

En ambos casos la idea parte de un ingeniero que ve una clara necesidad en resolver el paradigma de las nuevas aplicaciones basadas en soluciones web en una carrera hacia la optimización de recursos.

Por qué usar Angular

Angular 11.0.0 se lanzó el 11 de noviembre de 2020. La historia de Angular es de todos conocida. Fue desarrollado inicialmente en 2010 por Google y mediante una licencia MIT de código abierto logró una amplia aceptación por parte de la comunidad. Esto le hizo rápidamente evolucionar hacia un marco de desarrollo MVC

Angular manipula el objeto DOM y permite extender etiquetas HTML con directivas de modo que podemos convertir el código HTML estático en una completa aplicación dinámica. Para ello usa un patrón MVVM (model view view-model) en donde separamos la lógica del diseño, pero mantenemos ambas partes conectadas (data binding) de manera que mantenemos el control sobre la capa visual DOM (el cuerpo de la web) y actualizar su contenido como queramos.

Las características de Angular 9 (lanzado el 6 de febrero de 2020) incluyen:

• Procesador Ivy: gran esfuerzo de optimización sobre cómo se manipula el DOM introducido en Angular 8 y ahora es el predeterminado.

• TestBed: Una API mejorada para realizar pruebas. TestBed.inject() introducido.

• Mejora para el módulo: ModuleWithProvider necesita el tipo de módulo para garantizar que se utilice el módulo correcto.

• Angular Forms: mejoradas para que sean más fáciles de usar. NgForm ahora es ng-form. FormModule.withConfig se eliminó y se puede llamar directamente a FormModule.

• Mejora de la inyección de dependencias: se agregó compatibilidad con el método provideIn para incluir la plataforma.

• Soporte de servicio de lenguaje mejorado para IDE: enlaces de definición para el entorno, como WebStorm y código VC. Se comprobarán las URL que no apuntan a archivos del proyecto.

• Mejorar la internacionalización: Angular CLI ayuda a generar los códigos para admitir varios idiomas.

• Mejore el extractor de API: cree informes y encuentre bibliotecas y servicios dañados.

Las características de Angular 10.0.0 (lanzado el 24 de junio de 2020) incluyen:

• Nuevo selector de intervalo de fechas

• Rendimiento mejorado: advertencias sobre importaciones de CommonJS, configuraciones opcionales más estrictas

• Actualizaciones de bibliotecas relacionadas: TypeScript 3.9, TSLib v2.0, TSLint v6, compatibilidad con tsconfig.json, nueva configuración predeterminada del navegador.

• BUGS: el equipo de Angular tocó 2,000 errores relacionados, incluidas las depreciaciones y eliminaciones.

• Más detalles aquí.

Las características de Angular 11.0.0 (lanzado el 11 de noviembre de 2020) incluyen;

• BUGS: se resolvieron algunos problemas populares en el enrutador y los formularios.

• Descarga de fuentes durante el tiempo de compilación: inserción automática de fuentes.

• Conjuntos de pruebas: Hooks de prueba para todos los componentes.

• Informes y registro mejorados: nuevas actualizaciones de salida de CLI que son más legibles.

• Servicio de idiomas actualizado: infiera tipos genéricos, aún en desarrollo.

• Soporte fácil para reemplazo de módulo en caliente (HMR): habilítalo con un comando $ng serve —hmr

• Compilaciones más rápidas: TypeScript v4.0 compila más rápido, ngcc 2 a 4 veces más rápido

• Otras actualizaciones de bibliotecas: compatibilidad con el paquete web experimental 5, desaprobando el uso de TSLint y Codelyzer en la versión 11, eliminando la compatibilidad con IE9 / IE10 e IE mobile.

• Más información aquí.

En resumen, el equipo de desarrolladores de Angular está muy activos introduciendo todo tipo de cambios y mejoras con el objetivo de optimizar este framework a las tendencias del mercado. Esto nos lleva a la siguiente conclusión. Angular estará con nosotros por mucho tiempo.

Si deseas conocer más te recomiendo visites nuestro Curso de Angular para principiantes.

Por qué usar React

En otro artículo hablábamos de React y sus características generales. Pero lo que se me olvidó comentar es que React está madurando más allá de ser una librería JavaScript de código abierto desarrollada por Facebook solo para manejar la interfaz de usuario y nada más. Una de sus últimas versiones, la versión 17.0.1 liberada el pasado mes de octubre de 2020 está sentando las bases para seguir dando mucha guerra a Angular. En cierto modo, es consecuencia de un enfrentamiento natural entre Facebook y Google.

Las características de la versión 16.x incluían características como:

• React DevTools: incluye un generador de perfiles que se mejoró con una devolución de la llamada onRender.

• Utilidad act()**:** mejorada para poder emular la aplicación de prueba en el navegador y que se ejecuta de forma asincrónica.

• Correcciones de bugs: fugas de memoria, manejo de bucles infinitos y otros.

Las características de la versión 17.0.x incluyen:

• createElement: a partir de Babel 8, este será “automático” el tiempo de ejecución predeterminado.

• Se eliminan las exportaciones privadas: las exportaciones privadas que formaban parte de React se han eliminado a partir de esta versión

• XML: Se añaden mejoras para cumplir las especificaciones HTML5 mediante un validador optimizado.

• Controladores de eventos: Se añade useEffect como un evento de limpieza.

• Más información aquí.

Con un enfoque diferente al de Angular, el equipo de desarrolladores busca agregar más herramientas a la librería, resolver errores conocidos y mejorar el soporte para que el desarrollador React pueda centrarse en lo importante. Gracias a esto, React muestra un gran impulso y desde luego que tampoco desaparecerá pronto.

Estoy seguro que quieres conocer un poco más, te recomiendo este Curso de React para principiantes, es bastante completo y te introduce en el mundo de React y sus últimas novedades.

Diferencias entre Angular y React

Y dicho todo esto hasta aquí, llega el momento de las tortas. Pero no, tal como mencionaba antes mi intención es escribir un artículo más o menos objetivo manteniendo cierta neutralidad, pero tenemos que tener en cuenta que:

• React es una biblioteca de JavaScript, sin embargo, Angular es un marco. Angular es una solución completa, mientras que puede agrupar React con otras bibliotecas.

• El flujo de datos en Angular es bidireccional. Si se cambia la interfaz de usuario, el estado del modelo cambia automáticamente y lo contrario también es cierto. Por contra, React tiene un flujo de datos unidireccional, es decir, cambiar los elementos de la interfaz de usuario solo es posible después de cambiar el estado del modelo.

• Angular actualiza el “Modelo de objetos de documento” (DOM) real, es decir, la interfaz de programación para documentos HTML y XML. Por otro lado, React actualiza el DOM virtual.

• Angular usa Typescript, un lenguaje compilado estáticamente que proporciona mecanografía, clases e interfaces estáticas. Escribir el código en Typescript hace que el código sea más robusto, ya que ayuda a identificar errores comunes y eliminarlos. En comparación, React usa JavaScript.

Angular o React, ¿cuál elegir?

Angular es un marco completamente maduro y se adapta tanto a equipos pequeños como grandes y se puede escalar fácilmente, sin embargo, la curva de aprendizaje es más alta, Angular usa más recursos, es más lento y está más limitado en la cantidad de desarrolladores necesarios para llevar a cabo un proyecto de cierta envergadura.

Por otro lado, la biblioteca React es más liviana en términos de uso de recursos, más rápida y es la favorita entre los desarrolladores para ser utilizada y aprendida. React es más fácil de aprender, pero ojo, no es tan fácil de dominar como uno pensaría. Si un equipo no sigue un protocolo estricto de mejores prácticas, cuando llegue el momento de escalar, es posible que nos encontremos con una aplicación con errores y una deuda tecnológica que no será nada fácil de superar.

Puestos frente a frente nos encontramos que ambos guardan ciertas similitudes:

• Rendimiento y UX: tanto Angular como React ofrecen un rendimiento y una experiencia de usuario robustos, por lo tanto, son igualmente buenos en este aspecto.

• Facilidad de desarrollo móvil: Angular tiene el marco Ionic y podemos crear aplicaciones móviles híbridas con él. Por otro lado, el desarrollo de aplicaciones móviles con React Native ofrece una experiencia de interfaz de usuario nativa. React es una mejor opción para el desarrollo móvil.

• Facilidad de actualización: la CLI de Angular facilita la actualización de una aplicación a la última versión de Angular, sin embargo, es diferente con React. Actualizar una aplicación React requiere más esfuerzo, ya que existen bibliotecas de terceros que se utilizan en el desarrollo de aplicaciones para el usuario.

• Documentación: Hay quien afirma que la documentación de React está más actualizada y documentada, mientras que la documentación de Angular puede resultar confusa entre versiones. En lo personal creo que la documentación disponible para trabajar con ambos es más que suficiente para comenzar cualquier proyecto.

En conclusión, al final la decisión de usar Angular o React pasa por los criterios de los desarrolladores que trabajan en el proyecto, el tamaño del proyecto, su alcance, la experiencia del equipo y el cronograma necesario para completar. Pero claro si le preguntas a un club de fans de React o Angular, ellos discutirán en ambos sentidos y afirmarán que su lado es el ganador. Pero algo es seguro, el uso de Framework es más adecuado para equipos más grandes y, por lo general, adecuado para proyectos con más presupuesto.

Quizá la mejor recomendación viene, como bien decía mi padre - ebanista de profesión - “es mejor medir dos veces y cortar una vez, que medir una y cortar diez veces”.