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

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

Comparativa entre Angular, React y Vue

Hola a todos, hoy nuestro equipo de DevSun Europe continua con la serie de art铆culos relacionados con React. En la tem谩tica que hoy nos ocupa, publicamos la segunda parte de la comparaci贸n entre las diferentes tecnolog铆as de JavaScript React, Angular y Vue, ampliamente usadas en el desarrollo de aplicaciones.

Con estas dos publicaciones no pretendemos dar un vencedor, como hab铆amos mencionado en la primera parte, sino brindar tendencias y elementos que permitan a los desarrolladores encontrar la manera de elegir cual puede ser m谩s efectivo en la construcci贸n de sus proyectos. Teniendo como base para la elecci贸n la experiencia que poseen, en conjunci贸n con las caracter铆sticas que ofrecen estas tecnolog铆as de JavaScript.

En el an谩lisis de esta tem谩tica presentamos el siguiente contenido:

Primera parte:

  • Tendencias en el uso de React, Angular y Vue
  • Historia y Licencias de React, Angular y Vue
  • Comunidad de desarrolladores (GitHub, Stackoverflow)
  • Tama帽o y rendimiento
  • Soporte a largo plazo y migraciones

En el art铆culo de hoy presentamos la segunda parte de la comparaci贸n de las diferentes tecnolog铆as de JavaScript React, Angular y Vue.

Modularidad
Foto de Dribble por: David G.

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.

Flujo de Datos
Foto de Dribble por: St茅phane Gibert

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

En pr贸ximos art铆culos nuestro equipo de DevSun Europe seguir谩 profundizando en React como herramienta necesaria en el desarrollo de aplicaciones.


Total de Vistas: 578
Like
Like Love Haha Wow Sad Angry
4

You may also like

 

Deja un comentario

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *

Publicaci贸n recomendada
Scroll Up