Ruby on the frontend demo app

Glimmer DSL for Web Demo static site demo

Excited to share about a innovative new Ruby library, Glimmer DSL for Web 0.2.3 (Beta), developed by my friend Andy Maleh! Glimmer DSL for Web is a Ruby in the Browser Web GUI Frontend Library that revolutionizes web development by enabling Ruby code to run in the browser for frontend applications. This aligns with Matz's vision shared in his RubyConf 2022 keynote speech to replace JavaScript with Ruby for frontend development.

‍ What sets Glimmer apart is its simplicity and productivity, following Ruby's philosophy.
It supports Unidirectional and Bidirectional Data-Binding, dynamic HTML rendering, and modular design with Glimmer Web Components. You can finally enjoy pure Rubyland on both frontend and backend!

️ I've created a demo application to showcase how to get started with Glimmer DSL for Web without needing Rails or any configuration. You can check it out here: Largo/glimmer-dsl-web-standalone-demo

Especially check out script.js.rb which is the app code that will run on the frontend.

include Glimmer

class State
 attr_accessor :name
 attr_accessor :welcome_text

 def name=(value)
    @name = value
    update_welcome_text
    puts "update name"
  end

  private

  def update_welcome_text
    self.welcome_text = "Welcome! #{@name}"
  end
end

@state = State.new

Document.ready? do
    div {
        label('Name: ', for: 'name-field')
        @name_input = input(type: 'text', id: 'name-field', required: true, autofocus: true) {
            value <=> [@state, :name]
        }
    }
    div {
        inner_text <= [@state, :welcome_text]
    }
    button('Greet') {
        onclick do
          $$.alert("Hello, #{@state.name}!")
        end
    }
end