¿Por qué React JS es mejor que Angular o Vue JS?

Es bien sabido que las páginas web se construyen principalmente con lenguajes de programación HTML, CSS y JavaScript (los tres bloques de construcción fundamentales de la web). En concreto, HTML crea elementos en las páginas web, como menús, textos y cuadros. Mientras que CSS se utiliza para dar estilo, diseñar y colocar esos elementos en las páginas web. Y, por último, JavaScript, que facilita la interacción y manipulación de estos elementos. El tema de nuestra discusión girará en torno a JavaScript; en particular React.Js y su superioridad sobre Angular y Vue.Js.

En resumen, React JS es mejor que Angular o Vue JS debido a sus capacidades superiores de Virtual DOM, su sólido soporte comunitario, su rica documentación, sus atributos livianos, su curva de aprendizaje manejable y su flexibilidad para permitir la funcionalidad móvil con React Native.

JavaScript: el lenguaje adhesivo

Para establecer un precedente para nuestro caso que justifique el dominio de React, recapitularemos algunos conceptos básicos. JavaScript a menudo se ha identificado como un lenguaje de unión, utilizado para ensamblar otros componentes. De los tres componentes básicos de la web, HTML y CSS son menos complejos (aunque se utilizan principalmente con fines de diseño estático). Sin embargo, para los desarrolladores que crean contenido web dinámico, JavaScript es una prioridad, lo que indica por qué es mucho más grande y complicado que sus contemporáneos. Esencialmente, convirtiéndose en el estándar de facto empleado en la mayoría de las páginas web.

En consecuencia, durante la última década, se han diseñado múltiples marcos front-end sobre JavaScript para facilitar el desarrollo y mantenimiento de sitios web. Como resultado, a partir de 2020, los más populares de estos marcos de JavaScript front-end fueron React y Vue, luego Angular.

Dado que hemos establecido brevemente que JavaScript y los marcos y bibliotecas basados ​​​​en JavaScript son herramientas críticas para el desarrollo web. Entonces, para establecer el contexto de nuestro blog, retrocedamos brevemente y describamos la historia y el desarrollo de JavaScript.

La historia de las tecnologías web y los navegadores

El primer navegador web se desarrolló y lanzó en diciembre de 1990 con Tim Berners-Lee como desarrollador principal. Simultáneamente desarrolló y lanzó el Protocolo de transferencia de hipertexto (HTTP), el protocolo de aplicación para la World Wide Web para la indexación y navegación de sitios web.

Más tarde, el navegador web gráfico inaugural, Mosaic, se lanzó en 1993. De manera similar, en el mismo año, se desarrolló HTML. Esto fue unos años antes de que se creara JavaScript, mientras que CSS se lanzó en 1996, un año después de JavaScript. Estos tres lenguajes luego formaron una pila de tecnología conocida como "la tríada de tecnologías que los desarrolladores web deben aprender".

El desarrollo de JavaScript

Uno de los seguimientos famosos del navegador Mosaic fue el navegador Netscape Navigator, lanzado en 1994. En 1995, los desarrolladores del entonces popular Netscape contrataron a Brendan Elch, un programador, para crear un nuevo lenguaje de secuencias de comandos dinámico para páginas web. y manipulación de datos del lado del cliente.

En respuesta al mercado, Netscape vio la necesidad de crear sitios web dinámicos en lugar de limitarse a HTML. Desafortunadamente, la mayoría de los primeros sitios web empleaban solo HTML y, por lo tanto, eran computacionalmente ineficientes. Entonces, Netscape se vio obligado a diseñar un lenguaje de secuencias de comandos web simple destinado a la manipulación del DOM (modelo de objeto de documento). En consecuencia, el proyecto se inspiró en la funcionalidad y la sintaxis de Java : aunque son fundamentalmente diferentes a pesar de un parecido sintáctico menor.

Lanzado oficialmente en marzo de 1996, JavaScript eventualmente permitió una nueva funcionalidad en las páginas web que HTML por sí solo no podía. Por ejemplo, responder a la entrada del usuario, mostrar ventanas emergentes y cambiar los colores de los elementos. Posteriormente, Netscape fue adquirida por America Online (AOL), que también era propietaria de Mozilla, lo que contribuyó al crecimiento exponencial de JavaScript como estándar de Internet.

El surgimiento de XML, AJAX y las aplicaciones de una sola página

Más tarde, a principios de la década de 2000, los usuarios de la web se sentían frustrados con las respuestas lentas del servidor y los largos tiempos de transmisión de datos. Estos se vieron agravados aún más por las conexiones a Internet de baja velocidad que marcaron la época. El condujo al desarrollo de la pila de tecnología AJAX (XML asíncrono y JavaScript)

En este sentido, XML es un lenguaje de marcado similar a HTML, aunque se utiliza para la representación de datos en lugar de la visualización de contenido. XML se volvió relevante dentro de JavaScript con la creación de la pila AJAX.

A menudo descrito como una colección de varias tecnologías, agrupadas como un todo, AJAX se compone de XHTML, CSS, DOM, XML, XLST, XML HttpRequest y JavaScript. Y dentro de AJAX, JavaScript une todas las demás herramientas . En consecuencia, AJAX proporcionó una forma de actualizar partes de una página HTML sin descargar todo su contenido.

Aplicaciones de una sola página

En general, todos los marcos de JavaScript adoptan principios de aplicación de una sola página. En la práctica, una aplicación de una sola página (SPA) es una aplicación compuesta por componentes individuales, que se cargan en la memoria en una visita a la primera página y luego se pueden reemplazar o actualizar de forma independiente, por lo que no es necesario recargar toda la página web. en cada acción del usuario.

Además, con los SPA, los componentes se pueden reutilizar y, por lo tanto, la cantidad de código necesario se reduce drásticamente. La primera aplicación de una sola página se implementó en 2002, con JavaScript como uno de los idiomas de destino para la implementación. El éxito de las aplicaciones de una sola página se debió principalmente a la tecnología AJAX anterior y su precedencia en la comunicación del servidor.

La relación JavaScript-HTML

HTML puede funcionar como un complemento de JavaScript, como con jQuery; o como una sintaxis similar a HTML integrada que se compila en elementos HTML. Un ejemplo de esto es la sintaxis JSX, recomendada para usar cuando se desarrolla con React. No es JavaScript puro ni HTML, sino una fusión de ambos. Entonces, fundamentalmente, integrando la creación de elementos básicos y la funcionalidad estructural de HTML con las capacidades dinámicas de JavaScript.

Relación CSS-HTML

CSS se usa comúnmente en combinación con JavaScript. Un formato de ejemplo tradicional es implementar propiedades CSS en archivos .css separados. El otro formato es integrar CSS en los propios marcos de JavaScript, a través de bibliotecas especializadas como CSS-in-JS y componentes con estilo. Estas bibliotecas permiten a los desarrolladores escribir código JavaScript que da estilo a los elementos visuales con una sintaxis similar a la de CSS, que luego se suele compilar en CSS puro en el navegador.

El surgimiento de una implementación del lado del servidor de JavaScript

Finalmente, 2009 llegó con el lanzamiento de Node.js, una implementación de JavaScript del lado del servidor. Node.js extendió el dominio de JavaScript al back-end, lo que permitió que JavaScript se convirtiera en un lenguaje de pila completa.

Node.js es actualmente el entorno de tiempo de ejecución de JavaScript más empleado, utilizado para ejecutar código JavaScript fuera del entorno del navegador web. Utilizado para la funcionalidad del lado del servidor, los creadores de Node.js tenían como objetivo desarrollar una alternativa más eficiente al entonces popular servidor Apache HTTP (a menudo usado con PHP). Node.js se creó con el motor JavaScript V8 de Google, que a su vez se creó con C++.

Marcos JavaScript front-end

Ya que hemos sentado las bases, ahora podemos colocar los ladrillos y profundizar en las razones de nuestra inclinación por React.js.

Marcos versus bibliotecas

Un argumento común es lo que califica como una biblioteca cuando se habla de este trío de JavaScript. Irónicamente, React se conoce ocasionalmente como una biblioteca y, en otras ocasiones, como un marco. Sin embargo, para mayor claridad y consistencia, a menudo es útil separar los marcos de las bibliotecas.

En particular, una biblioteca es una colección pasiva de recursos no volátiles donde los desarrolladores tienen control sobre cómo usar los recursos. Por lo general, son muy simples y solo realizan una determinada tarea, por lo que pueden clasificarse como herramientas.

Mientras que los marcos están diseñados para ser menos pasivos y obligar a los desarrolladores a hacer las cosas de cierta manera al utilizar un esqueleto para fines de desarrollo y hacer cumplir un flujo de control. Por ejemplo, a un desarrollador se le proporciona una forma definida de desarrollar y configurar una aplicación web completa. Mientras que una biblioteca de aplicaciones web no lo hace, en su lugar proporciona operaciones de subdominio más simples, como solicitudes de red u operaciones de estilo.

Aunque Vue y Angular se consideran marcos técnicamente, todavía existe cierto desacuerdo sobre si React es un marco o una biblioteca. Si bien los desarrolladores originales de React se refieren a él como una biblioteca, todavía se usa más comúnmente como marco.

¡Por qué React es la alternativa dominante!

En retrospectiva, React se desarrolló como un puerto JavaScript de XHP (una biblioteca PHP creada por Facebook). En general, XHP era una modificación de PHP que permitía la creación de componentes personalizados y tenía como objetivo evitar ataques de usuarios malintencionados. Más tarde, a partir de este proyecto de portabilidad de JavaScript, creció JSX (JavaScript XML), que se convirtió en un lenguaje estándar común para React.

A fin de cuentas, React tiene un alcance más limitado que sus pares, solo representa la interfaz de usuario de la aplicación. Sin embargo, mantiene el beneficio de una estructura liviana y, por lo tanto, es menos costoso de aprender y usar. Dicho esto, todavía se puede considerar un marco, ya que se usa para el mismo propósito que Vue y Angular.

Capacidades superiores de DOM virtual.

React fue el primer marco en optimizar su funcionalidad de acuerdo con el DOM. Este fue un factor que contribuyó a su éxito, ya que la manipulación del DOM es bastante costosa en términos de recursos informáticos utilizados. Específicamente, React fue diseñado para realizar la menor manipulación de DOM posible al emplear una gestión de estado intuitiva y el DOM virtual para controlar esta manipulación.

Esta explotación del DOM virtual hace que la actualización de React sea más rápida, a expensas de consumir más memoria. Y para ejecutar actualizaciones rápidas del DOM del navegador, react mantiene una copia del árbol DOM virtual en la memoria, lo que consume memoria adicional. En consecuencia, la popularidad de React dio origen a numerosas bibliotecas derivadas como React Native para el desarrollo móvil.

Flujo de datos unidireccional

En React, los datos deben fluir hacia abajo y se denomina flujo de datos unidireccional. Si bien el enlace de datos bidireccional de Angular y Vue hace que el código sea más bonito y simple, React lo compensa con una capacidad de administración y un rendimiento superiores. Una ventaja notable en nuestro argumento.

Por qué React es mejor que Angular

Hagamos una comparación caso por caso para tener más contexto, ¿de acuerdo? Diseñado para el desarrollo de aplicaciones más grandes, Angular es un marco de JavaScript más completo, en términos de características de programación y tamaño de archivo.

Sin embargo, en comparación con React, Angular tiene características negativas de hinchazón, complejidad y estilo pesado de desarrollo. Se recomienda para proyectos de desarrollo más pequeños y se menciona que tiene una curva de aprendizaje pronunciada. Para empeorar las cosas, AngularJS ya no está en desarrollo activo.

Angular está construido completamente en TypeScript y requiere mucho código, lo que lo hace un poco complicado. Por el contrario, React es bastante “simple” y su orientación original se centra en controlar y manipular la vista. Esencialmente, le permite al desarrollador seleccionar exactamente lo que necesita, pero también aprovecha la capacidad de usar una gran cantidad de paquetes de terceros. Entonces, en consecuencia, React no incluye muchos gastos generales en comparación con Angular.

Por qué React es mejor que Vue

Vue.js fue creado por el empleado de Google, Evan You. Evan se inspiró en AngularJS, pero quería crear una versión mejorada y más optimizada. A pesar de sus atributos ligeros, gran rendimiento y buen estilo de programación, el aspecto negativo de Vue es su torpeza. Aquí es donde se muestra la superioridad de React.

Por ejemplo, no existe una mejor práctica clara en Vue.js en contraste con React, lo que puede dificultar el mantenimiento de las principales aplicaciones. Sin embargo, las mejores prácticas para React se encuentran en la comunidad. Por ejemplo, la creación de un flujo de trabajo viable se habilita a través del paquete oficial create-react-app. Debido a los puntos anteriores, React proporciona adecuadamente la capacidad de escribir y mantener una gran cantidad de código complejo.

Sintaxis ES6

Además, los desarrolladores también pueden utilizar la sintaxis de ES6 con Vue; sin embargo, React tiene un diseño más óptimo que Vue en este sentido. Si bien Vue actualmente ofrece compatibilidad con TypeScript, su compatibilidad no está tan pulida como React usando CRA (Crear aplicación React) con compatibilidad con TS en un solo comando. Además, con Vue, todavía necesitamos algunos paquetes de terceros con decoradores y características personalizados para crear una aplicación TypeScript verdadera y completa. Y desafortunadamente, la documentación oficial no brinda toda la información requerida para comenzar. ¡Otra ventaja de React!

A medida que consolidamos nuestro argumento, analicemos aún más la discusión usando ciertos puntos de referencia más claros.

1. Tamaño del marco

Si bien es poco probable que el tamaño del paquete minificado de un marco en el registro npm desanime o aliente a cualquier desarrollador a seleccionar el marco, aún puede ayudar a nuestro argumento. Angular es notablemente un poco más grande que el resto (187,6 kB), mientras que React tiene 6,4 kB y Vue se encuentra en algún punto intermedio, con 63,5 kB.

En general, la comparación del tamaño del paquete muestra que Angular admite y contiene una mayor variedad de funciones, mientras que React está diseñado para un desarrollo más optimizado. Por lo tanto, la naturaleza de React le da al desarrollador menos opciones para mejorar la eficiencia, lo que es útil para proyectos más pequeños.

Además, la estructura complicada de Angular genera un riesgo potencial de rendimiento deficiente en comparación con React o Vue, especialmente para la asignación de memoria.

2. Experiencia de desarrollo, curva de aprendizaje y disponibilidad

En términos generales, TypeScript no es en sí mismo mucho más difícil o más fácil de aprender que JavaScript. Sin embargo, no se usa tanto y contiene menos bibliotecas y documentación general que JavaScript. Estos factores, combinados con las diferencias en la sintaxis y el tiempo que lleva acostumbrarse a codificar en una variación ligeramente diferente de JavaScript, brindan una ligera ventaja a React sobre Angular.

3. La situación basada en el lenguaje

Otro punto clave es que React y Vue utilizan JavaScript ES6 como lenguaje de base. ES6 es el estándar de la industria de JavaScript más nuevo de 2015. Por otro lado, Angular 1 aprovecha JavaScript ES5, que es la versión anterior, mientras que Angular 2 se basa en TypeScript.

Aunque TypeScript permite a los desarrolladores deshacerse del formato de programación JavaScript tradicional, tiene comunidades de usuarios limitadas. Esto significa que existe un riesgo potencial de que TypeScript desaparezca si aparece otro nuevo superconjunto estricto sintáctico de JavaScript. Al contrario, JavaScript ES6 no desaparecerá pronto porque es el criterio actual de la industria a la hora de desarrollar en JavaScript.

4. Documentación

Con toda honestidad, la disponibilidad de documentación es satisfactoria para todos estos marcos. Dicho esto, cabe destacar que la documentación de React está disponible en la mayor cantidad de idiomas (16). Vue se queda atrás, con documentación en 8 idiomas, mientras que la documentación de Angular está disponible en 4 idiomas. La documentación de React es coherente y ha unido la teoría en la entrega para diferentes desarrolladores.

Desafortunadamente, la situación del marco de Angular puede presentar algunas dificultades para un desarrollador, ya que se divide entre AngularJS y Angular 2. Además, el término "Angular" a veces puede parecer ambiguo en cuanto a a qué marco se refiere en contextos en línea. Especialmente al navegar por sitios más pequeños y respuestas más cortas.

5. Apoyo a la comunidad

En su mayor parte, podría decirse que React tiene el soporte comunitario más grande actualmente entre todos los marcos de JavaScript. Esto se ejemplifica por la amplitud de sus foros de discusión y salas de chat. Además, los usuarios pueden seguir las últimas noticias y participar en la discusión en Facebook y Twitter.

Svelte Framework (Mención de honor)

Pensamos que sería prudente mencionar una entrada relativamente nueva en la esfera de JavaScript. Desarrollado por Rich Harris y lanzado inicialmente en 2016, Svelte ganó una gran popularidad a lo largo de 2019. Introdujo varias mejoras en JavaScript, como cambios en el manejo del estado local.

También vale la pena señalar que Svelte no tiene un DOM virtual y convierte el código escrito en JavaScript en el momento de la compilación, en lugar del momento de la ejecución. Esencialmente, elude la conversión de elementos declarativos al DOM real.

Resumen

Aunque Vue tiene un poco más de estrellas de Github, React sigue siendo superior sin debilidades perceptibles y mejores fortalezas de rendimiento. En esencia, un mejor rendimiento significa menores tiempos de carga y una mayor satisfacción del usuario. Además, para los sitios web comerciales, esto se traduce en un aumento de los ingresos, ya que una reducción del tiempo de carga de un par de milisegundos puede aumentar la interacción y la retención del usuario.

En última instancia, el futuro del panorama del marco de JavaScript es difícil de predecir. Aunque, como sugiere la evidencia, es probable que React siga siendo el marco dominante en el futuro previsible. Sin embargo, para los desarrolladores que buscan desarrollar aplicaciones utilizando un marco maduro y bien soportado con un gran rendimiento y mucha documentación, ¡React es la mejor opción!