react reactjs angular redux rxjs ngrx

reactjs - Patrones de arquitectura alrededor de Angular2: Redux, Flux, React, Reactive, RxJS, Ngrx, MVI,



redux angular 4 (1)

Reaccionar frente a angular

React es solo una biblioteca para representar la vista, nada más, mientras que Angular es una plataforma completa. Aunque parezca que apuntan a diferentes problemas, generalmente ambos pueden elegir mientras trabajan en webapps.

¿Porqué es eso? Porque más a menudo piensas en React as React + whole ecosystem (enrutador, bibliotecas de formularios, administración estatal, etc.).

Flux y Redux

Puedes ver que Flux / Redux a menudo se asocia con React pero eso no es exactamente cierto. Flux y Redux son solo una idea de la administración del estado de la aplicación. Sin embargo, Redux (que es el más popular ahora) tiene su propia implementación, que ahora es una de las bibliotecas oficiales de React. También hay otras implementaciones de flujo .

Programación reactiva

Es un paradigma Te recomiendo encarecidamente que pases por esto . Es largo pero vale la pena.

RxJS y @ngrx

Angular utiliza transmisiones internas en el núcleo, por ejemplo, para gestionar la detección de cambios. De nuevo, las transmisiones son solo la idea, mientras que RxJS es una de las implementaciones de esa idea. @ngrx es un conjunto de ayudantes construido en la parte superior de RxJS. Uno de ellos es la implementación de administración estatal inspirada en Redux llamada @ ngrx / store .

MVI

Es un patrón arquitectónico (como MVC) para estructurar aplicaciones impulsadas por Cycle.js . Aquí hay una gran explicación de las arquitecturas UI unidireccionales de las que hablamos André Staltz, creador de Cycle.js .

Todos los nombres de estas bibliotecas / marcos comienzan con la letra R / N o un sonido muy similar; las irritaciones están garantizadas:

reaccionar / reducir | flujo | ngrx | @ ngrx / store | RxJS / ReactiveX | MVI | ....

¿Alguien puede ver a través de esta locura? Estoy tratando de aclarar, por favor ayúdenme, si me equivoco:

Redux es un "contenedor de estado predecible" para aplicaciones de JavaScript y una implementación liviana de Flux . ¿Puedo decir: es la implementación estándar de flujo para Angular2? (Pero también hay excelentes videos acerca de redux sin Angular2).

Flux es la arquitectura de aplicaciones que Facebook usa para construir aplicaciones web del lado del cliente. Complementa los componentes de vista composable de React (ReactJS) utilizando un flujo de datos unidireccional. Pero el flujo es solo un patrón, no una implementación.

React (ReactJS) es el principal competidor de Angular2 (angular.io) , aunque es más bien una gran biblioteca que un framework.

Reactive Extensions for JavaScript (RxJS) es una biblioteca de flujos reactivos que le permite trabajar con flujos de datos asincrónicos. Persigue los objetivos del Reactive-Manifesto.

Angular2 tiene sus propias extensiones reactivas y se llaman Ngrx - Extensiones reactivas para Angular2.

Luego hay algo como @ ngrx / store , que es la administración de estado con alimentación de RxJS inspirada en Redux para aplicaciones Angular 2. Oops-a-daisy!

Como alternativa a Flux, André Staltz presentó la arquitectura unidireccional Model-View-Intent (MVI) , basada en RxJS Observables, que utiliza como base para Cycle.js . Si bien Angular 2 tiene una forma de enlace de datos bidireccional, no prescribe una arquitectura de flujo de datos. Una de sus características de venta es ser independiente del patrón y que funcionará con una arquitectura MVC o Flux. Por lo tanto, depende de los desarrolladores elegir un patrón apropiado. >> Fuente