How about Ovto? - Speaker Deck

Slide 1

Slide 1 text

How about Ovto? Meguro.rb#29 Jul. 31, 2019

Slide 2

Slide 2 text

pp self ● Masataka “Pocke” Kuwabara ● Bit Journey, Inc. / Kibela https://me.pocke.me https://kibe.la

Slide 3

Slide 3 text

Agenda ● What is Opal and Ovto? ● How about Ovto? ● Deep in Ovto

Slide 4

Slide 4 text

What is Opal?

Slide 5

Slide 5 text

Opal is... “Opal is a Ruby to JavaScript source-to-source compiler.” https://github.com/opal/opal

Slide 6

Slide 6 text

What is Ovto?

Slide 7

Slide 7 text

Ovto is... “Client-side web framework for Opal” https://github.com/yhara/ovto

Slide 8

Slide 8 text

Ovto is... ● Written in Ruby (Opal) ● Based on Hyperapp ● Declarative ● Virtual DOM ● Single state For more information: Ovto [search]

Slide 9

Slide 9 text

The minimum example class App < Ovto::App class State < Ovto::State; end class MainComponent < Ovto::Component def render o ‘h1’, ‘Hello’ end end

Slide 10

Slide 10 text

How about Ovto?

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Fun! ● Write front-end with Ruby ● Ovto respects Ruby feeling ○ We can write Ovto without stress

Slide 13

Slide 13 text

Performance ● It works ﬁne with a Number Place app ● https://puzzle.pocke.me

Slide 14

Slide 14 text

Compiling process ● opal --gem ovto -I lib/ lib/entrypoint.rb > app.js

Slide 15

Slide 15 text

Cons ● Only a few eco-system ○ No useful libraries ● Actions are ﬂat

Slide 16

Slide 16 text

No eco-system ● I have created ovto-router ● I will need ovto-i18n and so on in the future

Slide 17

Slide 17 text

Actions are flat ● Actions update state ● It is flat in an App ● All actions should have a prefix? I do not like it!

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Appendix: Deep in Ovto

Slide 20

Slide 20 text

Ovto structure App Main Component State Actions Component Component Component Component Component Component Component

Slide 21

Slide 21 text

Ovto structure ● App has one ○ State ○ Actions ○ MainComponent ● MainComponent is a component ● Component has many components

Slide 22

Slide 22 text

State

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Example class State < Ovto::State item :hoge, default: “foo” item :tasks, default: [] end

Slide 25

Slide 25 text

Advanced: Nested state class TaskState < Ovto::State item :tasks, default: [] end class State < Ovto::State item :task, default: TaskState.new end

Slide 26

Slide 26 text

Actions

Slide 27

Slide 27 text

Actions ● Actions update the state ● Ovto::App has one Actions ● All components can access actions ● Actions has only one namespace

Slide 28

Slide 28 text

Example class Actions < Ovto::Actions def add_task(title:) new_tasks = TaskState.new(title: title) {tasks: [*state.tasks, new_title]} end end