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，没有自定义语法。