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
{
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?
Charla FSM v2
By Pablo Hoc
