Observable：Markdown中可嵌入JavaScript的Notebook

Observable 2.0是一個開源靜態站點生成器，用於構建快速、美觀的資料應用程式、儀表板和報告。

什麼是Observable 2.0框架
從本質上講，Observable Framework 是一個靜態站點生成器。你給它混合了 Markdown 和 JavaScript（也可能是其他語言），它會將它們全部編譯成快速載入的互動式頁面。

它配備了功能齊全的熱過載伺服器，因此您可以在編輯器中編輯這些檔案，點選儲存並檢視立即反映在瀏覽器中的更改。

一旦您對工作感到滿意，您可以執行構建命令將其轉換為一組準備部署到伺服器的靜態檔案，或者您可以使用該命令將npm run deploy其直接部署到 Observable 自己的經過身份驗證的共享平臺。

設計亮點：Markdown 中的 JavaScript
Observable Framework 設計的關鍵在於它在 Markdown 中使用 JavaScript 建立互動式文件的方式。

# This is a document

Markdown content goes here.

This will output 1870:

```js
34 * 55
```

And here's the current date and time, updating constantly:

```js
new Date(now)
```

The same thing as an inline string: ${new Date(now)}

任何標記為 js 的 Markdown 程式碼塊都將在使用者的瀏覽器中以 JavaScript 的形式執行。這是一個非常強大的抽象概念--您可以在 JavaScript 中做的任何事情（如今實際上是任何事情）現在都可以無縫整合到您的文件中。

在上面的示例中，now 值非常有趣--它是一個特殊的變數，以毫秒為單位提供自紀元以來的當前時間，並不斷更新。由於 now 會不斷更新，因此單元格的顯示值和內聯表示式也會不斷更新。

如果你以前使用過 Observable Notebooks，就會感覺很熟悉--但 Notebooks 涉及在不同單元格中編寫的程式碼和標記符。有了 Framework，它們現在都是單個文字文件的一部分。

一切仍是reactive 
Observable Notebooks 的最大特點是其反應性--當單元格所依賴的其他單元格發生變化時，單元格會自動重新整理。這與 Python 流行的 Jupyter 筆記本有很大不同，也是新的 Python 筆記本工具 marimo 的標誌性特點。

Observable Framework 在其新的 JavaScript Markdown 文件中保留了這一功能。

這在處理表單輸入時特別有用。你可以將一個輸入項放到頁面上，然後在文件的其餘部分引用它的值，這樣就可以非常輕鬆地為文件新增實時互動性。

下面是一個例子。我將我最喜歡的一個favourite notebooks 移植到了 Framework，它提供了一個檢視我的各種 Python 軟體包下載統計資料的工具。

在構建時快取資料
Framework 最有趣的功能之一就是它的資料載入器機制。

使用 Framework 構建的儀表盤可以在執行時使用 fetch() 請求（或其包裝器）從任何地方載入資料。這也是 Observable Notebooks 的工作方式，但它會讓儀表盤的效能受到與之對話的後端裝置的影響。

儀表盤可以從快速載入中獲益。框架鼓勵一種模式，即在部署時為儀表盤構建資料，將資料捆綁到靜態檔案中，其中只包含儀表盤所需的資料子集。這些檔案可以與儀表盤程式碼本身一樣，透過相同的靜態主機以閃電般的速度載入。

資料載入器的設計簡潔美觀，功能強大。資料載入器是一個可以用任何程式語言編寫的指令碼。在構建時，Framework 會執行該指令碼，並將輸出的內容儲存到檔案中。

資料載入器可以像下面這樣簡單，儲存為 quakes.json.sh：
curl https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson

構建應用程式時，該檔名會告訴 Framework 目標檔案（quakes.json）和要執行的載入器（.sh）。

這意味著你可以使用任何技術從任何來源載入資料，只要它能將 JSON 或 CSV 或其他有用的格式輸出到標準輸出。

與 Observable Notebooks 的比較
邁克介紹的 Observable Framework 是 Observable 2.0。我們不妨回顧一下這個系統與最初的 Observable Notebook 平臺的比較。

多年來，我一直是 Observable Notebooks 的忠實擁躉，至今已有 38 篇博文！最明顯的對比是 Jupyter Notebooks，它們有一些關鍵的不同之處：

• Observable 筆記本使用 JavaScript，而不是 Python。
• 筆記本編輯器本身不是開源的--它是在 observablehq.com 上提供的託管產品。你可以將筆記本匯出為靜態檔案，並在任何地方執行，但編輯器本身是一個專有產品。
• Observable 單元是反應式的。這是與 Jupyter 的主要區別：每次更改單元格時，依賴於該單元格的所有其他單元格都會自動重新評估，這與 Excel 類似。
• 他們使用的 JavaScript 語法並不完全是標準的 JavaScript--他們不得不發明一個新的 viewof 關鍵字來支援他們的反應性模型。
• 可編notebooks是一種相當複雜的專有檔案格式。它們不能很好地與 Git 等工具配合使用，以至於 Observable 最終不得不實施自己的定製版本控制和協作系統。

Observable Framework 重複使用了 Observable Notebooks 中的許多想法（和程式碼），但也有一些重要的不同之處：

• notebook（實際上是文件）現在是單個文字檔案--帶有嵌入式 JavaScript 塊的 Markdown 檔案。這一切仍然是反應性的，但檔案格式要簡單得多，可以使用任何文字編輯器進行編輯，也可以在 Git 中進行檢查。
• 這一切都是開源的。一切都在 ISC 許可（OSI 批准）之下，你可以在自己的機器上執行整個編輯棧。
• 現在所有內容都是標準 JavaScript，沒有自定義語法。