Ruby製のフロントエンドフレームワークOvtoを試してみました

RubyKaigi2019お疲れ様でした。相変わらず濃厚な3日間でした。

詳しいレポートは後日書こうと思うのですが、RubyKaigi中に知ることが出来たRuby製のフロントエンドフレームワークOvtoを今回試してみました。

RubyKaigi中での詳解スライドは次です。

簡単なOvtoの解説

OvtoはRubyのコードをJavaScriptに変換するOpalとJavaScriptのフロントエンドフレームワークHyperappを組み合わせた、RubyでSPAを構築するライブラリです。

仕組みをざっくり解説すると、Rubyのコードで作成したVirtualDOMをHyperappのコードでDOMを構築するといった感じです。初めのVirtualDOMだけRubyで作ってあとはHyperappに描画をお任せするというのが良い割り切りだなと思いました。

Rubyだけでリッチなフロントエンドを開発出来るのが興味深いです。

TODOリストの実装。

TODOリストの作成をOvtoで実装してみました。

require 'ovto'

class MyApp < Ovto::App
  class State < Ovto::State
    item :todo, default: ''
    item :list, default: []
  end

  class Actions < Ovto::Actions
    def change_input(value:)
      { todo: value }
    end

    def add_todo(value:)
      state.list.push(value)
      { list: state.list, todo: '' }
    end
  end

  class MainComponent < Ovto::Component
    def render
      o 'div' do
        o 'div' do
          o 'input',
            type: 'text',
            onchange: ->(e) { actions.change_input(value: e.target.value) },
            value: state.todo
          o 'button', {
            onclick: ->(_e) { actions.add_todo(value: state.todo) }
          }, '追加'
        end
        o 'div' do
          o 'ul' do
            state.list.each do |item|
              o 'li', item
            end
          end
        end
      end
    end
  end
end

MyApp.run(id: 'ovto')