← 記事

Rubyでフロントエンドを書くデモアプリ

Glimmer DSL for Webの静的サイトデモ

友人のAndy Malehが開発した、革新的な新しいRubyライブラリー、Glimmer DSL for Web 0.2.3（ベータ版）を紹介できることをうれしく思います。
Glimmer DSL for Webは、ブラウザー上でRubyを動かすWeb GUIフロントエンドライブラリーです。フロントエンドアプリケーションのRubyコードをブラウザーで実行できるようにすることで、Web開発に変革をもたらします。これは、MatzがRubyConf 2022の基調講演で語った、フロントエンド開発でJavaScriptをRubyに置き換えるというビジョンにも沿ったものです。

‍
Glimmerの特長は、Rubyの哲学に沿ったシンプルさと生産性です。
単方向および双方向のデータバインディング、動的なHTMLレンダリング、Glimmer Web Componentsによるモジュール設計をサポートしています。ついにフロントエンドでもバックエンドでも、純粋なRubyの世界を楽しめるのです。

️
RailsもGlimmer DSL for Webの設定も不要で始められることを示すデモアプリケーションを作りました。こちらからご覧いただけます：Largo/glimmer-dsl-web-standalone-demo

特に、フロントエンドで動くアプリのコードであるscript.js.rbを見てみてください。


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