Help us understand the problem. What is going on with this article?

Ovtoにミドルウェア機能を追加しました

先日Ovtoの新バージョン0.6.0をリリースしました。本稿では0.6の目玉機能「Ovto::Middleware」について解説します。

Ovto::Middlwareとは

昨年のアドカレで書いたように、これまでのOvtoはstateとactionの名前空間が1つしかなく、ある機能を複数のアプリ間で使いまわそうとしたときに取り回しがあまり良くありませんでした。

Ovto::Middlewareはこれを解決するためのもので、あるまとまったState, Actions, Componentの組を「ミドルウェア」として切り出すことができます。

ミドルウェア

  • 各ミドルウェアは名前を持ちます。名前に使える文字はRubyのメソッド名と同じです(つまりハイフン等は不可)。
  • 各ミドルウェアはアプリと同様、State, Actions, Componentを持ちます。ただし名前空間はミドルウェアごとに固有なので、アプリや他のミドルウェアとの名前衝突を気にする必要はありません。
  • ミドルウェアはアプリがuseすることで使用可能になります。
    • またはミドルウェアが別のミドルウェアをuseすることも可能です。

(https://yhara.github.io/ovto/docs/api/middleware.html の日本語訳です。)

# 1. ミドルウェア名を付ける
class MyMiddleware < Ovto::Middleware("my_middleware")
  def setup
    # アプリ起動時に行いたい処理
  end

  # 2. ミドルウェアのstate
  class State < MyMiddleware::State
    item :count, default: 0
  end

  # 3. ミドルウェアのaction
  class Actions < MyMiddleware::Actions
    def increment(by:)
      return {count: state.count + by}
    end
  end

  # 4. ミドルウェアのcomponent
  class SomeComponent < MyMiddleware::Component
    def render
      o 'span', state.count
      o 'button', onclick: ->{ actions.increment(by: 1) }
    end
  end
end

class MyApp < Ovto::App
  # 5. ミドルウェアを使うことを宣言
  use MyMiddleware

  class State < Ovto::State; end
  class Actions < Ovto::Actions; end

  class MainComponent < Ovto::Component
    def render
      o 'div.counter' do
        o MyMiddleware::SomeComponent
      end
    end
  end

デモ

Ovto::Middlewareの使用例です。昨年の春頃に「Smalltalkみたいな環境を作りたい」と思って作業していたものが例にちょうど良かったのでミドルウェア化しました。移動・リサイズ可能なウィンドウをovto_windowというミドルウェアとして実装しています。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした