Comparación entre React, Angular y Vue – Parte II

Modularidad: Componentes

Para el caso de Angular, React y Vue, se alcanza modularidad en el código a través del uso de componentes esencialmente.

Primeramente, es importante señalar que Angular presenta como su lenguaje fundamental en el desarrollo de sus proyectos a TypeScript. TypeScript es un lenguaje tipiado basado en JavaScript que posibilita el manejo de enumeradores, elementos genéricos, abstracciones, de forma similar a lenguajes de programación orientados a objetos como Java.

Angular modula el código mediante la directiva NgModule y el manejo de componentes. En cada NgModule se describe como se compone un módulo, es decir, cuales componentes le pertenecen, los servicios empleados por estos componentes y si se emplean dependencias de otros módulos.

A partir de la versión 2 de Angular es posible la creación de componentes, los que pueden ser vistos como la pasarela entre el sistema de plantillas de Angular y los datos obtenidos desde un API REST u otra fuente. Estos se encargan de organizar los datos y construir la plantilla, actualizando la misma en correspondencia con el flujo de datos. La relación entre un componente y una plantilla es siempre del orden uno a uno. El componente se encarga de manejar todas las interacciones del usuario que tienen lugar en la plantilla.

En React los componentes constituyen la unidad fundamental para la creación de las interfaces de usuario. Representan pequeñas y reusables piezas, que permite dividir la interfaz de usuario en bloques funcionales independientes. Por tanto, al usar React en los proyectos es importante tener un pensamiento basado en compontes para obtener mejores resultados. Estos se construyen a través de clases o funciones soportados en la sintaxis de JavaScript ES6 principalmente. Presentan un versátil ciclo de vida que permite, con sus diferentes métodos, controlar la construcción de la interfaz que se representa. Estos poseen métodos, estados (states) y propiedades (props). Los estados manejan los datos que pueden cambiar con frecuencia, mientras que las propiedades representan los valores que se mantienen constantes. El empleo de componentes favorece en la reutilización del código, encapsulamiento y composición de otros componentes manteniendo las funcionalidades específicas de cada uno. Algunos autores comparan estas características como la construcción de un proyecto con piezas de LEGO.

En cierta medida Vue utiliza una filosofía similar a la de React, basándose en la creación de componentes reusables y fáciles de mantener. Además, en la reutilización de código emplean los mixins, que permiten compartir funcionalidades existentes entre componentes.

Los componentes, en este caso, son pequeñas instancias de Vue que representan una parte de la interfaz del usuario. Mediante una colección de componentes se puede lograr el desarrollo de una aplicación. Esta colección es capaz de mostrar los datos y reaccionar ante las interacciones del usuario. Cada componente puede tener sus propios datos, plantillas, métodos, propiedades calculadas, como cualquier instancia de Vue.

Manejo del flujo de datos en la interfaz del usuario (data binding)

La arquitectura de Angular establece un mecanismo dinámico para el flujo de datos mediante el empleo de dos caminos (two-way data binding) entre la vista y el modelo. El mecanismo two-way data binding permite el enlace de una propiedad con un evento mediante la directiva NgModel en un formulario con el uso de una simple notación. De esta forma se mantienen sincronizados las plantillas y los componentes ante cualquier variación en los datos. Este intercambio de datos es capaz de lograr, además, la comunicación en dos vías entre componentes padres e hijos. En este caso, deben existir dos propiedades en el componente hijo, una de entrada y otra de salida.

Aunque este mecanismo two-way data binding resulta sencillo para la coordinación de datos entre la vista y el modelo, puede causar ciertos problemas de rendimiento en grandes aplicaciones que explotan en demasía esta facilidad. Entre los problemas que pueden ocurrir es el llamado efecto en cascada que hace difícil el manejo de los datos a lo largo de la aplicación. Por lo que se ha empezado a optar por parte de un grupo de programadores el patrón de una sola vía (one-way data binding) en Angular, sobre todo en los formularios reactivos. Siguiendo tipos de arquitectura para el manejo de datos tales como: la arquitectura basada en Observables como RxJS o una arquitectura basada en Flux.

React introduce una arquitectura para la administración del flujo de datos en una sola dirección de arriba hacia abajo (top-down or unidirectional data flow). Este patrón es comparado con una cascada de props en un árbol de componentes, en el cual se estable cierta jerarquía entre ellos. Los componentes padres pueden traspasar sus estados (states, es decir datos variables) o funciones como propiedades (props) a sus componentes hijos. Estos a su vez solo podrán leer los datos de sus padres, pero no modificarlos. Sin embargo, serán capaces de realizar llamadas de retorno (callbacks) jerárquicamente a los padres. Los cuales en correspondencia al callback recibido modificarán los datos y los reenviarán hacia el componente hijo que hizo la llamada.

Este patrón top-down logra facilitar el control del flujo de datos a través de la aplicación y constituye un mecanismo sencillo en la localización de los problemas que puedan existir en la visualización de los datos.

Vue puede soportar ambas arquitecturas para el intercambio de datos: la basada en un solo camino (unidirectional data binding) como React o mediante el uso de dos vías (two-way data binding) como Angular.

En el patrón unidireccional, los datos son pasados de los componentes padres a los hijos a través de propiedades. Cuando son actualizados los datos en el padre, la propiedad del hijo es actualizada. Al igual que en React los componentes hijos no pueden modificar las propiedades asignadas por el padre.

Para la implementación del mecanismo two-way data binding en Vue es necesario la utilización de la directiva v-model para obtener los datos de las entradas. De esta manera, ante los cambios realizados por el usuario se logran mantener sincronizados los datos del modelo y los que se representan en la interfaz de usuario.

Herramientas de Testeo

Para la realización del testeo en Angular es recomendable el uso de tres herramientas Jasmine, Karma y Protractor esencialmente. Jasmine es un framework que posibilita escribir diferentes pruebas para la comprobación de errores. Este es capaz de conectar con el navegador y realizar las pruebas empleando la herramienta de JavaScript que posee el navegador. Para las pruebas unitarias se sugiere emplear la herramienta Karma creada por un equipo de Angular. Este se encuentra configurado por defecto para controlar Jasmine con la ayuda del CLI de Angular. Protactor ayuda en la aplicación de pruebas de tipo e2e.

React emplea para las pruebas de software una serie de frameworks en correspondencia del tipo de prueba que se realice. Para pruebas de ejecución se utiliza Jest, una biblioteca de testeo desarrollada por ingenieros de Facebook. Otra biblioteca que se puede emplear en las pruebas es Sinon. En la comprobación de los componentes de React se sugiere emplear Enzyme. Esta biblioteca provee un robusto API que permite encuestar los diferentes tipos de componentes y elementos HTML, asignar y obtener las propiedades de los componentes, inspeccionar los estados, entre otras pruebas.

Vue-test-utils es la biblioteca oficial de Vue en la elaboración de las pruebas para la búsqueda de errores en los proyectos. Esta provee una serie de funcionalidades que logran encuestar el DOM, las propiedades, examinar componentes y eventos. Para las pruebas de ejecución es posible el empleo de Jest o Mocha.

Curva de Aprendizaje

Vue representa, comparado con Angular y React, el de más fácil aprendizaje para los que comienzan en el desarrollo web. Este utiliza, en la programación, JavaScript plano y presenta una documentación detallada. Puede ser bien comprendido por parte de los programadores que poseen cierta experiencia programando con JQuery, e incluso, con los que ya tienen ciertos conocimientos en AngularJS, del cual toma algunos conceptos. Al igual que Vue, Angular y React exhiben una excelente documentación, pero requieren un poco más de esfuerzo a la hora de su aprendizaje. Es decir, para el desarrollo web en estos dos últimos, se necesita entender la programación en TypeScript, aunque para el caso de React resulta más simple que Angular.

¿Cuál debería elegir?

¿Cuándo puede ser una buena elección Angular por encima de React o Vue?

En caso que tenga conocimientos avanzados de TypeScript, con una sólida base en la programación orientada a objetos (OOP). En el desarrollo de aplicaciones robustas y bien estructuradas.

¿Cuándo es recomendable usar React en vez de Angular o Vue?

Es recomendable cuando posee conocimientos básicos de TypeScript. Desea construir grandes aplicaciones que sean flexibles. React brinda una amplia cantidad de paquetes para múltiples fines y es fácilmente integrable con otras bibliotecas.

¿Cuándo se sugiere elegir Vue en comparación con Angular o React?

Vue constituye una excelente elección para proyectos o grupos de programación pequeños. Su curva de aprendizaje es mucho más fácil para los que comienzan