React vs Angular JS

Cada vez es más frecuente ver comparativas de las tecnologías React vs Angular. Gracias a conocidas empresas que impulsan estos desarrollos, la información que llega es abundante, pero también algo sesgada por la orientación profesional de los programadores que la sirven y focalizada en los proyectos donde han trabajado.

La programación de aplicaciones web divide el trabajo de diseño en dos partes diferenciadas. Por un lado, está el back-end, que se ocupa de la creación del código que va a gestionar el acceso a bases de datos o a funciones del servidor. Del otro lado está en el front-end, que tiene que ver con el aspecto final de la aplicación en la pantalla del usuario.

Naturalmente, la división anterior no es ni radical y ni absoluta. React es una librería de JavaScript de código abierto, mientras que Angular es un framework escrito en TypeScript, también en código abierto. Por lo que estas herramientas de desarrollo se sitúan en el lado front-end de la programación web.

Cuáles son las diferencias entre React y Angular:

Para entender bien las diferencias establecidas en la expresión React vs Angular hay que comprender el objeto común que persiguen ambas tecnologías. Básicamente, una aplicación web, en su interfaz, realiza una combinación de elementos HTML, hojas de estilo y JavaScript. Se busca una forma atractiva de presentar la información a la vez que definir las acciones que se van a producir al interactuar con ella.

El modelo DOM de objetos HTML, normalmente, es insuficiente para el grado de definición gráfica que exigimos en la actualidad a una página web. En la construcción de estas estructuras se producen muchas acciones repetidas que pueden ser simplificadas, bien con librería de Javascript, el caso de Angular, o con un marco o framework de programación, el caso de React.

Angular como framework desarrollado y mantenido por Google condensa una serie de patrones habituales en el desarrollo web. Su función es acelerar la puesta a punto del código en sus partes más significativas liberando a los programadores de acciones comunes y repetitivas.

Mientras, React es una librería de JavaScript lanzada por Facebook. Como librería o biblioteca agrupa funciones y objetos de este lenguaje de programación por un propósito definido. Es decir, aplica una idea parecida al caso de Angular, pero sobre elementos distintos y con un fin muy similar.

Las principales diferencias entre estas dos tecnologías se pueden resumir en las siguientes:

Han sido creados por dos empresas, ya comentadas, distintas. Cada tecnología en inicio estaba destinada a fines particulares.

La arquitectura del modelo aplicado es distinta, MVC para Angular, mientras que para React es de tipo flux para flujo de datos unidireccional.

Los lenguajes de desarrollo son distintos.

El rendimiento en React es superior por necesitar un número menor de instrucciones al implementar un DOM virtual.

React vs Angular JS:

Las diferencias señaladas antes son esenciales, pero a medida que estas tecnologías han crecido ofrecen otras muchas divergencias. En los siguientes apartados se distinguen con mayor detalle:

Componentes:

La idea de componentes en React es análoga al funcionamiento de un juego de construcción modular. La interfaz web se descompone en elementos más simples, pero con gran repetición en desarrollos web estándar. Como estamos hablando de una librería de JavaScript, los componentes esenciales son las funciones y las clases.

La forma de agrupar estas funciones es por los modos frecuentes de manipular el DOM de una página web para presentar sus elementos. La utilización de estos componentes eleva el grado de abstracción de un modelo que simplifica enormemente el trabajo de picar código para definir el aspecto final de una interfaz web.

Por otra parte, los componentes en Angular son etiquetas parecidas a HTML que se pueden crear o ampliar para definir elementos que se repiten con frecuencia. La idea es similar a usar un patrón de diseño al que solo falta definir los parámetros que lo personalicen.

Tanto los componentes como la arquitectura de Angular separan operaciones habituales y, sobre estos grupos aislados, se construye el modelo que se va aplicar en la creación de una web.

El ahorro de tiempo en escritura de código es considerable. También hay una reducción importante de errores por centrar la actividad de los programadores en las características que mejor definen el proyecto web puesto en marcha y no tanto en sus coincidencias genéricas con cualquier otro.

Typescript vs JavaScript/Flow

JavaScript nació como lenguaje interpretado de la necesidad de dotar las páginas web de un comportamiento dinámico al realizar alguna acción sobre una interfaz web. El lenguaje fue venciendo a sus competidores por las sucesivas ampliaciones de capacidades en cada versión estable publicada.

TypeScript viene de la mano de Microsoft para ajustar las enormes capacidades de JavaScript a propósitos muy concretos. Si ser flexible fue un rasgo distintivo y muy bien valorado de JavaScript en TypeScript, el mérito principal está en la definición y el tipado de los elementos que conforman el lenguaje.

La ventaja de TypeScript sobre JavaScript es disminuir los errores de código y acelerar su producción por una mayor capacidad de las IDE’s para completar expresiones, funciones y sentencias.

Las actividades de refactorizar, importar y extraer con el código se multiplican. Como punto negativo frente a JavasScript, está el de añadir un componente con el que habrá que contar para realizar actualizaciones o reformas radicales del proyecto.

Con la concurrencia de lenguajes de programación, el grado de exigencia profesional para el equipo desarrollador crece considerablemente. Pero, a pesar de todo, cuenta con un nutrido y entusiasta colectivo de seguidores.

Plantillas: diferencias y similitudes

Las plantillas en Angular tienen la impronta del HTML, pues funcionan bajo su lógica. React, por el contrario, centra sus modos de acción sobre JavaScript. En el primer caso, los errores que se comenten en programación se verifican en tiempo de ejecución del propio código. Mientras que, para el caso de React, los fallos se deben buscar con un examen separado de la plantilla.

Tanto para React como para Angular, hay una gran cantidad de temas ya probados en infinidad de proyectos. Funcionan del mismo modo que otros frameworks muy populares tales como Bootstrap, Skeleton o SproutCore.

Cuando existe una gran similitud entre varios proyectos, la difusión de una tecnología bien adaptada a los requisitos exigidos triunfa de modo inequívoco sobre las demás.

Framework vs. library:

Como se ha adelantado con anterioridad, las diferencias entre framework y library, librería o biblioteca se refieren al modo de ahorrar tiempo de desarrollo del código fuente. Con el framework se establece un patrón de desarrollo propio que eleva el grado de abstracción de las acciones al tener agrupadas en categorías los elementos de la interfaz.

Con las librerías se actúa sobre las funciones y clases del lenguaje Script de desarrollo web (casi siempre JavaScript) para que la instrucción de datos y parámetros sea menos pesada. Con muchas menos llamadas a la acción o instrucciones, se alcanza un nivel de ejecución muy satisfactorio.

Al final, se trata de tener un montón de acciones muy repetidas agrupadas por categorías. El montaje definitivo va a venir de una intervención simplificada en sus principales extremos.

Soluciones móviles de React y Angular

La forma en que una web es vista en dispositivos móviles es un detalle muy importante en la fase actual del desarrollo web. Una buena parte del tráfico viene de esta clase de dispositivos y los buscadores aprecian ofrecer un trato preferente en estos medios.

El modo en cómo React o Angular pueden afectar a las soluciones móviles tiene tres dimensiones principales:

La adaptabilidad de las aplicaciones web a las dimensiones de las pantallas.

La velocidad de carga de la aplicación web.

La mejora de la experiencia de usuario y que todas las operaciones puedan ser completadas como si de un PC de escritorio se tratase.

Angular obliga a la carga de archivos algo mayores mientras que React está sujeta a algunas soluciones con licencia propietaria de Facebook. También la comunidad de React tiene un peso específico, pues a nivel global es superior a la que apoya a Angular. Angular, por otra parte, en su categoría de producto tiene una fuerte competencia por otros frameworks muy populares actualmente

Pero, en ambas tecnologías hay capacidad para que una aplicación web construida con ellas tenga una gran aceptación en dispositivos móviles.

¿Qué conocidas compañías usan estas tecnologías?

El uso de Angular está muy vinculado al lenguaje sobre el que está construido, el TypeScript. Las compañías que usan esta tecnología están por este y otros motivos implicadas en algunas partes de su desarrollo. Tenemos por ejemplo a Google, Microsoft, Netflix, Github, Slack o Walmart entre otras.

Con React están comprometidas Facebook, Airbnb, Uber o Pinterest, o la misma Netflix. La capacidad para formar aplicaciones ligeras y de alto rendimiento es una de las cualidades mejor valoradas por estas compañías

Entonces, ¿cuál elegir?

El desarrollo de aplicaciones web presenta novedades cada día. En la comparativa de quién resultará vencedora en esta carrera, tanto React como Angular tienen buenas perspectivas y excelentes promotores. Pero resulta aventurado echar la vista a medio o largo plazo porque no son los únicos actores y cualquier solución con un valor diferencial o disruptivo se acaba imponiendo.