Clapton

Clapton is a framework for building real-time web applications in Ruby.

app/components/like_button_component.rb:

class LikeButtonComponent < Clapton::Component
  def render
    button = c(:button)
      .add(c(:text, "Like! #{@state.count}"))
      .add_action(:click, :LikeButtonState, :countup)

    c(:box).add(button)
  end
end

app/states/like_button_state.rb:

class LikeButtonState < Clapton::State
  attribute :count

  def countup(params)
    Like.create
    self.count = params[:count] + 1
  end
end

Quick Start

First, install Rails and Clapton, and create the necessary resources.

rails new clapton-sample
cd clapton-sample
bundle add clapton
rails generate model like
rails db:migrate
rails generate controller likes index
rails generate clapton like_button

Add the necessary tags to the template.

app/views/layouts/application.html.erb:

- <%= javascript_importmap_tags %>
+ <%= clapton_javascript_tag %>

app/views/likes/index.html.erb:

<%= clapton_tag %>

Mount Clapton to the routing.

config/routes.rb:

mount Clapton::Engine => "/clapton"

Create the component and state.

app/components/like_button_component.rb:

class LikeButtonComponent < Clapton::Component
  def render
    button = c(:button)
      .add(c(:text, "Like! #{@state.count}"))
      .add_action(:click, :LikeButtonState, :countup)

    c(:box).add(button)
  end
end

app/states/like_button_state.rb:

class LikeButtonState < Clapton::State
  attribute :count

  def countup(params)
    Like.create
    self.count = params[:count] + 1
  end
end

Last, mount the component to the controller.

app/controllers/likes_controller.rb:

class LikesController < ApplicationController
  def index
    @likes = Like.all
    @components = [
      [:LikeButton, { count: @likes.count }],
    ]
  end
end

Start the server and navigate to http://localhost:3000/likes/index.

rails s

Features

Reactivity

Clapton automatically updates the UI in response to state changes.

button.add_action(:click, :LikeButtonState, :countup)

Flexible Component Definition

Define the component with a simple Ruby.

button = c(:button)
button.add(c(:text, "Like! #{@state.count}"))

Access to browser API

Access to browser API using window object or document object and so on.

window.localStorage.getItem("foo")

Dependencies

• ActionCable: Synchronize UI and database bidirectionally using built-in WebSocket.
• Ruby2JS: Convert Ruby code to JavaScript code.
• Morphdom: Fast DOM diffing algorithm.
• import-maps: Compiled JavaScript maintains the cache of unchanged files.