En lugar de escribir código 'tedioso' para manejar la geometría, la retroalimentación y las animaciones de cada interacción de arrastre única, los desarrolladores ahora pueden usar el 'arrastre declarativo' para especificar en qué debe convertirse un elemento. Este cambio, implementado en la biblioteca Dragology, permite que el sistema sintetice automáticamente interacciones fluidas y receptivas mediante la renderización especulativa de los estados futuros de la aplicación.
Esta imagen proporciona un resumen de alto nivel del objetivo principal de la biblioteca: simplificar la creación de interacciones complejas de interfaz de usuario.
Invertir el problema de arrastrar y soltar
El diseño tradicional de arrastrar y soltar a menudo requiere que los desarrolladores programen comportamientos visuales específicos directamente, lo que puede ser laborioso para geometrías complejas. Esta barrera a menudo impide que educadores, matemáticos y diseñadores de juegos creen interacciones táctiles enriquecidas.
El arrastre declarativo invierte este proceso. En lugar de programar el movimiento, el autor de la interfaz especifica qué estados futuros del modelo deben ser accesibles al arrastrar un elemento específico. El sistema se encarga entonces de la pesada tarea de la síntesis visual.
“En lugar de programar todo ese comportamiento visual directamente, simplemente dices, para cada elemento que quieras hacer arrastrable, a qué estados futuros de tu aplicación debería conducir el arrastre de ese elemento.”
— Declarative Dragging
El mecanismo de renderizado especulativo
El motor de Dragology funciona tomando un estado del modelo y renderizándolo en una vista. Cuando un usuario comienza un arrastre, el motor renderiza especulativamente los diversos estados futuros a los que podría conducir el arrastre.
Al analizar estas renderizaciones especulativas, el sistema extrae la posición del elemento arrastrado en cada vista para determinar las zonas de soltar válidas. Luego combina estos 'mundos posibles' en una única interacción fluida sin requerir que el autor defina las trayectorias manualmente.
Este diagrama ilustra el mecanismo central del renderizado especulativo donde el sistema analiza múltiples 'mundos posibles' para sintetizar una interacción fluida.
Componibilidad y aplicaciones en el mundo real
Dragology está diseñado para ser componible, lo que significa que los comportamientos simples impulsados por modelos pueden combinarse. Los desarrolladores pueden añadir modificadores para incluir funciones como el ajuste a una rejilla, elementos flotantes o animaciones de transición específicas.
El sistema ya se ha utilizado para crear 'explorables' matemáticos interactivos, como árboles retorcidos y diagramas de trenzas. También se está integrando en Hazel, un entorno de programación académica donde permite que las refactorizaciones se vuelvan tangibles y descubribles a través de la interacción física.
Este apoyo visual respalda la mención de 'explorables' matemáticos y los tipos específicos de diagramas que la tecnología puede facilitar.
Limitaciones y compensaciones técnicas
Si bien el sistema simplifica la creación de interacciones de alta calidad, el material original no proporciona puntos de referencia de rendimiento específicos con respecto a las tasas de fotogramas o la sobrecarga computacional del renderizado especulativo.
La implementación actual está construida específicamente para interfaces SVG en la web, y su escalabilidad para cambios de estado de frecuencia extremadamente alta sigue siendo un área para mayor exploración.
Qué dicen los lectores de Hacker News
- Alternativa: Un comentarista sugirió que el entorno de programación Hazel sirve como un ejemplo similar de arte previo para este tipo de interacción. comentario ↗
- Experiencia: Un lector expresó que las demostraciones interactivas proporcionadas en el artículo eran visualmente encantadoras y sirvieron como una experiencia genuinamente educativa. comentario ↗
Resumen de opiniones del hilo de Hacker News; no son hechos verificados. Leer el debate completo ↗