Observable 2.0, der Static Site Generator für Daten-Apps

Ankündigung des Observable Framework

• Veröffentlichung von Observable 2.0: ein Open-Source-Static-Site-Generator, mit dem sich schnelle und ansprechende Daten-Apps, Dashboards und Berichte erstellen lassen.
• Ziel ist es, Daten wirkungsvoll zu vermitteln; Observable-Notebooks eignen sich gut für vorübergehende Datenexploration, aber nicht für Dashboards und Apps.
• Mit dem Observable Framework lassen sich erstklassige Daten-Apps entwickeln, wobei sich JavaScript im Frontend mit verschiedenen Sprachen im Backend kombinieren lässt.

Beyond notebooks 📓

• Observable 2.0 spiegelt Erfahrungen aus mehreren Jahren wider.
• Die Leichtigkeit und Kollaborationsfähigkeit von Rechennotebooks sind ideal für Datenexploration und Antworten auf unmittelbare Fragen, aber nicht die optimale Oberfläche für jede Art von Arbeit.
• Notebooks sind durch eine einzelne Spalte, geringe visuelle Informationsdichte und eine stets sichtbare Editor-Oberfläche eingeschränkt; diese Grenzen eignen sich für Lernen und Experimente, aber nicht für Präsentationen.
• Daten-Apps fördern ein gemeinsames Verständnis, werden von Teams häufiger genutzt und behalten ihren Wert über die Zeit.

A better developer workflow 👩‍💻

• Moderne Entwicklung ist dateibasiert, und Dateien sind interoperabel.
• Entwickler können ihren bevorzugten Texteditor, Source Control und Code-Review-Systeme verwenden, Unit-Tests und Linter ausführen und CI/CD automatisieren.
• Das Observable Framework übernimmt Vanilla-JavaScript-Syntax und verwendet modernes ES import statt require, was das Lernen und Teilen von Code erleichtert.

A better user experience 😍

• Nicht nur die Developer Experience, sondern auch die User Experience ist wichtig, und der Wert kreativer Werkzeuge sollte an der Qualität ihrer Ergebnisse gemessen werden.
• Das Framework bietet Standardvorgaben und Komfortfunktionen für einen schnellen Einstieg und lässt sich bei Bedarf anpassen.
• Die Datenarchitektur des Frameworks beschleunigt Apps, indem Daten vorab berechnet werden.

A better data architecture

• Datenvisualisierung erfordert eine spezielle Datenaufbereitung, und der Großteil der Arbeit steckt in dieser Vorbereitung.
• Entwickler möchten verschiedene Sprachen, Bibliotheken und Datenquellen nutzen, Daten offline vorverarbeiten und im Browser mit JavaScript interaktive Grafiken einsetzen.
• Die Data Loader des Frameworks berechnen zur Build-Zeit statische Datensnapshots, um das Laden von Seiten zu beschleunigen, und laufen auf dem Server, sodass sich Sicherheit und Datenschutz kontrollieren lassen.

Dank

• Dank der Unterstützung, des Feedbacks und der Ermutigung der Community war es möglich, bis hierher zu kommen, und es freut uns, das Observable Framework zu teilen.
• Wer mehr über das Framework erfahren möchte, sollte die Dokumentation lesen oder das Forum besuchen.

GN⁺-Meinung:

• Das Observable Framework dürfte die Entwicklung datenorientierter Webanwendungen grundlegend voranbringen. Insbesondere die Vorab-Datenverarbeitung über Data Loader ist eine wichtige Funktion, die die User Experience deutlich verbessern kann.
• Der Ansatz von Observable, Werkzeuge bereitzustellen, die sowohl Entwicklern als auch Nutzern zugutekommen, passt gut zu einer modernen Entwicklungskultur, die Zusammenarbeit und Effizienz betont.
• Als Open Source und mit der Flexibilität zur Unterstützung verschiedener Sprachen und Werkzeuge dürfte es für die Entwickler-Community eine attraktive Option sein.

[GN⁺]

Hacker-News-Kommentare

• Ankündigung der Veröffentlichung von Observable Framework

  • Observable Framework ist ein neues Open-Source-Tool für die Entwicklung von Daten-Apps.
  • Empfohlen wird, sich den Beispielbericht anzusehen, der Web-Logs in einem internen Dashboard analysiert.
  • Mit der Technik „alles als Graphen darstellen“ werden Erkenntnisse gewonnen, die bei Serveroptimierung und Traffic-Steuerung helfen.
  • Außerdem wird ein traditionelles Dashboard geteilt, das die Einführung der neuen Open-Source-Visualisierungsbibliothek Observable Plot visualisiert.
  • Mit der Veröffentlichung von Observable Framework wird Observable für private Nutzer wieder kostenlos angeboten (einschließlich privater Notebooks und Datenbank-Konnektoren).

• Merkmale von Observable Framework

  • Observable Framework verwendet zu 100 % Vanilla-JavaScript-Syntax.
  • Die reaktive Runtime von Observable kann ohne spezielle Syntax verwendet werden.
  • Statische ES-Imports aus npm oder lokalen Modulen können verwendet werden, und in Codeblöcken können mehrere Variablen auf oberster Ebene deklariert werden.
  • Über die eingebaute Funktion display(…) kann Inhalt auf der Seite angezeigt werden.
  • Durch die Verwendung von Vanilla-Syntax wird die Interoperabilität deutlich verbessert.
  • Es wird daran gearbeitet, diese Verbesserungen in naher Zukunft auf Observable-Notebooks zu portieren.

• Nutzung des Konzepts „Datei vs. App“

  • In der Ankündigung wird das Konzept „Datei vs. App“ erwähnt.
  • Mit Codeblöcken in Markdown-Dateien lassen sich komplexe Datenvisualisierungen und Dashboards erstellen.
  • Diese Interoperabilität ist sehr spannend.
  • Es wurde ausprobiert, eine Observable-Site in Obsidian zu bearbeiten, und bestätigt, dass es gut funktioniert.

• Lob für den Ansatz von Observable

  • Der Ansatz, Observable von observablehq.com zu entkoppeln, ist hervorragend.
  • Dadurch können alle Reporter leicht dynamische und informationsbasierte Blogs erstellen.
  • Der Gründer von Observable hat bei der NYTimes beeindruckende Datenvisualisierungen erstellt.
  • Solche Werkzeuge geben Journalisten wieder mehr Macht und ermöglichen eine Abkehr von fragwürdigen Unternehmen.
  • Svekyll ist ein von Jekyll inspirierter Static-Site-Generator für Menschen, die Svelte in Blogs verwenden möchten.

• Verschiedene Ideen zu Observable Framework

  • Datenlader sind Skripte, die Daten (z. B. JSON) an die Standardausgabe ausgeben können.
  • Markdown-Dateien mit ausführbaren ```js-Blöcken.
  • Eine Neuerfindung der Observable-Notebooks, um benutzerdefinierte Syntax zu vermeiden.
  • Diese Punkte sind sehr wichtig.

• Wünsche zur Nutzung von Observable Framework

  • Die klare Trennung zwischen dem Laden/Vorbereiten und dem Anzeigen von Daten gefällt.
  • Es wird um Klarheit bei einfachen Beispielen und der Deployment-Dokumentation gebeten.
  • Da vermutlich die meisten lieber über GitHub Actions deployen, wird darum gebeten, in die Dokumentation ein Beispiel für die einfachste Deployment-Datei statt einer komplexen Datei aufzunehmen.
  • Vorschlag, eine Oberfläche bereitzustellen, mit der ein GitHub-Repository verbunden und bei Änderungen gebaut/deployt werden kann.

• Fragen zu Observable Framework

  • Frage, ob die sprachliche Flexibilität, die im Datenlader/Backend verwendet wird, auch für Frontend/UI gilt, oder ob das Paradigma bestehen bleibt, nur für das Laden von Daten eine beliebige Sprache zu verwenden und Dashboards mit observablejs/observable plot zu bauen.
  • Angesichts der Unterstützung von ObservableJS durch Quarto wird gefragt, ob ein in Quarto integriertes Observable Framework zu erwarten ist oder ob aktuelle Quarto-Versionen mit Dashboard-Funktionen eher ein Konkurrent des Frameworks werden.
  • Es wurde ein Vergleich mit Evidence.dev gesehen, und auch in der Markdown-zentrierten Entwicklererfahrung wurde Ähnlichkeit empfunden; zugleich wird daran erinnert, dass Evidence Apache Echarts als primäre Diagrammbibliothek gewählt hat. Gefragt wird nach den Vor- und Nachteilen von Echarts gegenüber ObservableJS/Plot.

• Historische Entwicklung von Observable

  • Verfolgt man die Geschichte von Observable zurück, begann das Unternehmen als Anbieter eines Static-Site-Generators für Dashboards, versuchte dann, Data Science für mittlere Manager einzuführen, hatte Schwierigkeiten, Product-Market-Fit zu finden, und konzentrierte sich schließlich auf ein einfaches und elegantes Tool für exploratives Programmieren, Datenvisualisierung und interaktive Dokumenterstellung in JavaScript.

• Weitere Fragen zur Nutzung von Observable Framework

  • Frage, wie Interaktionen umgesetzt werden können, wenn man aus einer Sqlite-/Duckdb-Datenbankdatei auf dem Server mithilfe von Slidern/Filtern jeweils nur einen Teil der Daten laden und in Plots/Tabellen anzeigen möchte.
  • Frage, ob man, wenn Observable Framework das Frontend bereitstellt, beliebige Authentifizierungsbibliotheken verwenden kann, um eine Website mit Login- und Abo-Optionen zu erstellen.
  • Frage, ob Nutzer bei statischen Webseiten jedes Mal, wenn sie ein Diagramm ansehen, über Dev Tools die Datendatei hinter der Visualisierung herunterladen können.
  • Frage nach dem geplanten Veröffentlichungszeitpunkt für Interaktionen in Plot (Zoom, Pan, interaktive Legenden, Brush).
  • Frage, ob bei großen Parquet-, Sqlite- oder CSV-Dateien, für die CI/CD über GitHub oder Vercel nicht möglich ist, ein Hosting-Service für diese Dateien und zur Erzeugung der Runtime angeboten werden soll.

• Beobachtungen zu ähnlichen Ideen

  • Auf rysana.com wird ein sehr ähnliches (in einigen Aspekten aber auch sehr anderes) Tool entwickelt.
  • Die Ideen tauchen wie Wellen auf, fast so, als wäre gerade erst die Infinitesimalrechnung erfunden worden.
  • Es gibt hier viel Vorarbeit, zugleich ist es interessant, dass der spezifische Sprung zu einer einzelnen Markdown-„App“-Datei mit verschiedenen Sprachen offenbar gleichzeitig stattfindet.