¿Cuáles son los pros y los contras de React.js y Flux? ¿Son el futuro del desarrollo front-end?

En general, ReactJS con un patrón de flujo me da excelentes resultados. Realmente no creo en la terminología de Flux, pero me gusta el patrón.

Cuando escribí mis primeros componentes ReactJS, usé un patrón muy simple, un patrón que uso a menudo en Angular. Cada acción interactúa con un modelo central que manipula datos que luego se pasan en una dirección a través de los componentes ReactJS.

Ventajas de ReactJS con un patrón tipo Flux:

1. El uso de React y JSX obliga a los desarrolladores a ser muy declarativos. Esto casi siempre es bueno.
2. Mantener toda la manipulación de datos alojada en un nivel no relacionado con React significa que puede cambiar la vista para que sea lo que quiera. Esto puede ser particularmente poderoso con un backend de nodo.
3. La representación de los componentes de reacción es REALMENTE rápida. La manipulación del DOM se minimiza sin que el desarrollador tenga que pensarlo. En comparación con AngularJS, donde cosas como ngRepeat pueden ejecutarse fácilmente.
4. ReactJS juega bien con los demás. Reemplacé un componente angular de rendimiento horrible con un componente ReactJS rápido y mucho más fácil de entender en poco tiempo.

Contras:

1. ReactJS utiliza algunos patrones realmente buenos. Patrones que ya usé pre-ReactJS. Esto facilitó el aprendizaje. Para un desarrollador de interfaz web junior, ReactJS podría ser un punto de partida difícil.
2. Encuentro la documentación escasa y una pizca de elitismo en tono. Principalmente me encuentro mirando la fuente cuando tengo preguntas.

ReactJS + FLUX (en mi 0pinion)

Pros

• La interfaz de usuario procesada por el navegador es muy rápida, pero no la más rápida. Algunas pruebas han demostrado que la próxima versión de Angular 2 es 2–3 veces más rápida, mientras que la versión real de Angular 1 puede lograr un rendimiento similar (cuando se codifica correctamente)
• Obliga a un conjunto de prácticas de codificación, solo hay una forma de lograr y hacer que el trabajo sea una IU, hace que la parte rápida del punto anterior sea ventajosa: he visto muchos proyectos de AngularJS extremadamente lentos porque codificados incorrectamente, y en Angular, hay muchas formas de hacerlo mal, y muy pocas de hacerlo bien, mientras que la arquitectura React / Flux aplica la forma correcta por diseño
• Representación del lado del servidor. Mientras que tradicionalmente la mayoría de los frameworks JS arrancan en el navegador, de hecho, están diseñados solo para crear aplicaciones web y no sitios web (principalmente debido al SEO, los motores de búsqueda no tienen nada que analizar, solo una página vacía y no pueden indexarla correctamente) . Flux permite renderizar ReactJS en el servidor, y así construir un sitio web tradicional con él. Esto significa que una vez que se carga la página, su sitio web se comportará como una aplicación web, y será ultrarrápido en comparación con una página representada en PHP / ASP / Cualquier servidor tradicional. Cuando me refiero a súper rápido, diré probablemente 10–20 veces más rápido.
• Aplica el uso de ES6 y ES7, y esto es muy bueno en comparación con ES5. (Opinión personal aquí)
• Reaccionar nativo
• Ágil amigable con el medio ambiente

Contras

• Un montón de código repetitivo. Cuando me refiero a lotes, me refiero a dolor en los lotes de $% ^. Con ReactJS, debe volver a crear todas las especificaciones HTML por su cuenta, programar botones, enlaces, todo desde cero, en lugar de usar etiquetas básicas . Además, el patrón FLUX hace que sea tedioso escribir interacciones muy básicas con un punto final REST. Para compararlo con Angular, por ejemplo, para diseñar una aplicación TODO simple, con react probablemente escribirás 4 veces más javascript para lograr el mismo resultado que una aplicación Angular. Significa que, en cuanto al tiempo, tardará 6 veces más. 30 minutos en angular, 2 horas en reacción.
• Desarrolladores de ReactJS: son extremadamente obstinados, la mayoría de los desarrolladores de React son fanáticos de React Boys. Para ingresar al equipo, debe afirmar que cualquier otro marco JS es una basura, lo que me parece muy infantil e intelectualmente limitado.
• Demasiadas implementaciones de FLUX, solo unas pocas permiten interacciones de múltiples tiendas.

¿Es el futuro de la web? Definitivamente no. Tenía su exageración, contribuyó a la idea de una mejor práctica de codificación JS con ES6–7. Con la próxima generación de frameworks JS, será posible lograr el mismo rendimiento que React con 5 veces menos código para escribir.

Aquí hay muchas buenas descripciones, y creo que la mayoría de los comentarios sobre React dieron en el blanco. Solo quería ampliar un poco el flujo, ya que otros comentarios solo tocan el flujo brevemente.

Como otros han señalado, React está basado en estado y es modular. Esto significa que puede componer fácilmente una interfaz de usuario a partir de bloques de construcción (componentes) reutilizables, y en lugar de representar de forma declarativa la interfaz de usuario y manejar las interacciones DOM, React hace esto automáticamente al diferenciar el estado que tiene. Esto es ENORME en términos de mantenibilidad y arquitectura limpia. He estado creando aplicaciones JS desde Backbone.js v0.1, así que las he visto todas. Ninguno me ha funcionado tan bien como React.

La parte adhesiva es el flujo. Muchas personas que entran en React se atascan en este punto. Ha habido tantas implementaciones de flujo, y tantas opiniones, que durante mucho tiempo fue realmente difícil elegir una biblioteca de flujo que satisfaga adecuadamente mis necesidades. Recomiendo mucho NuclearJS.

La clave para cualquier buena implementación de flujo es la inmutabilidad. Facebook creó Immutable.js por este motivo. Cuando flux se usa correctamente, se convierte esencialmente en una base de datos front-end que refleja un poco la base de datos en el servidor. NuclearJS utiliza la excelente API de Immutable.js para lograr muchas características potentes que otras implementaciones de flujo no tienen. A saber, el concepto de “captadores” como lo expresa el equipo de manera optimista.

Esencialmente, su componente React observa una función (el captador) que es una transformación basada en los datos de sus tiendas. Los resultados calculados de la transformación se almacenan en caché y solo se vuelven a calcular cuando cambian los datos subyacentes en la tienda. Lo creas o no, esta característica ingeniosa solucionó tantas pesadillas arquitectónicas que tuve con cualquier otra biblioteca de flujo que probé.

Archivo que contiene sus captadores (getters.js):

  / *
  * Las matrices de cadenas son cómo se accede a los datos desde
  * Immutable.js (en qué se basan las tiendas nuclear-js)
  * /
 export.users = ['usuarios'] 
 exportaciones.currentUserId = ['currentUserId']

 / *
  * Los datos de varias tiendas se pueden combinar en un 
  * expresión única como esta
  * /
 export.currentUser = [
   export.currentUserId,
   exportaciones.usuarios,
   (id, usuarios) => {
	 return users.get (id) ||  toImmutable ({});
   }
 ]
 export.feedback = ['comentarios']

 / *
  * Incluso puedes ir más allá y anidar expresiones
  * para obtener resultados más complejos. 
  * Si algún dato cambia en una de las tiendas subyacentes
  * que componen esta expresión compleja, será
  * recalculado, de lo contrario, devuelve el cálculo previo
  * resultado. 
  * /
 exportaciones.currentUserFeedback = [
   export.currentUser,
   exportaciones.alimentación,
   (usuario, comentarios) => {
     return feedback.filter (f => {
	   return feedback.get ('user_id') === user.get ('id');
	 });
   }
 ]

Componente de reacción escuchando a un getter:

  var reactor = require ('./ reactor') // instancia NuclearJS
 var Getters = require ('./ getters')
 var Reaccionar = requerir ('reaccionar')

 module.exports = React.createClass ({
   mixins: [reactor.ReactMixin],
   getDataBindings () {
     regreso {
       currentUserFeedback: Getters.currentUserFeedback
     }
   },
   render () {
     let {currentUserFeedback} = this.state;
     regreso (
       {currentUserFeedback.map (f => {
           return 
 {f.get ('contenido')} 
         })
       }
     )
   }
 });

Este patrón definitivamente supera la posibilidad de escuchar un solo evento de cambio por tienda, y luego tener que hacer toda la lógica de combinar datos de múltiples tiendas en una sola interfaz de usuario.

Tomé esto como parte del aprendizaje y rediseñé mi sitio web usando ReactJS, NodeJS y Express el año pasado. Para abordar el SEO, utilicé el renderizado del lado del servidor (javascript isomorfo). Hay un par de cosas que descubrí durante este desarrollo.

Proyecto: https://www.ajaxtown.com

1. Hacer animaciones con React es un desafío.
2. El enrutador de reacción no le permite pasar parámetros. Quería pasar un nombre de método.
3. Si tiene muchos componentes secundarios anidados y desea pasar información del décimo hijo a su padre superior, debe viajar mucho. Flux ayuda a evitar esto.
4. Entregar Captcha fue un poco difícil, pero finalmente lo logró.
5. Si su interfaz de usuario es masiva y está utilizando muchas bibliotecas de nodejs, luego de usar browserify en su App.js, el script resultante se vuelve realmente grande. Para mí después de la minificación, se redujo a 700kb. Así que tuve que eliminar algunas bibliotecas y codificarlas manualmente para reducirlo a 250 kb.

Además, a veces es difícil manejar todo de forma asincrónica. Pero con las nuevas promesas, las cosas son mucho más fáciles. Definitivamente hay una curva de aprendizaje decente para esto. Pero una vez que te acostumbras, ¡es DOPE!

Pros y contras de React.JS

El mundo está cambiando a diario, es difícil dedicar su tiempo a aprender nuevos marcos, especialmente cuando el marco se está convirtiendo en un punto muerto. React abre un mundo de nuevas posibilidades, como la representación del lado del servidor, actualizaciones en tiempo real, diferentes objetivos de representación como iOS, Android y muchos más.

¿Qué es el reactivo?

React (a veces denominado React.js o ReactJS) es una biblioteca Javascript creada por una colaboración de Facebook e Instagram. Permite a los desarrolladores crear interfaces de usuario rápidas. Las vistas de reacción generalmente se representan utilizando componentes que contienen componentes adicionales especificados como etiquetas HTML personalizadas. Una de las características únicas de React.js es que no solo puede funcionar en el lado del cliente, sino que también se puede representar en el lado del servidor y pueden trabajar juntos de forma interoperable .

También utiliza el concepto llamado DOM virtual, crea una caché de estructura de datos en memoria, enumera las diferencias resultantes y luego actualiza el DOM visualizado del navegador de manera eficiente. Esto permite al programador escribir código como si la página completa se procesara en cada cambio, mientras que las bibliotecas React solo representan los subcomponentes que realmente cambian.

Cada marco tiene sus propias ventajas y desventajas. Veamos los principales pros y contras de React.js.

EL BUENO:
React.js es extremadamente eficiente : React.js crea su propio DOM virtual donde sus componentes realmente viven. Este enfoque le brinda una enorme flexibilidad y una increíble ganancia de rendimiento. React.js también calcula cuáles son los cambios necesarios para realizar en DOM. Este proceso de React.js evita costosas operaciones DOM y realiza actualizaciones de una manera muy eficiente.

Facilita la escritura de Javascript: React.js utiliza una sintaxis especial llamada JSX, que le permite mezclar HTML con Javascript. El usuario puede soltar un poco de HTML en la función de renderizado sin tener que concatenar cadenas, esta es otra cosa fantástica. React.js convierte esos bits de HTML en funciones con un JSXTransformer especial.

Le brinda herramientas de desarrollo listas para usar : cuando comience su viaje con React.js, no olvide instalar la extensión oficial de Chrome de React.js. Facilita la depuración de su aplicación. Después de instalar la extensión, tendrá una mirada directa al DOM virtual como si estuviera explorando un árbol DOM normal en el panel de elementos. ¿No es asombroso?

Es increíble para SEO : uno de los mayores problemas con los marcos de Javascript es que no son compatibles con los motores de búsqueda. Aunque ha habido algunas mejoras en esta área, los motores de búsqueda generalmente tienen problemas para leer aplicaciones pesadas de Javascript. React.js destaca entre la multitud porque puede ejecutar React.js en el servidor, y el DOM virtual se representará en el navegador como una página web normal.

Casos de prueba de IU: es extremadamente fácil escribir casos de prueba de IU porque el sistema DOM virtual se implementó completamente en JS.

EL MALO:
* React.js es solo una capa de vista.
* La integración de React.js en un marco MVC tradicional como los rieles requeriría alguna configuración (es decir, sustituir erb con React.js).
* Hay una curva de aprendizaje para principiantes que son nuevos en el desarrollo web.

POR QUÉ DEBE USAR REACT.JS:
* React.js funciona muy bien para los equipos, ya que impone una fuerte interfaz de usuario y patrones de flujo de trabajo.
* El código de la interfaz de usuario es legible y mantenible.
* Y también, ahora hay mucha demanda de desarrolladores con experiencia en ReactJS.

Pros y contras de angularjs

La primera ventaja de AngularJS es que Google lo desarrolló. Por lo tanto, puede estar seguro de que el código es confiable y eficiente. Este marco fue construido por una comunidad de desarrolladores dedicados y no por una comunidad de aficionados aficionados, como fue el caso con varios otros marcos. AngularJS es mantenido por un grupo muy grande de ingenieros de Google y, aunque es posible que no tenga acceso a un gran grupo de ingenieros para aclarar sus dudas y publicar sus consultas, tiene la ventaja de obtener la orientación de ingenieros altamente calificados y talentosos.

Comenzar es increíblemente fácil

Comenzar y usar AngularJS es increíblemente fácil. En realidad, puede agregar algunos atributos a su HTML y obtener los beneficios de una aplicación Angular simple en hasta cinco minutos. Puede usar atributos HTML para acceder a las directivas de Angular S.

Enlace de datos bidireccional

Es posible hacer un enlace de datos bidireccional con AngularJS, lo que significa que puede realizar cambios relacionados con los datos e inmediatamente se propagaría a las vistas correspondientes y, cuando se realiza cualquier cambio en la vista, eso también ocurriría en el modelo subyacente. . Tan pronto como cambien los datos de la aplicación, también habrá cambios correspondientes en la interfaz de usuario.

Uso de directivas personalizadas

Para muchos desarrolladores, las directivas AngularJS son una ventaja personal. Si ha deseado un navegador que le haga un par de trucos, como crear etiquetas HTML personalizadas o decorar elementos con comportamiento, entonces Angular JS lo hace posible. Además, también puede manipular los atributos DOM de varias maneras emocionantes.

Inyección de dependencia

La inyección de dependencia incorporada es algo que la mayoría de los desarrolladores adoran de AngularJS. Esta característica les ayuda a desarrollar, probar y comprender aplicaciones de una mejor manera. Con la función DI, ya no tiene que buscar dependencias, o hacerlas usted mismo, sino que se creará y presentará ante usted. Para asegurarse de tener las características principales de AngularJS, simplemente puede agregar ese parámetro y personalizarlo también.

Marco MVC del lado del cliente con Angular JS

El marco MVC del lado del cliente es importante cuando comienza a trabajar con HTML y datos en su página. Los marcos MVC son herramientas que lo ayudarían a administrar las interacciones de la página web y las colecciones de datos. Angular JS proporciona la mejor “solución ligera” para crear un equilibrio entre la lógica del cliente y el servidor. Además de las otras ventajas mencionadas anteriormente, como el enlace de datos bidireccional y la inyección de dependencia, AngularJS le permite escribir rápidamente aplicaciones web del lado del cliente mediante el uso de los principios básicos en los patrones de diseño de software MVC también. Aunque no puede utilizar el marco MVC en el sentido tradicional, puede hacerlo en el modelo MVVM. El modelo MVVM significa Modelo-Vista-Vista-Modelo. Aquí Modelo significa los objetos o datos de JavaScript en la aplicación.

El lado malo de AngularJS

AngularJS tiene un lado no tan popular. Vamos a explorar eso:

Las bibliotecas deben ser específicas de AngularJS

La mayoría de los desarrolladores sienten que AngularJS aumenta el tiempo de prueba considerablemente y esto a su vez afectó el tiempo de construcción. El marco no funciona muy bien con herramientas o bibliotecas que no son específicas de AngularJS. Si desea probar aplicaciones ricas de una sola página que tienen varias iteraciones de JavaScript repartidas en las páginas, es posible que tenga que usar dos pilas de prueba diferentes. Pero los desarrolladores no lo aconsejan.

Naturaleza del marco AngularJS

Los desarrolladores dicen que el marco AngularJS tiene su propia visión específica del mundo, y las personas que van a usar este marco tendrían que aceptar su forma de hacer las cosas. Aunque los marcos son útiles para ayudarlo a generar ese MVP (producto mínimo viable), aún tiene que garantizar su mantenimiento. La única forma de trabajar con AngularJS es aceptar sus términos. Solo puede usar una herramienta que esté dentro de su ecosistema, por lo tanto, eso hace que la biblioteca JS sea muy restringida.

Además, tendrá que estar al tanto de cualquier pérdida de memoria en JS, porque si hay una, conduciría a navegadores lentos, por muy poderoso que sea su sistema. AngularJS no es compatible con versiones anteriores de Internet Explorer 8.0.

El marco es complicado

Algunos desarrolladores dicen que el marco es demasiado complicado y, a menos que tenga mucha experiencia, no es posible usarlo. Debe estar al tanto de lo que está sucediendo en la interfaz para leer el código.

Conclusión

Aun así, Angular JS sigue siendo el marco más utilizado popularmente. Puede tener problemas, pero esos son problemas “reparables”. Quizás, a los desarrolladores les gusta usar Angular JS porque les permite fragmentar su lógica en módulos, haciendo que los códigos sean más granulados.

Solo podría responder sobre los pros y los contras de ReactJS (de https://www.cleveroad.com/blog/r …)

¿Por qué ReactJS?

A diferencia de Angular, ReactJS es una biblioteca de código abierto basada en JavaScript con un compilador JSX. Se centra principalmente en la interfaz de usuario, lo que permite crear componentes de vistas de interfaz de usuario reutilizables.

Al usar React, siempre debe recordar que no es un marco MVC más, sino solo una biblioteca para representar sus vistas. De esta manera, React es una solución centrada en la interfaz, ya que sus usuarios obtienen una interfaz altamente receptiva con una carga suave.

¿Cómo se hizo popular?

• Facebook respalda este proyecto
• Las soluciones ReactJS son compatibles con SEO
• El rendimiento y la flexibilidad de ReactJS son altos

Sitios web famosos de ReactJS: Netflix, Feedly, Airbnb, Walmart

Ahora, consideremos por qué ReactJS puede ser útil para ciertas necesidades en nuestra opinión.

Reacciona pros y contras por Cleveroad

Flux es excelente para tener una base de código mantenible a largo plazo.

CONTRAS: He enseñado a pocas personas para React + FLUX y existe un alto costo cognitivo para comprenderlo.

PROS: Lo bueno es que cuando captas la idea, entonces BUM todo se ve tan limpio y fácil de mantener 🙂

Eche un vistazo a este kit de inicio de React + FLUX de código abierto: przeor / react-router-flux-starter-kit puede ser muy útil si planea comenzar a aprender react + FLUX 🙂

Tanto React como Flux solo patrones que ayudan a evitar problemas de cambio de estado en su software. No tienen nuevas ideas revolucionarias, pero utilizan principios funcionales de programación reactiva que fueron descubiertos e implementados en lenguajes de programación reales hace un tiempo.

El futuro del desarrollo front-end es lenguajes de programación que podrían hacer que la computadora (compilador) esté al tanto de lo que hace su código. Es en lo que los científicos informáticos están trabajando y es por eso que los lenguajes de programación funcional se hicieron cada vez más populares.

Estamos en Ramotion constantemente experimentando con diferentes tecnologías de front-end y actualmente trabajando en una aplicación basada en la web que usa el lenguaje de programación Elm, esperamos que sea de código abierto en nuestro github pronto

Durante los últimos 2 años, he escuchado muchas charlas sobre todos los diversos ‘nuevos’ técnicos: Angular, Ember, Backbone, etc. El hilo común es que todos tenían pros y contras.

Sin embargo, últimamente, escucho una impresión general más positiva de React que la que tengo de cualquiera de sus predecesores. Mi opinión es que la gente está más contenta con React y es más potencial que cualquier otra cosa en este momento.

Aquí hay un gran blog sobre React vs Angular: llegando a reaccionar desde Angular

Mira esto
ReactJS para gente estúpida
La página web tiene una explicación completa de lo que es ReactJS y sus beneficios.

Hola, para simplificarlo, solo visita el enlace:
¿Qué es Reactjs y por qué comencé a usarlo?

Hola

Tiene muchos pros y contras propios. Encontré este blog que explica las 5 cosas más esenciales sobre React Flux, puedes leerlo ahora y entender las ventajas y desventajas de React Flux de la mejor manera posible.

Gracias.

Espero que esto ayude 🙂