top of page
Foto del escritorArtistCode

Biblioteca de computación incremental de JavaScript ofrece un mejor UX para aplicaciones Web



El equipo detrás del collaborative whiteboard (tldraw) recientemente publicó una biblioteca que trae computación incremental a JavaScript. Signia busca superar las limitaciones fundamentales de rendimiento de la interfaz del usuario y el marco reactivo elegidos por (tldraw), en última instancia, proporcionar mejores aplicaciones interactivas con una mejor experiencia del usuario. Sin embargo, Signia se puede usar de forma independiente o junto con cualquier marco de IU.Los datos derivados se recomputarían cada vez que sus dependencias de datos cambian. Esas recomputaciones podrían ser costosas para grandes colecciones derivadas. En algunos contextos, los datos derivados también pueden recomprarse cuando podrían recuperarse de un caché. Las aplicaciones web de una sola página altamente interactivas como (tldraw) generalmente consideran que la experiencia del cliente es un componente clave de su propuesta de valor. La capacidad de respuesta a las entradas del usuario, en sí misma un componente clave de la experiencia del usuario, se relaciona con la cantidad de cálculo que activan en el hilo principal.


Algunos desarrolladores pueden recurrir a bibliotecas de datos reactivos (por ejemplo: jotai, recoil, zustand) para reducir la cantidad de cálculo innecesario realizado por el marco. Alternativamente, pueden recurrir a marcos de IU que ya incorporan capacidades de datos reactivos similares y realizan cálculos menos innecesarios por diseño.

Otra parte del cálculo a realizar se relaciona con mantener los datos dependientes sincronizados con sus dependencias. La eficiencia se puede obtener calculando datos dependientes perezosamente (cuando sea necesario) en lugar de ansiosamente (tan pronto como sus dependencias sean distintas) una vez en lugar de cada vez que una dependencia cambian (por ejemplo: a través de la clasificación topológica del gráfico de reactividad ) o más eficientemente. La computación incremental trata con la computación de datos dependientes más rápido.


Documentación de Signia da un ejemplo de datos derivados que pueden beneficiarse de la computación incremental. Asumamos una matriz arr de 10,000 valores y una variable derivada y obtenido como arr.map(f). Cuando arr se empuja un nuevo valor val, una forma ingenua de recomputar y es volver a ejecutar el map operación sobre los 10,001 valores. Con un enfoque de computación incremental, simplemente se agrega la matriz asignada de 10,000 valores que se almacenó en caché f(val). Esto lleva a una sola ejecución de f vs. 10,001 en el caso del enfoque ingenuo. El enfoque incremental generaliza a filter, reduce, sort, y muchas otras operaciones.

Signia proporciona una API reactiva que permite a los desarrolladores, entre otras cosas, definir átomos (datos independientes) y calculado datos (derivados de átomos), junto con los respectivos creadores y captadores:


import { computed, atom }from'signia'

const firstName =atom('firstName','David')

firstName.set('John')

console.log(firstName.value)// John

firstName.update((value)=> value.toUpperCase())

console.log(firstName.value)// JOHN


firstName.set('John')

const lastName =atom('lastName','Bowie')

const fullName =computed('fullName',()=>{

return`${firstName.value}${lastName.value}`

})


console.log(fullName.value)// David Bowie


A estas API reactivas, Signia agrega API de computación incremental que almacenan un historial de cambios de entrada. El usuario de API puede calcular gradualmente el valor derivado actualizado a partir del valor derivado en caché y el historial de cambios. La documentación de Signia proporciona un ejemplo que aprovecha el formato de parche del immutable state library Immer. Los cambios se almacenan como operaciones (por ejemplo: agregar, reemplazar, quitar) que coinciden con el patrón con el cálculo incremental correspondiente (por ejemplo: splice).


La computación incremental no es un enfoque nuevo. JSON Patch se puede usar para evitar enviar un documento completo cuando solo una parte ha cambiado. Cuando se usa en combinación con el Método HTTP PATCH, permite actualizaciones parciales para las API HTTP de una manera compatible con los estándares. La biblioteca de visualización D3 permite a los desarrolladores especificar de forma incremental cómo actualizar una visualización en enter, update, y exit de datos de entrada.


¿Quieres saber más?


30 visualizaciones0 comentarios

Entradas Recientes

Ver todo

Comments


bottom of page