orbital ring その1

ruby.wasmを使ってRubyでフロントエンドフレームワークをつくったらどうなるかを考えてみましょう。

テンプレートエンジンはERBを使うと良さそうです。

イベントハンドラーのバインドはRailsのルーティングっぽくなる良さそうです。 次のイメージです。

OrbitalRing.routes.draw do
  click ".ok_button", to: "task.done"
  ...
end

アプリケーションのレンダリング先のHTMLElementのidはangular風にapp_root固定にしましょう。

たぶんこんな感じで初期化します。

1. RubyスクリプトでOrbitarRing.initializeを呼ぶ
2. OrbitarRing.initializeはLayoutを継承したクラスのnew("#app_root")を呼ぶ
3. Layout#newはクラス内に定義されたテンプレートを呼び出す

def initialize(selector)
  JS.global.querySelector(selector)[:innerHTML] = template.result
end

def template
  ERB.new(<<~'END_HTML')
    <%= Task.reder_all %>
  END_HTML
end

class Task
  def self.render_all
    template_all.result_with_hash elements: all
  end

  def self.template_all
    ERB.new(<<~'END_HTML')
      <ul class="tasks">
        <% elements.each do %>
          <%= _1.render %>
        <% end %>
      </ul>
    END_HTML
  end

  def reder
    template.result_with_hash element: self
  end

  def template
    ERB.new(<<~'END_HTML')
      <li>
       <%= element.name %>
       <button class="ok_button" data-id="<%=id%>">
      </li>
    END_HTML
  end

  def self.done(event)
     task = find_by(event[:target]{:dataset][:id])
     task.done
  end

  def done
     is_done = true
  end
end

ERBを良い感じに埋め込む方法ほしいですね。

Taskインスタンスを自動的に見つけて欲しいです。 何か良い感じのIDの埋め込み方が要りそうです。

1. OrbitarRing.initializeはなんか良い感じでイベントハンドラーをバインドする。