Ide-ide menarik yang muncul di Observable Framework

 (simonwillison.net)
3 poin oleh GN⁺ 2024-03-04 | 1 komentar | Bagikan ke WhatsApp
  • Observable Framework adalah alat open source yang melampaui model notebook yang kuat untuk eksplorasi data sementara, untuk menerapkan aplikasi data, dasbor, dan laporan yang dimuat cepat sebagai situs statis
  • Blok kode js dan ekspresi inline di dalam Markdown dijalankan di browser, dan ketika nilai reaktif seperti now berubah, tampilan terkait juga diperbarui otomatis
  • Framework mempertahankan reaktivitas Observable Notebooks sekaligus menyediakan satu file Markdown, JavaScript standar, dan alur kerja yang ramah Git
  • Library seperti Inputs, d3, dan Plot dimuat secara lazy saat pengembangan, dan saat build/deploy hanya kode yang dirujuk yang dimuat otomatis dari jsdelivr CDN
  • Dengan Data loader, data dapat disiapkan pada waktu build dalam bahasa apa pun lalu dibundel sebagai file statis seperti JSON atau CSV, sehingga memungkinkan deployment dasbor dengan ketergantungan backend yang lebih kecil

Generator situs statis untuk aplikasi data

  • Observable Framework adalah generator situs statis yang mengompilasi Markdown, JavaScript, dan bila perlu bahasa lain menjadi halaman interaktif
  • Framework menyertakan server hot reloading berfitur lengkap, sehingga saat file diubah dan disimpan di editor, perubahan langsung tercermin di browser
  • Setelah selesai, Anda dapat membuat sekumpulan file statis dengan perintah build
    • File-file ini dapat dideploy ke server
    • Atau bisa juga langsung dideploy ke platform berbagi Observable yang terautentikasi dengan npm run deploy

JavaScript yang berjalan di dalam Markdown

  • Desain inti Framework adalah menaruh JavaScript di dalam dokumen Markdown untuk membuat dokumen interaktif
  • Blok kode Markdown yang diberi tag js dijalankan sebagai JavaScript di browser pengguna
  • Ekspresi inline juga bisa digunakan, dan dapat menampilkan waktu saat ini sebagai string seperti ${new Date(now)}
  • now adalah variabel khusus yang menyediakan waktu saat ini dalam milidetik sejak epoch dan terus diperbarui
    • Saat now berubah, sel dan ekspresi inline yang merujuk padanya juga ikut diperbarui
  • Di Observable Notebooks, kode dan Markdown ditulis dalam sel terpisah, tetapi di Framework keduanya berada dalam satu dokumen teks
  • Ekspresi inline dan blok js dapat memiliki cara tampilan yang berbeda
    • Ekspresi inline menggunakan representasi string bawaan dari objek JavaScript
    • Blok js menggunakan fungsi display() milik Observable, dan aturan tampilannya ada di inspect/src/inspect.js

Mempertahankan model eksekusi reaktif

  • Reaktivitas, fitur inti Observable Notebooks, juga dipertahankan dalam dokumen JavaScript Markdown di Framework
  • Jika suatu sel berubah, sel lain yang bergantung padanya akan otomatis dievaluasi ulang
  • Ini adalah perbedaan besar dibandingkan notebook Jupyter, dan juga merupakan fitur utama dari alat notebook Python marimo
  • Efeknya sangat terasa bila dipakai bersama input formulir
    • Jika Anda menambahkan input ke halaman dan merujuk nilainya di bagian lain dokumen, interaksi real-time bisa dibuat dengan mudah

Contoh dasbor unduhan PyPI

  • Dasbor contoh menampilkan statistik unduhan PyPI per paket Python, dan versi Observable Framework-nya terdiri dari dokumen Markdown 57 baris
  • Pengguna memilih paket dari array packages dengan Inputs.select()
    • Inputs.select() adalah metode yang disertakan dalam Framework dan dapat dilihat di dokumentasi Observable Inputs
    • Fungsi view() adalah fitur yang baru ditambahkan di Framework, dan membuat perubahan pilihan input tercermin di blok kode lain dalam dokumen
  • packageName didefinisikan dengan const sehingga bisa digunakan di blok js lain pada halaman
  • Data diambil dengan d3.json()
    • Di Framework, seluruh D3 dapat digunakan
    • URL memuat nama paket yang dipilih
    • Sumber data adalah JSON API dari Datasette
  • Tabel SQLite ada di datasette.io/content/stats, dan diperbarui sekali sehari dengan statistik paket PyPI terbaru
    • Workflow GitHub Actions terkait dibahas dalam tulisan sebelumnya tentang baked data
  • Menambahkan .json ke URL akan mengembalikan JSON
    • Hanya baris untuk paket tertentu yang diminta
    • Hasil diurutkan berdasarkan tanggal secara menurun
    • Maksimal 1.000 baris diterima sebagai array objek
  • Tanggal string SQLite diubah menjadi objek JavaScript Date dengan d3.timeParse("%Y-%m-%d")
  • Grafik dirender dengan Observable Plot, yang dipaketkan bersama Framework
  • Daftar paket diambil dengan menjalankan kueri SQL langsung ke database /content milik Datasette
    • Kuerinya adalah select package from stats group by package order by max(downloads) desc
    • _shape=arrayfirst adalah cara singkat untuk menerima kolom pertama dari baris hasil sebagai array JSON

Hanya menyertakan kode yang dipakai

  • Dasbor contoh menggunakan library tambahan seperti Inputs, d3, dan Plot
  • Dalam mode pengembangan, diterapkan lazy loading
    • Kode hanya dimuat saat pertama kali akan dipakai di dalam sel
  • Saat aplikasi dibuild dan dideploy, Framework otomatis memuat hanya kode library yang dirujuk dari jsdelivr CDN

Caching data pada waktu build

  • Data loader di Framework adalah fitur untuk menyiapkan data dasbor pada waktu build
  • Dasbor Framework dapat mengambil data dari mana saja saat runtime dengan fetch() atau pembungkusnya
    • Observable Notebooks juga bekerja dengan cara yang sama
    • Dalam pendekatan ini, performa dasbor bergantung pada backend yang terhubung
  • Framework merekomendasikan pola membuat data untuk dasbor pada saat deploy, lalu membundel hanya subset data yang diperlukan sebagai file statis
    • File data statis dapat disajikan dengan cepat dari hosting statis yang sama dengan kode dasbor
  • Data loader adalah skrip yang ditulis dalam bahasa pemrograman apa pun
    • Saat build, Framework menjalankan skrip tersebut
    • Hasil keluaran standar skrip disimpan sebagai file
  • Contohnya adalah menaruh curl https://earthquake.usgs.gov/earthquakes/feed/… di file quakes.json.sh
    • Saat build, nama file memberi tahu Framework bahwa file tujuan adalah quakes.json dan loader yang dijalankan adalah .sh
  • Selama bisa mengeluarkan JSON, CSV, atau format yang berguna ke standard output, data dapat diambil dengan teknologi apa pun

Perbedaan dengan Observable Notebooks

  • Observable Framework menggunakan kembali banyak ide dan kode dari Observable Notebooks, tetapi berbeda dalam format file dan lingkungan eksekusi
  • Observable Notebooks yang ada selama ini memiliki ciri berikut dibanding Jupyter Notebooks
    • Menggunakan JavaScript, bukan Python
    • Editor notebook-nya sendiri bukan open source, melainkan produk hosting yang disediakan di observablehq.com
    • Notebook dapat diekspor sebagai file statis untuk dijalankan di mana saja, tetapi editornya adalah produk proprietari
    • Sel bersifat reaktif, sehingga ketika suatu sel berubah, sel lain yang bergantung padanya otomatis dievaluasi ulang seperti di Excel
    • Untuk mendukung model reaktivitas, dibuat kata kunci kustom viewof, sehingga sintaks JavaScript-nya tidak sepenuhnya standar
    • Notebook yang bisa diedit menggunakan format file proprietari yang kompleks dan kurang cocok dengan alat seperti Git, sehingga Observable membangun sistem version control dan kolaborasinya sendiri
  • Observable Framework memindahkan model ini ke format file yang lebih sederhana dan lingkungan eksekusi open source
    • Dokumennya berupa satu file Markdown yang memuat blok JavaScript
    • Tetap reaktif, tetapi bisa diedit dengan editor teks apa pun dan dimasukkan ke Git
    • Seluruhnya open source dengan lisensi ISC, dan seluruh stack editing dapat dijalankan di mesin lokal
    • Hanya memakai JavaScript standar tanpa sintaks kustom

Perubahan arah Observable

  • Observable Framework tampak sebagai perubahan arah Observable yang lebih condong ke alat pengembang daripada alat kolaborasi yang berpusat pada editor Observable Notebook proprietari yang lama
  • Kalimat pengenalan Observable di Twitter berbunyi “The end-to-end solution for developers who want to build and host dashboards that don’t suck”
    • Dalam salinan Internet Archive tanggal 3 Oktober 2023, tertulis “Build data visualizations, dashboards, and data apps that impact your business — faster.”
  • Observable Notebooks dapat agak terbatas penggunaannya karena sifat proprietari platform dan pembatasan pada akun gratis, terutama tidak adanya notebook privat gratis
  • Library open source seperti Observable Plot sudah dinilai sebagai teknologi yang aktif layak digunakan
  • Observable Framework mengimplementasikan kembali ide-ide yang membuat Observable Notebooks menarik dalam model open source, JavaScript standar, satu file teks, dan deployment statis

Bacaan terkait

1 komentar

 
GN⁺ 2024-03-04
Opini Hacker News

  • Dalam beberapa hal, Observable Framework terasa seperti Avengers: Endgame dari semesta sinematik Mike Bostock
    Ia menyatukan d3, Observable, Observable Plot, HTL, lalu menambahkan cukup banyak ide baru di atasnya

    • Secara pribadi, Polymaps masih menjadi karya ciptaannya yang paling saya sukai
    • Rasanya seperti sedang membuat sesuatu untuk agen pengembang AI yang “diperkuat manusia”
      Observable sudah punya integrasi AI, dan ini terlihat seperti wrapper yang membuat AI lebih mudah merangkai dan memanfaatkannya. Bagian yang mengevaluasi strategi tanpa AI terasa agak canggung
    • Dulu saya sudah mem-bookmark Observable dan Observable Framework, tetapi belum melihatnya secara mendalam
      Hari ini saya mulai mencari cara meng-host Jupyter Notebook statis atau menjalankannya secara interaktif dengan WASM, dan untuk sebagian besar kebutuhan, Observable Framework sepertinya lebih cocok

  • Masalah Observable adalah meski tampak seperti galeri contoh d3, kodenya dirancang untuk berjalan di dalam framework tersebut sehingga tidak bisa sekadar disalin-tempel
    d3 juga tidak mudah digunakan tanpa contoh, apalagi sering ada perubahan antarversi yang tidak kompatibel. Meski begitu, situsnya punya banyak grafik menakjubkan
    [0] https://observablehq.com/@d3/gallery

    • 100% setuju. Pada akhirnya sulit menerima bahwa ia sedikit berbeda dari JavaScript sungguhan
      Bahasanya cukup dekat dengan bahasa dasarnya, sehingga rasanya mereka sebenarnya bisa saja memakai JavaScript biasa dengan sedikit tambahan API untuk menampilkan grafik
    • Komunitas pernah menerbitkan materi untuk mengubah JavaScript ala Observable menjadi JavaScript biasa
      Sebagian besar pekerjaannya adalah menulis ulang definisi sel tingkat atas
      [0]: https://observablehq.com/@bumbeishvili/convert-observable-co...
    • Hal itu sangat membuat frustrasi. Rasanya seperti ketergantungan platform yang seharusnya tidak dibanggakan perusahaan mana pun
      Keluhan itu terutama besar pada notebook ObservableHQ. Ia menjadi contoh yang bagus sekaligus materi yang tidak berguna. Namun sisi Framework kali ini tampaknya lebih terbuka, dan setidaknya bisa di-host sendiri, jadi saya masih mengamatinya
    • Ini tampaknya lebih merupakan masalah d3 yang tidak menyediakan contoh yang bisa disalin-tempel ke tempat lain, bukan masalah Observable
      Selain itu, artikel ini membahas bahwa Observable Framework baru menghilangkan sebagian masalah notebook Observable lama, jadi komentar ini agak melenceng dari artikel. Sekarang pendekatannya semacam “semuanya JavaScript standar, tanpa sintaks kustom”

  • Framework juga sangat mudah dideploy ke GitHub Pages
    Saya merangkum langkah-langkah dan contoh GitHub Action di sini: https://notes.billmill.org/programming/observable_framework/...

  • Penulisnya tepat sekali soal Framework
    Saya mencoba membuat plot interaktif kecil dengan Observable Framework (https://github.com/willmeyers/observable-ssta), dan proses menyiapkan serta memplot data terasa luar biasa mudah. Satu-satunya keluhan saya adalah akan bagus jika data loader Python bisa dikonfigurasi agar memakai virtualenv

    • Saya memakai konfigurasi dengan poetry untuk menjalankan data loader Python di dalam virtualenv yang dikelola poetry
      Setelah membuat proyek Python, saat memulai server pengembangan, jalankan poetry run yarn run dev alih-alih yarn run dev, maka Python akan berjalan di dalam virtualenv. Konfigurasi ini memungkinkan kode yang dapat dipakai ulang dan diuji unit di data loader didefinisikan sebagai paket Python kustom, lalu diimpor dari file *.json.py agar tetap sangat sederhana
    • Bukankah ini bisa diselesaikan dengan nodeenv di Python? Biasanya saya melakukannya begitu saat menambahkan JS ke proyek
      Perangkat seperti node dan npm/yarn, serta JavaScript, ikut dipertahankan di dalam venv
    • Bukankah bisa menaruh shebang di data loader .sh, lalu menunjuk ke path lengkap bin/python di dalam direktori lingkungan virtual?

  • Baru-baru ini saya menyelesaikan proyek “praktis” pertama saya dengan notebook Observable
    Itu mencakup mempelajari Observable Plot dan Arquero, mempelajari kembali sebagian JavaScript, serta mengintegrasikannya dengan simulator berbasis Rust yang menjadi proses pembuatan data. Jujur saja, hasilnya benar-benar bagus. Memang butuh cukup banyak energi untuk mempelajari alat-alatnya, dan kemampuan memparameterkan generator data masih terasa kurang, tetapi notebook akhirnya indah dan berjalan baik
    Dengan Markdown dan reaktivitas, notebook seperti ini terasa benar-benar layak dipakai. Format kustom Jupyter sangat menyulitkan version control, dan tanpa reaktivitas, notebook yang dirancang secara iteratif mudah berubah menjadi kekacauan berbasis state yang gampang ditulis tetapi sulit dibaca. Saya juga mencobanya dengan Quarto dan integrasi Observable-nya, tetapi terasa seperti tambal-sulam sementara
    Sungguh, ini pengalaman pertama di mana menulis notebook dan membagikannya kepada orang lain terasa menyenangkan dan membuat antusias. Ke depannya pasti masih ada bagian-bagian yang kasar, tetapi setelah proyek ini, ia menjadi pilihan pertama saya di antara alat notebook

    • Jika mencari alternatif Quarto, ada baiknya melihat Living Papers yang baru dirilis, yang memungkinkan penulisan dokumen reaktif/statis dari satu sumber
      [0]: https://living-papers.vercel.app/

  • Jika ingin cepat mencoba dan mengutak-atik Framework di browser, saya sudah membuat Codespace devcontainer yang otomatis menyiapkan lingkungan Node dan Python
    [0]: https://github.com/dleeftink/observable-codespace

  • Apakah sebaiknya beralih dari Jupyter Notebook ke Observable? Atau justru pembagian seperti itu sendiri adalah kerangka yang keliru?

    • Pada akhirnya, menurut saya inti pertanyaannya adalah apakah kita lebih produktif dengan Python dan ekosistemnya, atau dengan JavaScript dan paket-paketnya, terutama hal-hal seperti D3

  • Kalau isi artikelnya diparafrasekan, semua yang ada di dalam blok kode dengan petunjuk konten js akan langsung dijalankan di browser pengguna
    Untuk menampilkan kode, harus memakai petunjuk js echo. Dari sisi kompatibilitas mundur, bukankah kebalikannya lebih baik? Misalnya kode yang dijalankan di browser pengguna dibuat sebagai petunjuk opt-in seperti js exec, sementara petunjuk js yang sudah umum dipakai dibiarkan apa adanya. Dengan struktur sekarang, saat renderer itu diintegrasikan ke aplikasi yang sudah ada, kita harus mengelola secara terpisah bagian mana yang diizinkan untuk dieksekusi

    • Ada rencana untuk memungkinkan opsi default blok diubah
      Bisa dilakukan per halaman lewat front matter, atau diterapkan ke seluruh proyek lewat konfigurasi proyek. Dengan begitu, js run=false bisa dijadikan default, lalu live code hanya diaktifkan dengan js run saat diinginkan. Namun karena kasus penggunaan utama kami adalah live code, kami memilihnya sebagai default
    • Benar. Ini masalah yang sama seperti GitHub yang otomatis merender diagram Mermaid
      Sekarang blok kode Mermaid tidak bisa ditampilkan begitu saja tanpa menghapus anotasi bahasanya

  • Saya menghabiskan semalam terpikat dengan Observable Framework, dan rasanya sangat bagus
    Hampir tidak mengganggu, dan saya bisa memvisualisasikan serta menjelajahi riwayat Google Maps saya secara rinci. Bagian terkait lingkungan data loader tidak sepenuhnya jelas, tetapi terselesaikan dengan menjalankan Python di lingkungan poetry
    Karena saya suka Kotlin, saya juga mencoba membuat data loader untuk skrip Kotlin, tetapi ada beberapa bagian yang kasar. Kotlin mengharapkan nama file skrip berupa foo.main.kts, sedangkan Observable mengharapkan ekstensi foo.exe untuk loader shebang yang dapat dieksekusi. Jadi saya membuat skrip exe proksi yang memanggil skrip Kotlin, tetapi dengan begitu pemuatan ulang data otomatis tidak terpicu
    Dibandingkan marimo atau Jupyter, ada sedikit ketidaknyamanan pada bagian penggunaan variabel antara data loader dan notebook. Misalnya saya ingin mengubah rentang data yang diambil loader melalui komponen tampilan pemilih tanggal, tetapi tidak jelas bagaimana melakukannya. Jadi analisis eksploratif menjadi sedikit lebih lambat. Saya tahu ini tidak sejalan dengan paradigmanya, tetapi ingin menyinggungnya. Akibatnya, saat bereksplorasi, sebagian besar pengolahan data bisa saja berpindah ke notebook, yang dari sudut pandang performa tidak ideal
    Terakhir, akan bagus jika data loader bisa didefinisikan secara inline. Saya suka file tunggal, jadi kalau kita menambahkan blok kode Python lalu Framework mengekstraknya menjadi file, itu akan menjadi peningkatan kecil dalam kualitas hidup. Masih tahap awal, tetapi Framework tampak menjanjikan. Saya berharap bisa memindahkan semua catatan Markdown saya ke sini dan membuat lingkungan seperti org-mode tanpa harus sampai memakai Emacs sepenuhnya

    • Terima kasih atas masukannya. Ada PR terbuka agar interpreter baru bisa didaftarkan dengan lebih mudah tanpa harus memutar lewat .sh atau .exe
      Nantinya kita bisa menentukan interpreter yang terhubung dengan ekstensi file tertentu. Misalnya .kts untuk Kotlin. https://github.com/observablehq/framework/pull/935
      Cara menggerakkan data loader dengan nilai input agak berbeda arahnya, karena Framework lebih menyukai snapshot data statis. Tujuannya agar situs yang dibangun bersifat mandiri dan berperforma baik. Meski begitu, teknik yang biasanya berhasil adalah membuat superset data yang ingin diinteraksikan sebagai file Parquet di data loader, lalu di sisi klien mengambil subset yang akan divisualisasikan dengan DuckDB/SQL. Biasanya performanya bagus, tetapi tentu bergantung pada ukuran superset yang ingin ditangani

  • Observable terintegrasi sangat baik dengan ClickHouse melalui REST API
    Contohnya ada di sini: https://observablehq.com/@stas-sl/github-issues-survival-ana...
    Saya belum mencoba Observable Framework yang baru, tetapi akan menarik melihat contoh serupa yang mengueri database secara real time. Saya berharap strukturnya tidak hanya memungkinkan semua data dimuat dan di-cache terlebih dahulu. Aplikasi seperti ini harus interaktif, jadi idealnya SQL bisa diekspos agar dapat diedit secara live