bonsai: A library for building dynamic webapps, using Js_of_ocaml

Bonsai is a UI library designed for creating efficient, reactive web applications in OCaml, with roots in Elm. It is employed to construct the majority of web applications at Jane Street, ranging from corporate directories to tools that oversee and interact with trading systems. A Bonsai component, which includes interactivity, might appear as follows: Components are modeled as purely functional state machines and are conveniently composable.

The framework's incrementalization ensures that values are not recalculated unless absolutely necessary, affecting every value, not just the view. Unlike other web frameworks that combine state, incrementality, and rendering into a single abstraction, Bonsai enables the separate composition of state and incrementality primitives.

These primitives can simultaneously prevent the entire page from re-rendering during user interaction and enable incrementalization of computationally expensive business logic on live-updating datasets. In situations where state is not tied to explicit components, Bonsai provides a comprehensive API for managing state lifecycle and scoping as users interact with the page.

For instance, when embedding a collection of stateful UI components within another UI component (such as in a tabbed interface), Bonsai handles state management, eliminating the need for manual state hoisting to the app's top-level model. Due to Bonsai's OCaml foundation, it becomes feasible to utilize the same language and types on both backend and frontend, significantly enhancing legibility and manageability of large web app codebases, particularly when leveraging OCaml's type system to minimize errors.

At Jane Street, many internal systems, which initially only featured terminal UIs, have been streamlined to the web using Bonsai. The framework also offers a robust templating language, component-specific stylesheets, and an automated testing system for whole applications. One of Bonsai's most potent features is its capacity to facilitate the creation of realistic tests, enabling the programmatically manipulation of UI elements and observation of DOM evolution.

In the given example, we are testing a user-selector; whatever text is entered into the text box gets added to a "hello" message. Notably, there are two expect blocks, allowing multiple assertions within a scenario and the scoping of setup/helper code to that specific scenario. The first expect block makes the UI visible, while the second, containing a diff, demonstrates behavior after programmatically inputting text.

Bonsai can even illustrate how HTML attributes or class names change in response to user input. Tests can incorporate mock server calls and encompass changes to both UI and driving state. With such tests, an entire component can be written without opening the browser. The Bonsai Quick Start and Thinking in Bonsai provide hands-on introductions to Bonsai and are the optimal starting points for learning about it.

However, there is a caveat: Bonsai, as a library, is more generic than initially suggested. It allows the construction of general-purpose incremental, composable state machines. Bonsai_web is a library dedicated to building interactive browser-based UIs using Bonsai, while Bonsai_term focuses on creating interactive terminal-based UIs using Bonsai.

Web applications built with Bonsai frequently employ preprocessors, one of which is Js_of_ocaml, a library for developing dynamic web applications using JS_of_Ocaml.