DESARROLLAR UIs ES UNA ACTIVIDAD COMPLEJA
DESARROLLAR UIs IMPLICA ENFRENTAR MUCHAS DECISIONES
MANEJO DEL ESTADO
ESTADO !== DATO
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 // ✅
}INVÁLIDOS
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
ERROR
ERROR
OK
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 === "ERROR") {
// mostrar input con error
}
if (estado === "OK") {
// mostrar input validado
}VACIO
ERROR
OK
👉
👉
👉
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 un estado
- 👮♂️ GUARDS transiciones condicionales
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?
SI YA ESTAMOS ESCRIBIENDO
FSM IMPLÍCITAS,
¿POR QUÉ NO HACERLAS
EXPLÍCITAS?
👋 ¡GRACIAS!
Charla FSM
By Pablo Hoc
