Notebook HTML reaktif

 (maxbo.me)
1 poin oleh GN⁺ 2024-11-19 | 1 komentar | Bagikan ke WhatsApp
  • Hanya dengan satu file HTML yang dijalankan browser, eksplorasi data, analisis, visualisasi, tata letak, dan distribusi bisa digabung dalam satu dokumen, sehingga alur notebook→alat penerbitan→PDF yang ada dapat dipersingkat
  • Implementasi intinya menggabungkan sel echo yang menampilkan style dan script di layar, contenteditable, dan Observable Runtime untuk membuat sel reaktif yang dapat diedit
  • cell(name, inputs, definition) mengikuti model dependensi Observable untuk menyusun unit eksekusi yang saling terhubung seperti counter, render FizzBuzz, sel tersembunyi, dan sel nilai perantara tanpa output
  • Dalam dokumen HTML yang sama, didemonstrasikan Observable Plot, TeX, Markdown, Graphviz, SQLite berbasis WASM, Python berbasis Pyodide, R berbasis WebR, Observable Inputs, hingga status Mutable
  • Hasil akhirnya menjadi dokumen ilmiah dan teknis yang berjalan di browser tanpa platform terpisah, dan implementasinya kemudian dirilis sebagai pustaka @celine/celine

Memangkas pemisahan notebook-penerbitan dengan satu file HTML

  • HTML banyak digunakan untuk tata letak, tetapi relatif kurang dimanfaatkan sebagai platform eksplorasi data, analisis, dan visualisasi
  • Alur kerja umumnya melewati beberapa alat
    • Eksplorasi, analisis, dan visualisasi dilakukan di notebook interaktif seperti Jupyter, RStudio, Pluto.jl, dan Observable
    • Lalu dipindahkan ke platform penerbitan seperti Typst, Overleaf, LaTeX, atau editor WYSIWYG untuk tata letak
    • Untuk distribusi, hasilnya diekspor ke .pdf
  • Jika satu file HTML menangani ketiga tahap itu, prosedur manual, alat CLI, tahap CI, dan ketergantungan pada platform pihak ketiga bisa dikurangi
  • Implementasi ini sangat dipengaruhi oleh Anton Zhiyanov lewat In-browser code playgrounds, Cristóbal Sciutto lewat Self-modifying HTML notes, serta Quarto dan Observable Framework

Membuat sel yang dapat diedit

  • Langkah pertama adalah membuat elemen style dan script tetap terlihat di dalam dokumen dengan kelas CSS echo
  • Dengan font yang memiliki penyorotan sintaks bawaan dan atribut contenteditable, ini bisa dipakai seperti editor kode dasar
  • script yang diberi contenteditable akan dievaluasi ulang saat kehilangan fokus
    • script yang ada disalin untuk membuat elemen script baru, lalu yang asli dihapus
    • Cara ini diperlukan karena eval tidak bekerja pada kode yang berisi pernyataan import
  • Untuk eksekusi berbasis Observable, dua pustaka dimuat
  • Hanya dua simbol yang diekspos ke global: library dan cell

Alur data reaktif berbasis Observable Runtime

  • Fungsi cell(name, inputs, definition, observerVisibility) mendefinisikan sel menggunakan cakupan modul Observable Runtime
  • Jika variabel dengan nama yang sama sudah ada, variabel lama diambil; jika belum, variabel baru dibuat lalu didefinisikan
    • Berkat struktur ini, saat sel contenteditable dievaluasi ulang, definisi baru akan diteruskan ke sel-sel yang terhubung
  • Observable Inspector digunakan untuk menampilkan output sel di atas blok script
  • Sel counter disusun sebagai generator asinkron yang mengeluarkan angka setiap 1 detik
    • Atribut id pada script sama dengan argumen name pada cell
    • Jika nilai awal i diubah lalu fokus dilepas, nilai baru akan diterapkan
  • Sel yang bergantung pada counter juga bisa dibuat
    • Dengan memuat Hypertext Literal, nilai counter dirender dalam bentuk FizzBuzz
    • htl mengimplementasikan parser HTML5 dan menangani interpolasi dengan escape otomatis serta nilai nonserialisasi seperti event listener, objek style, dan node DOM

Sel terlihat, sel tersembunyi, dan sel tanpa output

  • Jika kelas echo tidak dipasang, definisi sel bisa disembunyikan sambil tetap mengamati output
    • Sel seperti ini dapat dipakai sebagai primitif rendering
  • Jenis sel yang sama sekali tidak menampilkan output juga bisa dibuat
    • silent(name, inputs, definition) mengatur observerVisibility menjadi tersembunyi agar bisa dipakai untuk menyimpan nilai perantara atau struktur data
  • Sel dapat bekerja tanpa bergantung pada urutan deklarasi
    • Dalam contoh, sel reallyNegative bergantung pada sel negative yang dideklarasikan kemudian
  • Nilai sel yang sama juga dapat digunakan untuk output yang lebih kompleks
    • Dengan memuat Observable Plot, array angka digambar sebagai grafik garis, lalu garis aturan vertikal ditampilkan pada posisi counter % 40

Perluasan output dokumen dan visualisasi

  • Sel dapat mengembalikan elemen DOM apa pun
  • Demo TeX, Markdown, dan Graphviz masing-masing mengembalikan elemen dengan bentuk berbeda
    • Sel tex mengembalikan elemen span
    • Sel md mengembalikan elemen table
    • Sel dot mengembalikan elemen svg
  • Sel dapat mengembalikan Promise atau melempar Error
    • Observable Inspector menerapkan kelas observablehq--running pada div di luar sel yang sedang berjalan
    • Untuk sel error, kelas observablehq--error diterapkan
    • Dokumen memberi gaya sesuai status tersebut

SQLite, Python, dan R di dalam browser

Input dan status yang dapat diubah

  • Tipe sel viewof dibuat untuk digunakan bersama Observable Inputs
  • viewof mendeklarasikan dua sel reaktif
    • NAME: nilai dari input
    • viewof NAME: elemen DOM itu sendiri
  • Untuk menampilkan input di atas sel, id sel harus diatur menjadi viewof NAME
  • Dalam contoh, input rentang dibuat dengan Inputs.range([0, 100], { step: 1 }), lalu sel rangePlot diperbarui sesuai nilainya
  • Cara kerja Observable Inputs agak sulit dipahami, dan demo Synchronized Inputs bisa membantu
  • Untuk kasus yang tidak cukup ditangani oleh alur data fungsional murni, helper mutable juga dibuat
    • mutable mendaftarkan objek Mutable yang mengeluarkan nilai baru saat nilainya berubah

Rilis pustaka dan slide presentasi

  • Implementasi ini awalnya dipikirkan bernama incel, tetapi kemudian ingin disebut celine
  • Pustakanya dirilis sebagai @celine/celine
  • Dokumen ini didemokan di SydJS
  • Juga disertakan kode untuk mengubah dokumen menjadi slideshow
    • Shift+N: mulai slideshow atau ke slide berikutnya
    • Shift+B: ke slide sebelumnya
    • Shift+E: keluar dari slideshow
  • Sumber implementasinya dipublikasikan sebagai source code

Bacaan terkait

1 komentar

 
GN⁺ 2024-11-19
Pendapat Hacker News

  • Saya sangat setuju dengan premis tulisan ini. HTML bisa menjadi fondasi yang sangat baik untuk notebook komputasional
    Namun, saya kurang suka pilihan implementasi di sini. HTML yang dinamis dan reaktif bisa dibuat jauh lebih deklaratif daripada ini, dan meski Observable itu keren, ada sisi yang menyimpang dari JavaScript standar
    Saya mulai membuat sistem HTML reaktif bernama Heximal, dan nantinya berencana menambahkan dukungan notebook juga. Ini adalah sistem deklaratif berbasis template HTML dan elemen kustom, dengan sistem ekspresi/reaktivitas berbasis proposal TC39 Signals di atasnya
    https://github.com/elematic/heximal
    Rasanya lebih seperti campuran HTMX, Tangle, Curvenote, dan Polymer; mungkin seperti inilah jadinya jika HTML sejak awal memang reaktif. Saya rasa ini cukup cocok untuk kasus penggunaan penyuntingan grafis dan notebook

    • Soal “Observable itu keren, tapi menyimpang dari JS standar” memang benar untuk frontend, tetapi runtime di lapisan bawah pada dasarnya hanya menjalankan JavaScript. Kode sumbernya juga lebih mirip JavaScript dengan makro kecil yang sepenuhnya berada dalam parser acorn berlisensi MIT
      Karena itu, ekspresi debugging JavaScript biasa berjalan dengan baik di Observablehq
      https://github.com/observablehq/parser
      Saya menyukai runtime Observable, jadi saya juga membuat decompiler yang bisa mengonversi dua arah antara source frontend dan representasi JS murni hasil kompilasi
      https://observablehq.com/@tomlarkworthy/observablejs-toolcha...
    • Saya penasaran apakah Observable Framework juga dipertimbangkan di sini. Itu dirilis pada Maret, dan salah satu fitur utamanya adalah menggunakan JavaScript standar, bukan peretasan sintaks yang dibuat di Observable Notebooks: https://observablehq.com/blog/observable-2-0#a-better-develo...

  • Benar-benar keren. Saya terutama menyukai demo Python dan SQLite. Menarik bahwa ini berawal dari loop penyuntingan lewat web (TTW) lalu disebut quine; itu memang masuk akal, tetapi kelemahan utamanya adalah persistensi
    TiddlyWiki pada dasarnya melakukan hal yang sama, tetapi menyimpan pekerjaan adalah masalah yang merepotkan. Sebab untuk mempertahankan sesuatu secara persisten, pada akhirnya diperlukan proses server headless terpisah
    Ketika dulu ingin membuat sesuatu yang mirip[0], saya pribadi memulai dari persistensi, dan tentu saja itu berarti file. Maksudnya file teks polos yang bisa diedit dengan editor untuk programmer serta disimpan dan didistribusikan lewat sistem file. Dengan cara ini, kita bisa menghindari keharusan mengimplementasikan ulang editor untuk programmer di dalam browser, yang bukan hal sepele
    Sebagai gantinya, muncul masalah harus menulis server yang cepat, tetapi itu juga masalah yang cukup menarik[1]. Di sini mereka menghindari masalah itu dengan memakai section contenteditable bawaan, tetapi setelah persistensi, ini adalah masalah terbesar berikutnya
    Ketidakmampuan melakukan export di dalam skrip tertanam juga tampak seperti dinding yang sama. Agar tidak mengotori objek global window, fitur semacam ini akan berguna, dan dalam kasus penggunaan saya, itu juga akan membuat pembuatan kode lebih mudah
    0 - Literate Markdown: https://simpatico.io/lit.md
    1 - Reflector, server node kecil yang mengonversi, mengompresi, dan melakukan cache Markdown serta invalidasi melalui pengawasan file: https://simpatico.io/reflector

  • Saya menghargai pemikiran dan upaya yang dicurahkan, tetapi usability pendekatan ini buruk sekali. Saat sedang melakukan exploratory data analysis, saya tidak mengerti kenapa harus ikut memikirkan elemen styling
    Di sinilah alasan mengapa alat seperti Jupyter Notebook berhasil. Meski begitu, saya sangat menghargai rasa ingin tahu dan upaya mengimplementasikan ide alternatif ini

    • Penulis: Saya juga menyayangkannya, tetapi saya setuju bahwa usability cara ini buruk sekali, dan ini menjadi bagian besar motivasi saya membuat @celine/celine (https://maxbo.me/celine, yaitu mengemas tulisan sebagai library)
      Sebagai platform exploratory data analysis, ini memang belum cukup. Ini tidak memiliki reaktivitas instan dari editor kode web lengkap seperti Observable Notebooks, dan juga bukan Observable Framework yang menyediakan hot reloading berbasis file watching. Kernel Jupyter baru untuk Deno + VSCode juga memberikan pengalaman yang cukup mulus
      Jadi untuk usability eksplorasi analisis, hmm… saya setuju ini buruk, tetapi menurut saya usability untuk distribusi tidak seburuk itu. Malah bagus. Karena ini hanya satu file. Jika ingin mengirim grafik dan hasil pengolahan data kepada seseorang, tidak perlu memelihara toolchain besar atau membayar layanan pihak ketiga; cukup lempar satu file HTML ke Slack atau host di suatu tempat
      Fleksibilitas untuk menata hasil analisis juga memungkinkan publikasi di lingkungan yang gaya tampilannya penting, seperti blog atau makalah riset
    • Sekilas, sepertinya ini ingin diposisikan ke arah “analisis DOM eksploratif”. Demo perkenalannya terasa seperti Scheme/Smalltalk karena bekerja sambil membangun struktur dan elemen dasar, dan adegan ketika ivory diubah menjadi red lalu syntax highlighting berubah secara real-time menunjukkan hal itu
      Saya paham latar belakang sampai ke sini, tetapi sayang sekali framework dan library JavaScript tidak bisa lebih mudah dimainkan di browser. Pada akhirnya ini hanya JS, jadi seharusnya bisa dieksperimenkan cepat di lingkungan yang ringan. Pendekatan ini punya kekuatan dalam hal itu
      Ini adalah cara untuk menghadirkan kembali kemungkinan HTML/JS yang playful dan eksperimental. Saya berharap ada lebih banyak upaya seperti ini daripada TS, rollup, webpack, dan sejenisnya
      Tambahan: Setelah membaca sedikit lebih lanjut, ternyata ini diusulkan untuk analisis data. Menurut saya ini kurang cocok untuk penggunaan itu
    • Katanya “hanya ingin melakukan exploratory data analysis”, tetapi inti sebenarnya mungkin adalah memiliki platform terintegrasi untuk melakukan exploratory data analysis dan dengan mudah mempublikasikan hasilnya. Ini bukan untuk Jupyter Notebook yang akan dibuang
      Menurut saya ada nilai besar pada alternatif Jupyter Notebook yang tidak berakhir dibuang begitu saja. Pengalaman pengguna yang saat ini benar-benar buruk masih bisa diperbaiki. Pertanyaannya adalah apakah susunan ini lebih baik daripada kekacauan JSON Jupyter Notebook, dan secara pribadi saya cenderung menjawab ya

  • Pembuat asli Lit baru-baru ini meninggalkan Google, dan setahu saya sedang mengerjakan sesuatu yang sangat mirip
    https://github.com/elematic/heximal

    • Saya tidak tahu bahwa ia sudah memublikasikan apa yang sedang dikerjakannya setelah itu. Terima kasih sudah memberi tahu

  • Saya suka format tulisan ini. Dimulai dari dasar lalu disusun sampai menjadi sesuatu yang menarik. Ini bukan alur berlebihan yang menempelkan tumpukan dependency atau berbagai framework di sana-sini
    Untuk mengikutinya, sepertinya cukup salin-tempel potongan-potongan yang diberikan dan pahami langkah demi langkah cara kerjanya. Kalau saya menulis sesuatu seperti ini, mungkin saya akan menulisnya dengan literate programming di org-mode, lalu mengekspornya ke HTML sebagai tulisan blog
    Namun font dengan syntax highlighting bawaan masih terasa meragukan bagi saya

  • Dibilang HTML reaktif, tetapi bukankah hampir semuanya JavaScript, atau saya salah paham?

    • Bagian interaksi/reaktifnya memang JavaScript, tetapi notebook ini diimplementasikan di dalam file HTML yang self-contained. Semuanya ditangani, mulai dari struktur dokumen hingga pengeditan dan tampilan
      Selain browser, ini tidak bergantung pada perangkat lunak pihak ketiga, dan seperti HTML, ini tahan lama, portabel, serta mudah digunakan
    • Rasanya seperti, “Kenapa semua orang memakai Colab atau Observable untuk menjalankan notebook di browser? Bagaimanapun, untuk bagian yang sulit saya akan menawarkan alternatif yang memakai Observable”

  • Dalam waktu dekat saya ingin mencoba mendukung notebook HTML semacam ini di Raku, atau untuk Raku
    Saat ini “solusi notebook” Raku berbasis Jupyter atau berbasis Mathematica

  • Saya kurang paham logika penggunaan teknologi web untuk membuat proses ini menjadi rumit. Kompleksitas tambahan itu menyelesaikan apa? Justru lebih mirip memperlambat proses dan menghilangkan fitur-fitur yang diperlukan seperti autocomplete, snippet, dan extension
    Selain itu, kemungkinan besar orang lain tidak terbiasa dengan setup ini, sehingga kolaborasi juga menjadi lebih sulit
    Lingkungan cukup disiapkan sekali saja, lalu terus dipakai sambil menambahkan perbaikan kecil seiring perubahan teknologi
    Jika Anda pengguna n/vim, hal berikut sudah cukup bisa dilakukan. 1- Eksplorasi data: gunakan https://github.com/untitled-ai/jupyter_ascending untuk menghubungkan teks ke Jupyter notebook. Karena menggunakan jupytext, Anda bisa mengedit dan menjalankan kode secara efisien dari editor teks
    2- Menulis: untuk LaTeX, Anda bisa memakai https://github.com/lervag/vimtex
    Dengan menambahkan tmux dan tmuxp di atasnya, proyek bisa langsung dibuka. Di Emacs, org mode[1][2] dan/atau Auctex dapat digunakan untuk membuat proses yang mulus
    [1] https://sqrtminusone.xyz/posts/2021-05-01-org-python/
    [2] https://martibosch.github.io/jupyter-emacs-universe/

    • Saat menyalakan Jupyter notebook di browser, teknologi apa yang dipakai? Saat membuka situs web OP, teknologi apa yang dipakai?
    • Secara umum ini poin yang bagus
      Namun saya tidak terlalu suka Python, jadi ingin memakai alat yang tidak berpusat pada Python. Itulah alasan saya menyebut Raku dan Mathematica
      Ngomong-ngomong, terima kasih sudah memberi tahu tentang https://github.com/imbue-ai/jupyter_ascending
    • Setuju. Orang yang menginginkan notebook reaktif sebaiknya serius mempertimbangkan Emacs. Banyak pengguna memakai Emacs hanya untuk beberapa kegunaan, dan notebook reaktif sering kali menjadi salah satunya

  • Saya secara umum setuju dengan premis tulisan ini, yaitu bahwa HTML belum dimanfaatkan secara memadai sebagai media distribusi untuk penulisan ilmiah
    Ada karya terbaru Will Crichton yang terkait dengan hal ini
    https://willcrichton.net/nota/
    https://willcrichton.net/notes/portable-epubs/

  • Belakangan ini notebook memang sedang panas. Kami juga merilis versi notebook TypeScript[1], tetapi mengambil sisi yang cukup berbeda dalam trade-off-nya
    Karena kami ingin menjalankan kode node backend, berbeda dari pendekatan tulisan ini maupun Observable, kami tidak mencoba menjalankannya di lingkungan browser. Meski begitu, untuk banyak aplikasi, ide ini mungkin merupakan solusi yang lebih baik
    Apresiasi untuk penulisnya
    https://github.com/srcbookdev/srcbook