Observable 2.0, un générateur de site statique pour les applications de données

Annonce d’Observable Framework

• Sortie d’Observable 2.0 : un générateur de site statique open source permettant de créer des applications de données, des tableaux de bord et des rapports rapides et élégants.
• L’objectif est de mieux communiquer autour des données ; les notebooks Observable sont adaptés à l’exploration ponctuelle des données, mais moins aux tableaux de bord et aux applications.
• Observable Framework permet de créer d’excellentes applications de données, en combinant le JavaScript du frontend avec divers langages côté backend.

Au-delà des notebooks 📓

• Observable 2.0 reflète plusieurs années d’expérience.
• La légèreté et la dimension collaborative des notebooks de calcul sont idéales pour l’exploration des données et les réponses immédiates à des questions ponctuelles, mais ce n’est pas une interface optimisée pour tous les usages.
• Les notebooks sont limités par une mise en page sur une seule colonne, une faible densité d’information visuelle et une interface d’édition toujours visible ; ces limites conviennent à l’apprentissage et à l’expérimentation, mais pas à la présentation.
• Les applications de données favorisent une compréhension partagée, sont utilisées plus fréquemment par les équipes et conservent leur valeur dans le temps.

Un meilleur workflow pour les développeurs 👩‍💻

• Le développement moderne repose sur les fichiers, qui offrent une bonne interopérabilité.
• Les développeurs peuvent utiliser leur éditeur de texte préféré, le contrôle de version et leur système de revue de code, exécuter des tests unitaires et des linters, et automatiser le CI/CD.
• Observable Framework adopte la syntaxe JavaScript vanilla et utilise les import ES modernes à la place de require, ce qui facilite l’apprentissage et le partage de code.

Une meilleure expérience utilisateur 😍

• L’expérience développeur ne suffit pas ; l’expérience utilisateur compte aussi, et la valeur d’un outil créatif doit être jugée à la qualité de ce qu’il permet de produire.
• Framework fournit des valeurs par défaut et des mécanismes pratiques pour démarrer rapidement, tout en restant personnalisable selon les besoins.
• L’architecture de données de Framework pré-calcule les données afin d’accélérer les applications.

Une meilleure architecture de données

• La visualisation de données exige une préparation spécifique des données, et l’essentiel du travail se situe souvent à ce niveau.
• Les développeurs souhaitent utiliser divers langages, bibliothèques et sources de données, prétraiter les données hors ligne, puis exploiter dans le navigateur des graphiques interactifs en JavaScript.
• Les data loaders de Framework calculent des instantanés statiques des données au moment du build afin d’accélérer le chargement des pages, et comme ils s’exécutent sur le serveur, ils permettent de mieux contrôler la sécurité et la confidentialité.

Remerciements

• C’est grâce au soutien, aux retours et aux encouragements de la communauté que ce projet a pu arriver jusqu’ici, et l’équipe se réjouit de partager Observable Framework.
• Pour en savoir plus sur Framework, il est recommandé de consulter la documentation ou de visiter le forum.

Avis de GN⁺ :

• Observable Framework semble pouvoir apporter une vraie innovation au développement d’applications web centrées sur les données. En particulier, le prétraitement des données via les data loaders peut considérablement améliorer l’expérience utilisateur.
• L’approche d’Observable, qui vise à proposer un outil utile à la fois pour les développeurs et pour les utilisateurs, s’accorde bien avec une culture de développement moderne axée sur la collaboration et l’efficacité.
• Son caractère open source, ainsi que sa flexibilité avec la prise en charge de nombreux langages et outils, devraient en faire une option attrayante pour la communauté des développeurs.

[GN⁺]

Commentaires sur Hacker News

• Annonce de la sortie d’Observable Framework

  • Observable Framework est un nouvel outil open source pour développer des applications de données.
  • Il est recommandé de consulter le rapport de démonstration qui analyse les logs web dans un tableau de bord interne.
  • La technique consistant à « tout représenter sous forme de graphiques » permet d’obtenir des insights utiles pour l’optimisation des serveurs et le contrôle du trafic.
  • Un tableau de bord plus traditionnel montrant l’adoption de la nouvelle bibliothèque de visualisation open source Observable Plot est également partagé.
  • Avec le lancement d’Observable Framework, Observable redevient gratuit pour les usages personnels, y compris les notebooks privés et les connecteurs de base de données.

• Caractéristiques d’Observable Framework

  • Observable Framework utilise une syntaxe JavaScript vanilla à 100 %.
  • Il permet d’utiliser le runtime réactif d’Observable sans syntaxe particulière.
  • Il est possible d’utiliser des imports ES statiques depuis npm ou des modules locaux, et de déclarer plusieurs variables de niveau supérieur dans des blocs de code.
  • On peut afficher du contenu dans la page en appelant la fonction intégrée display(…).
  • L’utilisation d’une syntaxe vanilla améliore fortement l’interopérabilité.
  • L’équipe cherche à porter ces améliorations vers les notebooks Observable dans un avenir proche.

• Utilisation du concept « fichiers contre applications »

  • La présentation mentionne le concept de « fichiers contre applications ».
  • Des blocs de code dans des fichiers Markdown permettent de créer des visualisations de données complexes et des tableaux de bord.
  • Cette interopérabilité est très intéressante.
  • L’édition d’un site Observable dans Obsidian a été testée et fonctionne bien.

• Éloges sur l’approche d’Observable

  • L’approche consistant à dissocier Observable d’observablehq.com est excellente.
  • Cela permet à tous les journalistes de créer facilement des blogs dynamiques et fondés sur l’information.
  • Le fondateur d’Observable a déjà réalisé des visualisations de données remarquables au NYTimes.
  • Ce type d’outils redonne du pouvoir aux journalistes et rend possible une transition loin d’entreprises douteuses.
  • Svekyll est un générateur de sites statiques inspiré de Jekyll, destiné à celles et ceux qui veulent utiliser Svelte pour leur blog.

• Diverses idées autour d’Observable Framework

  • Les data loaders sont des scripts capables d’écrire des données sur la sortie standard, comme du JSON.
  • Des fichiers Markdown contenant des blocs ```js exécutés.
  • Une réinvention des notebooks Observable pour éviter une syntaxe personnalisée.
  • Tous ces points sont très importants.

• Demandes concernant l’usage d’Observable Framework

  • La séparation claire entre le chargement/préparation des données et leur affichage est appréciée.
  • Une demande est faite pour des exemples simples et une documentation de déploiement plus claire.
  • En partant du principe que la plupart des gens préféreront déployer via GitHub Actions, il est demandé d’ajouter à la documentation l’exemple du fichier de déploiement le plus simple, plutôt qu’un fichier complexe.
  • Suggestion de proposer une interface permettant de connecter un dépôt GitHub et de lancer le build/déploiement à chaque changement.

• Questions sur Observable Framework

  • Question sur le fait de savoir si la flexibilité de langage utilisée pour les data loaders / le backend s’appliquera aussi au frontend / à l’UI, ou si le paradigme restera celui où l’on utilise le langage de son choix pour charger les données et où le tableau de bord est construit avec observablejs / Observable Plot.
  • Étant donné qu’ObservableJS est pris en charge par Quarto, question sur une éventuelle intégration d’Observable Framework avec Quarto, ou sur le fait que les dernières versions de Quarto, avec leurs fonctionnalités de tableaux de bord, deviennent plutôt des concurrentes du Framework.
  • Une comparaison avec Evidence.dev a été vue, avec une expérience de développement centrée sur Markdown jugée similaire, mais Evidence a choisi Apache Echarts comme bibliothèque de graphiques principale. Réflexion demandée sur les avantages et inconvénients d’Echarts par rapport à ObservableJS / Plot.

• Évolution historique d’Observable

  • En remontant dans l’histoire d’Observable, l’entreprise a commencé par créer un générateur de sites statiques pour tableaux de bord, a ensuite tenté d’introduire la data science auprès des managers intermédiaires sans trouver facilement l’adéquation au marché, puis s’est finalement recentrée sur un outil simple et élégant pour la programmation exploratoire, la visualisation de données et la rédaction de documents interactifs en JavaScript.

• Questions supplémentaires sur l’usage d’Observable Framework

  • Question sur la manière de réaliser des interactions si l’on veut créer, à partir de fichiers de base de données Sqlite/Duckdb présents sur un serveur, des graphiques ou tableaux qui ne récupèrent et n’affichent qu’une partie des données à la fois via des sliders ou des filtres.
  • Si Observable Framework fournit le frontend, question sur la possibilité d’utiliser n’importe quelle bibliothèque d’authentification pour créer un site avec connexion et options d’abonnement.
  • S’il s’agit de pages web statiques, question sur le fait que les utilisateurs puissent télécharger, via les Dev Tools, les fichiers de données derrière les visualisations à chaque consultation.
  • Question sur la date prévue pour la sortie des interactions de Plot, comme le zoom, le pan, les légendes interactives et le brush.
  • Lorsqu’on manipule de gros fichiers parquet, sqlite ou csv et que le CI/CD via GitHub ou Vercel devient impossible, question sur une éventuelle offre de service d’hébergement pour ces fichiers et pour générer le runtime associé.

• Observations sur des idées similaires

  • Un outil très similaire, bien que très différent sur certains aspects, est en cours de développement sur rysana.com.
  • Les idées surgissent comme des vagues, sans coordination, un peu comme lors de l’invention initiale du calcul infinitésimal.
  • Il existe ici beaucoup d’antériorité technique, mais il est intéressant de voir qu’en même temps se produit ce saut précis vers des « applications » Markdown en fichier unique utilisant plusieurs langages.