Observable 2.0, un generador de sitios estáticos para apps de datos

Anuncio de Observable Framework

• Lanzamiento de Observable 2.0: un generador de sitios estáticos de código abierto que permite crear apps de datos, dashboards e informes rápidos y atractivos.
• Su objetivo es comunicar datos de forma efectiva, y aunque los cuadernos de Observable son adecuados para la exploración de datos temporal, no son ideales para dashboards y apps.
• Con Observable Framework es posible crear las mejores apps de datos, combinando JavaScript en el frontend con diversos lenguajes en el backend.

Más allá de los cuadernos 📓

• Observable 2.0 refleja la experiencia acumulada a lo largo de varios años.
• La ligereza y capacidad de colaboración de los cuadernos computacionales son ideales para la exploración de datos y para responder preguntas inmediatas, pero no son una interfaz optimizada para todo tipo de trabajo.
• Los cuadernos tienen limitaciones por su columna única, baja densidad de información visual y una interfaz de edición siempre visible; estas limitaciones son adecuadas para aprender y experimentar, pero no para presentar.
• Las apps de datos fomentan un entendimiento compartido, los equipos las usan con mayor frecuencia y conservan su valor con el tiempo.

Un mejor flujo de trabajo para desarrolladores 👩‍💻

• El desarrollo moderno se basa en archivos, y los archivos son interoperables.
• Los desarrolladores pueden usar su editor de texto preferido, control de código fuente y sistema de revisión de código, además de ejecutar pruebas unitarias y linters, y automatizar CI/CD.
• Observable Framework adopta la sintaxis de JavaScript vainilla y usa el moderno ES import en lugar de require, lo que facilita el aprendizaje y el compartir código.

Una mejor experiencia de usuario 😍

• No solo importa la experiencia del desarrollador, también la experiencia del usuario; el valor de una herramienta creativa debe evaluarse por la calidad de lo que produce.
• Framework ofrece valores predeterminados y facilidades para empezar rápido, y permite personalización cuando se necesita.
• La arquitectura de datos de Framework acelera la app al precalcular los datos.

Una mejor arquitectura de datos

• La visualización de datos requiere cierta preparación específica de los datos, y la mayor parte del trabajo está en esa preparación.
• Los desarrolladores quieren usar distintos lenguajes, bibliotecas y fuentes de datos, procesar los datos por adelantado fuera de línea y aprovechar gráficos interactivos con JavaScript en el navegador.
• Los data loaders de Framework calculan snapshots estáticos de datos en tiempo de compilación para acelerar la carga de páginas, y como se ejecutan en el servidor, permiten controlar la seguridad y la privacidad.

Agradecimientos

• Fue posible llegar hasta aquí gracias al apoyo, la retroalimentación y el ánimo de la comunidad, y comparten con gusto Observable Framework.
• Si quieres saber más sobre Framework, recomiendan leer la documentación o visitar el foro.

Opinión de GN⁺:

• Observable Framework parece que traerá innovación al desarrollo de aplicaciones web centradas en datos. En particular, el preprocesamiento de datos mediante data loaders puede ser una función clave para mejorar de forma importante la experiencia del usuario.
• El enfoque de Observable de ofrecer una herramienta útil tanto para desarrolladores como para usuarios encaja bien con la cultura moderna de desarrollo, que valora la colaboración y la eficiencia.
• Al ser de código abierto y ofrecer flexibilidad con soporte para diversos lenguajes y herramientas, se perfila como una opción atractiva para la comunidad de desarrolladores.

[GN⁺]

Comentarios de Hacker News

• Anuncio del lanzamiento de Observable Framework

  • Observable Framework es una nueva herramienta de código abierto para desarrollar apps de datos.
  • Recomiendan ver un informe de ejemplo que analiza logs web en un dashboard interno.
  • Usan la técnica de "graficar todo" para obtener insights que ayudan con la optimización del servidor y el control del tráfico.
  • También comparten un dashboard tradicional que visualiza la adopción de una nueva biblioteca de visualización de código abierto llamada Observable Plot.
  • Junto con el lanzamiento de Observable Framework, Observable vuelve a ser gratis para usuarios individuales (incluye notebooks privados y conectores de base de datos).

• Características de Observable Framework

  • Observable Framework usa sintaxis 100% vanilla JavaScript.
  • Permite usar el runtime reactivo de Observable sin sintaxis extraña.
  • Se pueden usar imports ES estáticos desde npm o módulos locales, y declarar múltiples variables de nivel superior dentro de bloques de código.
  • Se puede mostrar contenido en la página llamando a la función integrada display(…).
  • El uso de sintaxis vanilla mejora mucho la interoperabilidad.
  • Están explorando cómo portar estas mejoras a los notebooks de Observable en un futuro cercano.

• Uso del concepto de "archivo vs app"

  • En la presentación se menciona el concepto de "archivo vs app".
  • Es posible crear visualizaciones de datos complejas y dashboards usando bloques de código dentro de archivos Markdown.
  • Esta interoperabilidad resulta muy interesante.
  • Probaron editar un sitio de Observable desde Obsidian y confirmaron que funciona bien.

• Elogios al enfoque de Observable

  • Es excelente el enfoque de separar Observable de observablehq.com.
  • Hace posible que cualquier periodista cree fácilmente blogs dinámicos y basados en información.
  • El fundador de Observable tiene experiencia haciendo visualizaciones de datos increíbles en NYTimes.
  • Este tipo de herramientas permite devolverles poder a los periodistas y facilitar una transición lejos de empresas cuestionables.
  • Svekyll es un generador de sitios estáticos inspirado en Jekyll, para quienes quieren usar Svelte en su blog.

• Varias ideas sobre Observable Framework

  • Los data loaders son scripts que pueden imprimir datos (como JSON) a la salida estándar.
  • Archivos Markdown que incluyen bloques ```js ejecutables.
  • Una reinvención de los notebooks de Observable para evitar sintaxis personalizada.
  • Estos puntos son muy importantes.

• Solicitudes sobre el uso de Observable Framework

  • Les gusta la separación clara entre cargar/preparar datos y mostrarlos.
  • Piden ejemplos simples y mayor claridad en la documentación de despliegue.
  • Suponen que la mayoría preferirá desplegar mediante GitHub Actions, y piden agregar a la documentación el ejemplo más simple de archivo de despliegue en lugar de archivos complejos.
  • Sugerencia sobre si puede haber una interfaz para conectarlo a un repositorio de GitHub y hacer build/deploy cuando haya cambios.

• Preguntas sobre Observable Framework

  • Preguntan si la flexibilidad de lenguaje usada en el data loader/backend también se aplicará al frontend/UI, o si se mantendrá el paradigma de usar el lenguaje que uno quiera solo para cargar datos y construir el dashboard con observablejs/observable plot.
  • Dado que Quarto soporta ObservableJS, preguntan si puede esperarse una integración de Observable Framework con Quarto, o si la versión más reciente de Quarto, con enfoque en dashboards, se convierte en competidor del Framework.
  • Vieron comparaciones con Evidence.dev y también sintieron similitudes en la experiencia de desarrollo centrada en Markdown, pero recuerdan que Evidence eligió Apache Echarts como biblioteca principal de gráficos. Preguntan por las ventajas y desventajas de Echarts frente a ObservableJS/Plot.

• Desarrollo histórico de Observable

  • Mirando la historia de Observable, empezó como una empresa que hacía generadores de sitios estáticos para dashboards, luego intentó llevar la ciencia de datos a mandos medios, tuvo dificultades para encontrar product-market fit y finalmente se enfocó en una herramienta simple y elegante para programación exploratoria, visualización de datos y creación de documentos interactivos en JavaScript.

• Más preguntas sobre el uso de Observable Framework

  • Preguntan cómo se lograría la interacción si se quiere crear un plot/tabla que traiga y muestre solo parte de los datos a la vez desde archivos de base de datos Sqlite/Duckdb en el servidor usando sliders/filtros.
  • Si Observable Framework provee el frontend, preguntan si se puede usar cualquier biblioteca de autenticación para crear un sitio web con opciones de login y suscripción.
  • Si se trata de una página web estática, preguntan si un usuario podría descargar los archivos de datos detrás de la visualización usando Dev Tools cada vez que vea un gráfico.
  • Preguntan por la fecha de lanzamiento de la interactividad de Plot (zoom, paneo, leyenda interactiva, brush).
  • Si se tienen archivos grandes de parquet, sqlite o csv, no es posible hacer CI/CO mediante GitHub o Vercel, así que preguntan si planean ofrecer un servicio de hosting para generar esos archivos y el runtime.

• Observación sobre ideas similares

  • Están desarrollando una herramienta muy similar (y en algunos aspectos muy diferente) en rysana.com.
  • La idea aparece en oleadas sin coordinación, como cuando el cálculo fue inventado por primera vez.
  • Hay mucho estado del arte previo aquí, pero al mismo tiempo resulta interesante que ese salto específico hacia una "app" Markdown de archivo único que usa distintos lenguajes esté ocurriendo de manera simultánea.