VAFF significa virtual API for Front y consiste en organizar parte del front como una API que se ejecuta en el navegador.

Motivación

Las aplicaciones web modernas se basan de un modo u otro en componentes, y esto hace que sea necesario el empleo de algún sistema para gestionar el estado y las interacciones entre elementos alejados en el árbol de componentes.

Emplear un VAFF para esto posibilita que el código sea más simple, legible, mantenible, testeable y depurable.

No se trata de una idea radicalmente nueva, sino que es algo parecido a lo que ya se viene haciendo incluso de forma mayoritaria, aunque aún no se haya identificado el patrón ni se le haya puesto nombre, puesto que Redux por ejemplo podría ser visto como un VAFF.

El objetivo de identificar el patrón, definirlo y darle nombre, es posibilitar que se pueda hablar sobre él, para que se analice, para que se creen librerías y herramientas, y en definitiva para exprimir al máximo las ventajas que pueda aportar.

La librería onGet

onGet pretende llevar el concepto VAFF hasta su máxima expresión a través del empleo de URLs para interactuar con los recursos de la API.
Este diseño facilita un mayor desacoplamiento y dinamicidad, hace más sencillo e intuitivo el diseño y la documentación de la API,  permite el uso de patrones de rutas a lo expressjs, y sobremanera hace que la gestión de dichas URLs se delegue en  plugins, tanto propios como personalizados.

Su código es libre, está completamente testeada, y ya está siendo utilizada en producción.
https://github.com/hacknlove/onGet

URLs y plugins

Las URLs de onGet pueden incluir un "protocolo" como prefijo que indica qué plugin debe gestionar la URL

OnGet incluye 6 plugins que cubren los casos de uso más comunes. Además permite el desarrollo e inclusión de más plugins de un modo muy sencillo.

Los plugins incluidos son:

  • fast: El cual solo es un CRRUD simple y sencillo, sin ninguna característica extra.
  • dotted: Que permite acceder a las propiedades profundas del estado mediante puntos en la url, de modo que dotted://foo.bar.buz accede a la propiedad buz del objeto bar que a su vez está contenido en dotted://foo
    Una característica notable de este plugin es que los cambios se propagan hacia arriba y hacia abajo, de modo que, por ejemplo, hacer cambiar el valor de dotted://foo.bar.buz hará que se ejecuten también las suscripciones a dotted://foo
  • history: Permite deshacer y rehacer, de forma independiente para cada clave; además de muchas otras operaciones relacionadas con la historia como por ejemplo desde saltar a un paso concreto, como suscribirse a un valor pasado o futuro.
  • localStorage: Utiliza localStorage para almacenar los valores, con lo que aporta persistecia e interactividad entre pestañas.
  • localStorage: Utiliza sessionStorage para almacenar los valores, con lo que aporta persistencia entre recargas y separación entre pestañas.
  • fetch: Obtiene los datos de peticiones GET, con cache, recarga y actualizaciones optimistas de lado de cliente.

SSR, serializado e hidratación

El hecho de que VAFF sea un patrón de diseño para front que consiste en una API virtual en el front para el front, no implica que no se pueda utilizar en aplicaciones universales.

De hecho, onGet permite crear aplicaciones universales que hagan SSR y envíen el estado de la API serializado para ser hidratado en el navegador.

Conclusiones

  • La VAFF es un patrón de diseño que ya se venía utilizando desde hace tiempo, aún sin haber sido identificado ni tener un nombre.
  • Definirlo y analizarlo hará posible sacarle el máximo partido.
  • La librería onGet ha sido diseñada expresamente para el patrón VAFF,  y hace que sea más cómoda, sencilla y satisfactoria la creación de aplicaciones complejas.