Fi brings Ruby-style DSLs to life in the browser

By /

In the world of front-end development, JavaScript is almost an unavoidable core language. But Basecamp (you probably know their products: Basecamp project management tool, Hey mailbox) has long adhered to one philosophy:

If you can do without JS, try not to use JS.

The Fizzy project was born from this concept.

It’s not a framework, it’s not a UI library, it’s a very special tool:
Fizzy lets you describe front-end behavior in a Ruby-style DSL and automatically compile it into executable JavaScript.

In other words,

You write Ruby, and it helps you generate JS. The browser only sees JS, but you see the elegance of Ruby.

What exactly is Fizzy?

Fizzy is a Ruby → JavaScript converter (more precisely, a DSL converter). Its main functions are:

  • Read Ruby-style declarative front-end behavior code (DSL)
  • Parse this code into an abstract syntax tree (AST)
  • Then compile the AST into JavaScript that can be executed by the browser
  • Finally, the built-in runtime is executed in the browser

While it sounds like magic, it’s essentially a front-end behavior compiler.

Why is there Fizzy?

Because Basecamp’s Hotwire/Turbo system focuses on:

  • Write as little JS as possible
  • Rely more on HTML + less declarative behavior to complete interactions
  • Make front-end development simpler and more maintainable

However, many front-end behaviors still require JavaScript, such as listening for events, updating the DOM, and so on.

Since the world of Hotwire is Ruby-centric , why not let the front-end behavior be written like Ruby too?

This is what Fizzy is all about:

Describe browser behavior in Ruby expressions and automatically convert it to JS.

Developers don’t need to write JS or understand complex callbacks, just write a Ruby-style DSL.

A simple example

Let’s say we want to output a sentence when we click on an element.

In a traditional front-end framework, you might write:

element.addEventListener("click", () => {
 console.log("Hello");
});

In the DSL behind Fizzy, you can write in Ruby style:

on click do
 console.log "Hello"
end

Fizzy will automatically convert it into the JavaScript equivalent of the previous one.

The effect is the same, but the style is completely different.

⚙️ How does it do it inside?

Fizzy’s structure is divided into three parts:

  1. Parser
    Responsible for analyzing Ruby-style DSLs and generating syntax trees.
  2. Compiler
    Convert syntax trees to modern JavaScript.
  3. Runtime
    The browser executes the smallest JS library to bind events and handle DSL behavior.

Who is it not for?

  • Developers who want to build a large SPA
  • Teams that rely heavily on React/Vue
  • People who want to write a lot of front-end business logic

What Fizzy does is not “enhance the JS ecosystem”, but “reduce JS usage”.

Its positioning is very clear:

Help the Ruby ecosystem reduce JavaScript, not replace front-end frameworks.

How to Use?

The project itself is still in a relatively low-level form, and the current usage tends to:

  • Access as the underlying mechanism of Hotwire/Turbo
  • Runs as a compiler for Ruby DSL in the build flow
  • Automatically generate JS bindings in combination with behavior declarations in HTML

For more details, check out the repository documentation (project provides examples, test code, runtime instructions).

Summary

Fizzy is a very fun, very “Basecamp-style” tool.

Its goal is not to make the front end more complex, but to make it simpler:

  • Write less JS
  • Write more Ruby-style DSLs
  • The behavior is handled automatically by the compiler
  • Standard JavaScript still runs in the browser

Github：https://github.com/basecamp/fizzy
Tubing:

Scroll to Top