Building a UI Framework with Ty Overby

Ty Overby's Background and Personal Projects

• Ty Overby joined Jane Street in 2018 after studying at the University of Washington and working on compilers at Microsoft.
• His primary hobby involves "programmatic CAD," creating a Computer-Aided Design library where shapes are defined by mathematical functions rather than manual drawing tools.
  • He utilizes "Functional Representation" (F-reps) or implicit surfaces, where boundaries are defined as the zeros of distance functions.
  • This approach simplifies shape combinators (e.g., union is max, intersection is min), whereas Boundary Representations (B-reps) used in tools like OpenSCAD or Blender make these operations difficult.
  • A major trade-off of F-reps is the difficulty of converting the implicit mathematical representation into a B-rep (polygons) required for 3D printing or game engines, a process Ty notes is not yet solved perfectly even by the robust lib5 library by Matt Keeter.

Evolution from InkerDOM to Bonsai

• Jane Street previously used "InkerDOM," a library combining the Elm Architecture pattern with an internal incrementalization library called "Incremental."
  • InkerDOM allowed for incremental computation of state machine transitions (apply_action functions), which enabled efficient sharing of intermediate data structures like sorted table data.
  • However, InkerDOM required significant boilerplate (estimated at 50–70 lines of code) to compose child components into a parent, leading developers to build monolithic applications rather than modular ones.
• Ty designed "Bonsai" to solve the composability issues of InkerDOM by introducing a different structural paradigm.
  • Bonsai redefines components as directed acyclic graphs (DAGs) rather than trees, allowing data to flow from any component to any other component without traversing up and down a parent hierarchy.
  • Components in Bonsai are generalized "computation" units that produce arbitrary results, not just UI views; Ty notes that over half of the components he writes do not manipulate views directly.
  • Bonsai components encapsulate their model and action types locally, exposing only the result type to the outside, which forces explicit interfaces and better encapsulation.

Technical Architecture and Compiler Integration

• Bonsai functions as a "meta-language" embedded within OCaml, structured as a static Directed Acyclic Graph (DAG) defined before runtime.
  • This static structure allows the system to perform compiler optimizations like constant folding and algorithm selection at startup, before the application begins running.
  • The workflow involves three layers: OCaml (meta-language for composing the DAG), a Bonsai-specific language for internal logic (if, recursion, functions), and OCaml for the actual business logic executing within nodes.
  • The system uses OCaml's PPX (preprocessor) extensions to make Bonsai syntax appear as standard OCaml, hiding the underlying complexity and avoiding the need for users to understand advanced concepts like monads immediately.
• A key constraint of Bonsai is purity; it requires all logic to be pure, making it incompatible with mutation-heavy external UI libraries unless wrapped in a virtual DOM abstraction.
• The library is not dynamic at runtime; the component graph structure is fixed at the "compile" time (application startup), which limits some dynamic flexibility but enables powerful debugging and optimization capabilities.

Challenges, Future Work, and Platform Critique

• CSS styling remains a weak point in Bonsai due to potential class name clashes between component authors.
  • To address this, a new PPX is being developed to extract CSS from OCaml files, hash the contents and filenames to generate unique, collision-free class names, and inject these back into the virtual DOM.
• Ty identifies a need to reduce verbosity in OCaml syntax, particularly in variable binding, which will be alleviated by the upcoming "let punning" feature in OCaml.
• Jane Street's specific constraints (high-speed networks, internal use, single-page applications) allow them to bypass common web development limitations like large JavaScript bundle sizes or server-side rendering requirements.
• Ty critiques the current web platform, noting that the DOM and JavaScript remain the only runtime options, which forces developers to re-implement complex features (like text selection) if they want more control than the browser offers.
  • He hopes for future browser APIs like "Houdini" to provide direct access to layout engines and graphics renderers.
• He expresses admiration for other UI systems that balance power and ease of use:
  • Svelte: Praised for compiling UI components ahead of time to eliminate overhead and prevent common composition errors.
  • Excel: Cited as the most successful UI system for data analysis due to its tight coupling of data input, visualization, and formula editing.
  • Blender: Appreciated for its node-based shading system, which offers exceptional debuggability by allowing visual inspection of intermediate computation steps in real-time.