Otros recursos con ciclo de vida: un solo esqueleto para todos

Cuando alguien aprende el patrón del reproductor suele archivarlo como conocimiento sobre multimedia, y con eso pierde lo más valioso que había en él. El vídeo no es interesante por ser vídeo, es interesante por ser un recurso con ciclo de vida: algo que no existe hasta que lo pides, que tarda en estar disponible, que puede negarse, que consume memoria o batería o ancho de banda mientras lo sostienes, que puede degradarse sin desaparecer, y que hay que devolver de forma explícita porque nadie lo hará por ti. Esa descripción no menciona píxeles ni fotogramas, y describe igual de bien una conexión persistente, una descarga de un fichero grande, el acceso a la cámara del dispositivo, un trabajador en segundo plano o una suscripción a la posición del usuario. Todos comparten el mismo esqueleto porque todos plantean el mismo problema, y una vez lo reconoces, dejas de escribir cinco integraciones distintas y empiezas a instanciar una sola forma con cinco vocabularios.

El esqueleto invariante

Las seis posiciones se repiten con una regularidad que da vértigo la primera vez que se comprueba. sin_adquirir es antes de pedir nada, y es el único estado sin coste. adquiriendo cubre la latencia inevitable entre pedir y tener, que en unos recursos es de milisegundos y en otros incluye un diálogo con el usuario. listo es tenerlo sin usarlo todavía, la posición que casi todo el mundo olvida y que separa la disponibilidad del consumo. activo es el uso efectivo, el único estado que produce el valor que motivó todo. degradado es seguir teniendo el recurso pero en condiciones peores, y es la posición que distingue un modelo maduro de uno binario. liberado es haber devuelto el recurso de forma deliberada, que no es lo mismo que no haberlo pedido nunca.

import { setup, fromCallback, assign } from 'xstate'

type Hecho =
  | { type: 'ADQUIRIDO' }
  | { type: 'DENEGADO'; motivo: string }
  | { type: 'DEGRADADO'; motivo: string }
  | { type: 'RECUPERADO' }
  | { type: 'PERDIDO'; motivo: string }
  | { type: 'COMPLETADO' }

export const recurso = setup({
  types: {
    context: {} as { motivo: string | null; degradaciones: number },
    events: {} as Hecho | { type: 'PEDIR' } | { type: 'USAR' } | { type: 'SUSPENDER' } | { type: 'LIBERAR' },
  },
  actors: { fuente: fromCallback(() => () => {}) },
}).createMachine({
  id: 'recurso',
  initial: 'sin_adquirir',
  context: { motivo: null, degradaciones: 0 },
  states: {
    sin_adquirir: { on: { PEDIR: 'adquiriendo' } },
    adquiriendo: {
      invoke: { id: 'fuente', src: 'fuente' },
      on: {
        ADQUIRIDO: 'listo',
        DENEGADO: { target: 'liberado', actions: assign({ motivo: ({ event }) => event.motivo }) },
      },
    },
    listo: {
      invoke: { id: 'fuente', src: 'fuente' },
      on: { USAR: 'activo', LIBERAR: 'liberado' },
    },
    activo: {
      invoke: { id: 'fuente', src: 'fuente' },
      on: {
        SUSPENDER: 'listo',
        COMPLETADO: 'liberado',
        LIBERAR: 'liberado',
        DEGRADADO: {
          target: 'degradado',
          actions: assign({
            motivo: ({ event }) => event.motivo,
            degradaciones: ({ context }) => context.degradaciones + 1,
          }),
        },
        PERDIDO: { target: 'adquiriendo', actions: assign({ motivo: ({ event }) => event.motivo }) },
      },
    },
    degradado: {
      invoke: { id: 'fuente', src: 'fuente' },
      on: { RECUPERADO: 'activo', PERDIDO: 'adquiriendo', LIBERAR: 'liberado' },
    },
    liberado: { on: { PEDIR: 'adquiriendo' } },
  },
})

stateDiagram-v2
[*] --> sin_adquirir
sin_adquirir --> adquiriendo: PEDIR
adquiriendo --> listo: ADQUIRIDO
adquiriendo --> liberado: DENEGADO
listo --> activo: USAR
activo --> listo: SUSPENDER
activo --> degradado: DEGRADADO
degradado --> activo: RECUPERADO
activo --> adquiriendo: PERDIDO
degradado --> adquiriendo: PERDIDO
activo --> liberado: COMPLETADO
liberado --> adquiriendo: PEDIR

Tres recursos, el mismo grafo

Lo que cambia entre dominios es el vocabulario, no la forma. La tabla siguiente traduce cada posición del esqueleto a tres recursos muy distintos, y la coincidencia estructural es exacta pese a que ninguno de los tres se parece a los otros en su API.

Vale la pena detenerse en las diferencias que sí importan, porque son las que impiden que el esqueleto sea una plantilla ciega. El permiso de la cámara puede denegarse de forma permanente, y esa negativa no admite reintento automático: hay que llevar al usuario a la configuración del navegador, así que DENEGADO merece un destino distinto del de la cancelación voluntaria. La descarga tiene progreso, que es una magnitud y por tanto vive en el contexto, y tiene además reanudación por rango, que convierte el reintento en una petición distinta de la original en lugar de en una repetición. La conexión persistente es la única de las tres cuyo PERDIDO es esperable en la operación normal y no un incidente, lo que justifica un tratamiento de reconexión mucho más elaborado.

Liberar es parte del modelo, no del desmontaje

El error operativo más caro de esta familia no está en adquirir sino en devolver. La costumbre de liberar el recurso en el desmontaje de la vista funciona en el camino feliz y falla en todos los demás: la vista puede sobrevivir al recurso, el recurso puede sobrevivir a la vista, y una navegación interrumpida deja una cámara encendida o un enlace abierto que nadie recuerda. La regla correcta es colocar la liberación en la salida del estado que sostiene el recurso, o mejor aún, en la función de limpieza del actor invocado, porque entonces el intérprete la garantiza en todas las salidas, incluidas las que no habías previsto.

activo: {
  invoke: {
    id: 'pista',
    src: fromCallback(({ input, sendBack }) => {
      const stream = input.stream as MediaStream
      const alTerminar = () => sendBack({ type: 'PERDIDO', motivo: 'pista revocada' })
      stream.getTracks().forEach((t) => t.addEventListener('ended', alTerminar))
      return () => {
        stream.getTracks().forEach((t) => {
          t.removeEventListener('ended', alTerminar)
          t.stop()
        })
      }
    }),
  },
}