Por qué cambié de AngularJS a React

En 2011, cuando mi código comenzó a abarrotarse de selectores jQuery y devoluciones de llamada, AngularJS se convirtió en un salvavidas que ayudó a una mejor administración, un desarrollo rápido y mucha más funcionalidad lista para usar. El enlace bidireccional y la filosofía de "modelo como fuente única de la verdad" de AngularJS me sorprendieron y redujeron la redundancia de datos en toda mi aplicación.

Sin embargo, con el tiempo, descubrí que AngularJS tiene sus propios puntos débiles. Eventualmente, esto me causó tanta frustración que comencé a buscar soluciones alternativas.

Puntos de dolor en AngularJS 1.x

• DOM para ejecución

  Angular depende en gran medida del DOM para su flujo de ejecución. En el arranque predeterminado de las aplicaciones, escanea el DOM y lo compila con prioridades de directivas, lo que dificulta la depuración y la prueba del orden de ejecución.

• Su propia inyección de dependencia

  JavaScript no tiene un administrador de paquetes ni un solucionador de dependencias propio. Pero últimamente, implementaciones como AMD, UMD y CommonJS han resuelto muy bien este problema. Lamentablemente, AngularJS no es útil con ninguno de estos. Más bien, introduce una inyección de dependencia (DI) propia; aunque hay implementaciones no oficiales de AngularJS DI que usan RequireJS.

• La encuadernación bidireccional es un arma de doble filo

  Es tentador usar un enlace bidireccional, pero a medida que crece la complejidad de su componente, puede provocar un desastre de rendimiento.

  ¿Cómo afecta el enlace bidireccional al rendimiento? Bueno, JavaScript ES5 no tiene ninguna implementación para notificar cualquier cambio en sus variables u objetos, por lo que Angular usa algo llamado "verificación sucia" para rastrear los cambios de datos y sincronizarlos con la interfaz de usuario. La verificación sucia se lleva a cabo después de cualquier operación realizada dentro del alcance de Angular ($ ciclo de resumen), lo que conduce a un rendimiento más lento a medida que aumenta la cantidad de enlaces.

  Otro problema con el enlace bidireccional es que muchos componentes diferentes en la página pueden cambiar los datos, lo que lleva a múltiples fuentes de entrada de datos. Si no se maneja bien, puede conducir a una situación ambigua. Pero para ser justos, esto es puramente un problema de implementación.

• Angular tiene su propio mundo.

  Cada operación en Angular debe pasar por su ciclo de resumen o, de lo contrario, sus componentes no se sincronizarán con sus modelos de datos. Por lo tanto, si está utilizando una biblioteca de JavaScript existente de un tercero, debe envolverla con la función $apply de Angular si implica cambios de datos o deberá convertirla en un servicio si es una biblioteca de utilidad. Es como reinventar todos los módulos de JavaScript disponibles para Angular.

• Demasiados conceptos y una curva de aprendizaje empinada

  Aprender Angular requiere aprender una tonelada de conceptos que incluyen módulos, controladores, directivas, ámbitos, plantillas, funciones de enlace, filtros e inyección de dependencia.

Conoce Reaccionar

React, la nueva biblioteca JS de código abierto de Facebook e Instagram, es una forma diferente de escribir aplicaciones de JavaScript. Cuando se presentó en la JSConf EU en mayo de 2013, la audiencia quedó impactada por algunos de sus principios de diseño, como el "flujo de datos unidireccional" y el "DOM virtual".

El sitio web oficial de React dice: "React es una biblioteca de JavaScript para crear interfaces de usuario" y sí, solo interfaces y nada más. No es un marco como AngularJS. Pero puede escribir componentes autónomos que más o menos se comparan con las directivas angulares. vista rápida

React replantea las mejores prácticas en desarrollo web. Reach fomenta el flujo de datos unidireccional y cree en la filosofía de que los componentes son máquinas de estado impulsadas por datos. Mientras que a la mayoría de los otros marcos les gusta trabajar con el DOM y manipularlo directamente, React odia el DOM y trabaja para proteger al desarrollador de él. React proporciona solo la API básica que se necesita para definir cualquier componente de la interfaz de usuario y nada más. Reach sigue la filosofía de UNIX: lo pequeño es hermoso. Haz una cosa y hazla mejor.

Esta es una muy buena comparación entre los dos por Pete Hunt (del equipo de Instagram)

Es solo una biblioteca. ¿Necesitamos un framework con React?

Respuesta corta: tu elección.

Con React, puede crear interfaces de usuario, pero aún necesitamos administrar dependencias, realizar llamadas AJAX, aplicar filtros de datos. Si necesitamos un marco, ¿por qué abandonar AngularJS?

Los marcos son un conjunto de paquetes y un conjunto de reglas. ¿Qué pasa si no necesito algunos paquetes o quiero intercambiar con otro paquete? ¿Cómo lo hago? Necesitamos un administrador de paquetes. ¿Cómo gestionamos los paquetes en AngularJS? Esa es tu elección, pero Angular tiene su propio mundo. Deberá envolver cada paquete externo en el mundo de Angular y luego usarlo. Pero React es solo JavaScript, y cualquier paquete escrito en JavaScript no necesitará ninguna envoltura en React.

Entonces, es mejor si elegimos nuestros propios paquetes de un repositorio de paquetes como npm y los organizamos como queramos. La buena noticia es que React fomenta el uso de npm, que tiene muchos paquetes listos para usar. Para comenzar con React, puede usar uno de estos kits de inicio de pila completa

Ventajas de reaccionar

Entonces, ¿por qué realmente cambié a React?

¡Reaccionar es rápido!

React adopta un enfoque diferente al de otros marcos. No te permite trabajar con el DOM directamente. Más bien, introduce una capa de DOM virtual entre la lógica de JavaScript y el DOM real. Esto ayuda a mejorar la velocidad drásticamente. En renderizaciones sucesivas, React realiza una diferencia en el DOM virtual y actualiza solo la parte del DOM real que necesita ser actualizada.

El DOM virtual también ayuda a resolver problemas entre navegadores, ya que proporciona una API unificada entre navegadores que incluso funciona en Internet Explorer 8. (¡Uf!)

Todo es un componente (widget de interfaz de usuario)

Escribir componentes de interfaz de usuario autónomos modulariza su aplicación y separa las preocupaciones de cada uno de ellos. Cada componente se puede desarrollar y probar de forma aislada y, a su vez, utilizar otros componentes para aumentar la capacidad de mantenimiento.

¡Flujo de datos unidireccional para ganar!

Flux es una arquitectura para crear capas de datos unidireccionales en aplicaciones de JavaScript. Fue diseñado en Facebook junto con la biblioteca React view. Simplifica el desarrollo y facilita el seguimiento y la corrección de errores. Flux es más un concepto que una implementación. También se puede implementar en otros marcos. Alex Rattray tiene una muy buena implementación de Flux usando Backbone Collection y Model en React.

JavaScript y nada más

Las aplicaciones web modernas funcionan de manera diferente a la web tradicional. La capa Vista debe actualizarse con las interacciones del usuario sin tocar el servidor. Y, por lo tanto, View y Controller deben depender mucho el uno del otro. Muchos otros marcos usan motores de plantillas como Handlebars y Moustache para su capa de vista, pero React cree que las dos partes son tan interdependientes que deben residir en un solo lugar sin el uso de ningún motor de plantillas de terceros y sin salir del alcance de JavaScript.

JavaScript isomorfo

El mayor inconveniente de las aplicaciones web de JavaScript de una sola página es que tiene limitaciones cuando los motores de búsqueda las rastrean. React tiene una solución para esto. React puede prerenderizar aplicaciones en el servidor antes de enviarlas al navegador y también puede restaurar el mismo estado en la aplicación en vivo a partir del contenido estático prerenderizado del servidor. Dado que los rastreadores de motores de búsqueda dependen en gran medida de la respuesta del servidor en lugar de la ejecución de JavaScript, la representación previa de dichas aplicaciones ayuda en la optimización del motor de búsqueda.

React funciona bien con RequireJS, Browserify y Webpack

Los cargadores y empaquetadores son muy necesarios cuando crea una aplicación grande. Desafortunadamente, la versión actual de JavaScript no proporciona un paquete o cargador de módulos, aunque se propone en la próxima versión de EcmaScript 6 (System.import). Afortunadamente, tenemos algunas alternativas como RequireJS y Webpack, que son bastante decentes.

React está construido con Browserify, pero si está buscando inyectar activos de imagen y compilar LESS o CoffeeScript, entonces probablemente Webpack sea una mejor opción.

Cambié a React con algo de dolor.

• Dado que AngularJS es un marco, viene con muchas ventajas, que incluyen un envoltorio AJAX en el servicio $http, $q como servicio de promesa, ng-show, ng-hide, ng-class y ng-if como declaraciones de control. para plantilla.

• React no es un marco sino una biblioteca para construir la interfaz de usuario, por lo que debe pensar en todas las demás piezas por su cuenta. Estoy trabajando en un proyecto de código abierto que se puede usar con React para facilitar su desarrollo, y la comunidad también está contribuyendo activamente con componentes reutilizables similares.

  React-components.com es un sitio web de directorio no oficial donde puede encontrar dichos componentes de código abierto.

• La filosofía de React no lo alienta a usar el enlace bidireccional, lo que genera mucho dolor cuando se trata de elementos de formulario y cuadrículas de datos editables. Sin embargo, a medida que comienza a comprender el flujo de datos y las tiendas de Flux, las cosas se vuelven más claras, simples y fáciles.

React es nuevo, por lo que la comunidad tardará un tiempo en crecer.

Angular ha ganado una gran popularidad en los últimos tiempos y tiene una cantidad relativamente grande de extensiones disponibles como AngularUI y Restangular. La comunidad de código abierto de React es nueva, pero está creciendo rápidamente, con extensiones como React Bootstrap. Es solo cuestión de tiempo antes de que tengamos más componentes disponibles, y React se puede usar fácilmente para el desarrollo rápido de aplicaciones web.

Conclusión

Si ha usado AngularJS anteriormente, entonces puede odiar React al principio, principalmente debido a su flujo de datos unidireccional y la falta de "marco" en el que debe ocuparse de muchas otras cosas usted mismo. Pero tan pronto como te sientas cómodo con el patrón de diseño de Flux y la filosofía de React, te darás cuenta de su belleza.

Facebook e Instagram usan React. El nuevo Atom Editor de Github está construido usando React. El próximo Yahoo Mail se está reconstruyendo en React. ¿Qué otros ejemplos necesitas? Prueba React hoy.