盆景 盆景是一个用于在 OCaml 中构建高性能、响应式 Web 应用程序的 UI 库，部分灵感来自 Elm。它用于构建 Jane Street 内几乎所有的 Web 应用程序，从公司目录到监控和与我们的交易系统交互的工具。一 个简单的盆景组件，带有一点交互性，如下所示： module Dice = struct let faces = [ " ⚀ " ; " ⚁ " ; " ⚂ " ; " ⚃ " ; " ⚄ " ; " ⚅ " ] ;; let component ( graph @ local ) = (* 组件被实现为纯函数状态机。 *) let face, set_face = Bonsai.state ( List.hd_exn faces ) graph in (* 组件是增量渲染的，仅在相关状态改变时才会渲染。 *) let % arr face and set_face in {%html| <div> 你掷出了 #{face} <button style="" on_click=%{fun _ -> let index = Random.int ( List.length faces ) in set_face ( List.nth_exn faces index)}> 掷骰子 </button> </div> |} ;; end 大多数内部 Jane Street Web 应用程序都是使用盆景构建的。组件被实现为纯函数状态机，并且易于组合。框架内部的增量化表示值直到必要时才会重新计算。这适用于每个值，而不仅仅是视图。 为什么选择盆景？其他 Web 框架往往将状态、增量性和渲染捆绑在一个抽象概念中，即 UI 组件。相反，盆景允许你单独组合状态和增量性原语。在用户交互过程中，防止重新渲染整个页面的相同原语也可以用于在实时更新的数据集上增量化昂贵的业务逻辑计算。（如果你习惯于 React，可以想象一下，如果所有东西都使用非常类似于 hooks 的东西，而状态在组件层次结构之外进行管理。）由于状态不与显式组件关联，因此有一个广泛的 API 来管理状态的生命周期和作用域，以便用户与页面交互。例如，如果你想在另一个 UI 组件中嵌入一组状态组件（比如在选项卡式界面中），盆景将为你处理状态管理，而不需要你手动将每个内部组件的状态提升到应用程序的顶层模型。 有关状态如何组合的更多示例，请参阅盆景创作者撰写的此组合比较。由于盆景是用 OCaml 编写的，因此可以在后端和前端使用相同的语言和类型。这对代码的可读性和管理大型 Web 应用程序的代码库影响深远，特别是在你广泛使用 OCaml 的类型系统来减少错误时。在 Jane Street，许多内部系统之前只具有终端用户界面，该框架使得将现有的类型和业务逻辑移植到 Web 上变得简单。 盆景还带有一个强大的模板语言，支持组件特定的样式表，以及一个用于全应用程序自动化测试的系统。可表达的测试使你免于手动点击应用程序。 盆景的一个最强大的功能是能够让你轻松编写逼真的测试，在测试中你可以编程方式地操控 UI 元素并观察 DOM 的演变。在以下示例中，我们测试用户选择器的行为。你在文本框中输入的任何内容都会附加到一个小“小部件”消息中： let % expect_test "显示给指定用户的 hello" = let handle = Handle.create ( Result_spec.vdom Fn.id) hello_textbox in Handle.show handle; [ % expect { | <div><input oninput>< / input ><span>hello< / span > < / div > | }]; Handle.input_text handle ~get_vdom: Fn.id ~selector: "input" ~text: "Bob"; Handle.show_diff handle; [ % expect { | <div><input oninput>< / input > - <span>hello< / span > + <span>hello Bob< / span > < / div > | }]; 注意，there are two expect blocks.（这允许你在给定场景中进行多个断言，并将设置/辅助代码的范围限制在该场景内。）第一个使我们的 UI 可见，第二个——包含差异——显示你以编程方式输入文本后的某些行为。盆景甚至会向你显示 html 属性或类名在用户输入时如何变化。测试可以包含模拟服务器调用，并且可以涉及对 UI 及其驱动的状态的更改。通过这些测试，你可以在不打开浏览器的情况下编写整个组件。 文档 盆景快速入门和盆景思考为盆景提供了动手介绍，是学习盆景的最佳起始点。还有： - 一系列如何做的文章。 - 一小系列关于盆景历史的帖子。 - 我们的“构建 UI 框架”播客中的一个插曲。 - 另一个关于“构建交易工具”的插曲讨论了使用盆景的一些好处。 - 一个装满使用盆景构建的示例网站的库。 - API 文档可以在 cont.mli 中找到。