Bonsai: Jane Street's Incremental UI Library for OCaml

Overview

Bonsai is a UI library designed for building performant, reactive web applications using Js_of_ocaml. Developed by Jane Street, it is used for the majority of the firm's internal web applications, ranging from corporate directories to trading system monitoring tools. The framework is partly inspired by Elm and treats components as purely functional state machines.

Core Architecture and State Management

Bonsai separates state, incrementality, and rendering into distinct primitives rather than bundling them into a single "component" abstraction. This design allows developers to compose state and incrementality a la carte.

Incremental Rendering

Bonsai employs incrementalization to ensure that values—including business logic computations and views—are only recomputed when their relevant state changes. This prevents the need to re-render entire pages during user interaction, allowing expensive computations on live-updating datasets to remain efficient.

Decoupled State Lifecycle

Because state is not tied to explicit components, Bonsai provides an API to manage the lifecycle and scoping of state. This eliminates the need to manually "hoist" state to a top-level model when embedding stateful components within other components, such as in a tabbed interface.

Language Integration and Tooling

By using OCaml for both the frontend and backend, Bonsai allows for shared types and business logic across the entire stack. This integration reduces errors through the pervasive use of OCaml's type system and simplifies the process of porting existing terminal-based business logic to the web.

Pre-processors and Testing

Bonsai includes several specialized tools to streamline development:

  • ppx_html: A pre-processor for writing HTML, similar to JSX.
  • ppx_css: A pre-processor for writing CSS.
  • Automated Testing: Bonsai enables programmatic manipulation of UI elements to observe DOM evolution. Tests can include mock server calls and assertions on state changes, allowing developers to build components without a browser.

The Bonsai Ecosystem

Bonsai is a collection of libraries rather than a single framework. The core bonsai library provides the foundation for building incremental, composable state machines, which is then extended for specific environments:

  • Bonsai_web: Specializes the core library for interactive browser-based UIs.
  • Bonsai_term: Adapts the core library for interactive terminal-based UIs.
  • Bonsai_test: Provides testing utilities for the core state machines.

Community Perspectives and Critiques

Discussion surrounding Bonsai highlights a tension between technical utility and aesthetic design.

Utility vs. Aesthetics

Some users view the library's output as highly functional and information-dense, comparing it to a "Bloomberg terminal style" that prioritizes speed and utility. Conversely, other critics argue that the resulting UIs appear unpolished or dated, with one user noting that the elements look like they are "straight out of the 1990s."

Technical Trade-offs

Community members have raised several technical points regarding the framework's implementation and ecosystem:

"JSOO does not have tail call optimization," necessitating a userland trampoline for certain operations.

There are also questions regarding how Bonsai compares to other OCaml-to-JS solutions like Melange and whether using Bonsai requires sacrificing access to the broader JavaScript ecosystem (e.g., React or GraphQL).

Sources