DESARROLLAR UIs ES UNA ACTIVIDAD COMPLEJA

DESARROLLAR UIs IMPLICA ENFRENTAR MUCHAS DESICIONES

¿QUÉ ES EL ESTADO?

ESTADO !== DATO

 

🧉 MATE

🗃 DATOS

📷 ESTADOS

👉 SIN ARMAR

👉 CEBADO

👉 LAVADO

👉 ARMADO

👉 YERBA

👉 AGUA

👉 CEBADAS


 
Por favor, ingrese un email válido


 
Por favor, ingrese un email válido


 

{
  email: "",
  esValido: false, // 🚫
}
{
  email: "luke.s",
  esValido: false, // 🚫
}
{
  email: "",
  esValido: false, // 🚫
}
{
  email: "luke@gmail.com",
  esValido: true, // ✅
}

👈

👈


 


 
Por favor, ingrese un email válido


 
Por favor, ingrese un email válido


 

{
  email: "",
  esValido: false, // 🚫
  validado: false  // 🚫
}
{
  email: "luke.s",
  esValido: false, // 🚫
  validado: true   // ✅  
}
{
  email: "",
  esValido: false, // 🚫
  validado: true   // ✅      
}
{
  email: "luke@gmail.com",
  esValido: true, // ✅
  validado: true  // ✅   
}

👈

👈

👍

👍


 

ESTADOS POSIBLES

 
email.length > 0 0
esValido TRUE FALSE
validado TRUE FALSE

2 cantidad props

2 3= 8

ESTADOS

{
  email: "luke.s",
  esValido: false, // 🚫
  validado: false  // 🚫
}
{
  email: "luke.s",
  esValido: true,  // ✅
  validado: false  // 🚫
}
{
  email: "",
  esValido: true, // ✅
  validado: false // 🚫
}
{
  email: "",
  esValido: true, // ✅
  validado: true  // ✅
}

IMPOSIBLES

VALORES MUTUAMENTE EXCLUYENTES

{
  esValido: true,  // ✅
  validado: false  // 🚫
}
{
  email: "",  
  esValido: true   // ✅
}
{
  email: "luke@gmail.com",  
  validado: false  // 🚫
}

🛡 GUARDS

if (email.length === 0 && 
    !validado &&
    !esValido) {
  // mostrar el input normal    
}

if (validado && 
    !esValido) {
  // mostrar input con error
}

if (email.length > 0 &&
    validado && 
    esValido) {
  // mostrar input validado
}

APPROACH TRADICIONAL

👎 DESVENTAJAS

🚫

🤔 ¿Cómo mejorar esto?

EXPLÍCITO

 

ESTADO

IMPLÍCITO

 

ESTADO

VS


 
Por favor, ingrese un email válido


 
Por favor, ingrese un email válido


 

1


 

{
  email: "",
  esValido: false, // 🚫
  validado: false  // 🚫
}
{
  email: "luke.s",
  esValido: false, // 🚫
  validado: true // ✅  
}
{
  email: "",
  esValido: false, // 🚫
  validado: true // ✅      
}
{
  email: "luke@gmail.com",
  esValido: true, // ✅
  validado: true // ✅   
}

VACÍO

INVÁLIDO

INVÁLIDO

VÁLIDO

EXPLÍCITO

 

ESTADO

IMPLÍCITO

 

ESTADO

VS

if (email.length === 0 && 
    !validado &&
    !esValido) {
  // mostrar el input normal    
}

if (validado && 
    !esValido) {
  // mostrar input con error
}

if (email.length > 0 &&
    validado && 
    esValido) {
  // mostrar input validado
}
if (estado === "VACIO") {
  // mostrar el input normal    
}

if (estado === "INVALIDO") {
  // mostrar input con error
}

if (estado === "VALIDO") {
  // mostrar input validado
}

MAQUINAS DE ESTADO FINITO

FINITE STATE MACHINES

FSM

👉 tienen un ESTADO INICIAL

 

 

👉 TRANSICIONES entre estados

 

 

👉 un número finito de ESTADOS

 

 

👉 EVENTOS que disparan transiciones

 

 

👉 un número finito de ESTADOS FINALES

 

 

VENTAJAS DE LAS FSM

LIMITACIONES DE LAS FSM

EXPLOSION DE ESTADOS

STATECHARTS

FSM

+

 

🍄

=

  • 🏭 JERARQUÍA estados anidados
  • 🛤 ORTOGONALIDAD estados paralelos
  • 🏃‍♀️ ACCIONES al entrar y salir de una transición
  • 👮‍♂️ GUARDS transiciones condicionales
  • 📆 HISTORIA recordar el último estado visitado
  • ⏱ TRANSICIONES CON DELAY
 
 

STATECHARTS

PODERES ⚡️

¿CÓMO USARLOS?

const inputConValidacionMaquina = Machine(
  {
    id: 'inputConValidacion',
    initial: 'vacio',
    states: {
      vacio: {
        on: {
          escribir: "editando"
        }
      },
      editando: {
        on: {
          validar: "validando"
        }
      },
      validando: {
        on: {
          validacion_ok: "valido",
          validacion_error: "invalido"
        }
      },
      valido: {
        on: {
          escribir: "editando"
        }
      },
      invalido: {
        on: {
          escribir: "editando"
        }
      }
    }
  }  
)

CADA MÁQUINA TIENE UN ID

UN ESTADO INICIAL

UN CONJUNTO DE ESTADOS

TRANSICIONES A OTROS ESTADOS A PARTIR DE EVENTOS

¿SI SON TAN BUENOS POR QUÉ NO SE USAN?

YA ESTAMOS ESCRIBIENDO FSM IMPLÍCITAS, ¿POR QUÉ NO HACERLAS EXPLÍCITAS?

Made with Slides.com