XState

Loose Coupling, High Cohesion

(Bajo Acoplamiento, Alta Cohesión)

• Componentes Independientes
• Mas fácil comprender
• Menos Cambios = Menos "Bugs"
• SOLID
  • Single Responsibility (Responsabilidad Unica)
  • Open/Closed (Abierto/Cerrado)
  • Liskov Substitution (Sustitución de Liskov)
  • Interface Segregation (Segregación de la Interfaz)
  • Dependency Inversion (Inversión de la Dependencia)
• Flujo de Datos vs Flujo de Control

Flujo de Control

Flujo de Datos

Flux

• https://facebook.github.io/flux/
• Plantilla para gestionar el flujo de datos
• Los datos fluyen en una direccion!
  • Mas fácil comprender y debug porque sabemos de donde vienen los datos.
  • Menos bugs, porque hay mas control de los datos y como se cambian.
  • Mas Eficaz, porque es solo necesario actualizar componentes del sistema que dependen en los datos que han cambiado.

Flux

• Un view es una representacion de los datos que existen en un sistema.
• Un view se actualiza cuando hay un cambio de los datos.
• Los datos solo se cambian en respuesta a una accion (o evento).
• Los views pueden actualizar los datos solo atraves de una accion.
• Un view solo puede cambiar los datos directamente de los views hijos, nunca de los padres, ni de los hermanos.

Flux Diagrama

Redux

• Una implementación de Flux
• Dispatch
• Actions
• Reducers
• Stores
• connect() o useSelector en React
• Problemas:
  • "Boilerplate"
  • Tiendas pueden volverse muy desestructuradas
  • Codigo extendido por muchos archivos (baja cohesion)

XState

• https://xstate.js.org/docs/
• Autómata Finito o Maquina de Estado Finito
  • Límite de estados finito
  • Límite de eventos finito
  • Pasa de un estado a otro atraves de eventos
  • Solo puede estar en un estado
• Una implementación de Flux
  • Recibe eventos (Accionés) a traves del send() (Despachador), y puede actualizar su contexto (Tienda).
  • Todo organizado dentro de la definición de la maquina
  • Maquinas pueden invocar otras maquinas