Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How about Ovto?

July 31, 2019

How about Ovto?


July 31, 2019

More Decks by pocke

Other Decks in Programming


  1. pp self • Masataka “Pocke” Kuwabara • Bit Journey, Inc.

    / Kibela https://me.pocke.me https://kibe.la
  2. Ovto is... • Written in Ruby (Opal) • Based on

    Hyperapp • Declarative • Virtual DOM • Single state For more information: Ovto [search]
  3. The minimum example class App < Ovto::App class State <

    Ovto::State; end class MainComponent < Ovto::Component def render o ‘h1’, ‘Hello’ end end
  4. Pros • Fun! • Performance is enough (for me) •

    Easy to understand • Compiling process is simple • Ovto.fetch ◦ Useful, but I guess it is out of scope of Ovto
  5. Fun! • Write front-end with Ruby • Ovto respects Ruby

    feeling ◦ We can write Ovto without stress
  6. No eco-system • I have created ovto-router • I will

    need ovto-i18n and so on in the future
  7. Actions are flat • Actions update state • It is

    flat in an App • All actions should have a prefix? I do not like it!
  8. Current solution for flat action • Only define `dispatch` action

    ◦ def dispatch(state:) state; end • Call it from instance method of component ◦ def update_something(s:) actions.dispatch(state: {something: s}) end • It is not the best, but it works without conflict
  9. Ovto structure • App has one ◦ State ◦ Actions

    ◦ MainComponent • MainComponent is a component • Component has many components
  10. State • Ovto::App has one State • All components can

    access to the state ◦ except PureComponent • You can nest state ◦ Useful for SPA, middleware and so on
  11. Advanced: Nested state class TaskState < Ovto::State item :tasks, default:

    [] end class State < Ovto::State item :task, default: TaskState.new end
  12. Actions • Actions update the state • Ovto::App has one

    Actions • All components can access actions • Actions has only one namespace