Slide 1
Slide 1 text
Ovto: Frontend web framework for
Rubyists
Yutaka HARA (@yhara)
RubyKaigi2019Fukuoka
2019/04/19
Slide 2
Slide 2 text
http://yhara.github.io/ovto
Slide 3
Slide 3 text
Ovto is (1/3)
Frontend web framework in Ruby
Powered by Opal
VirtualDOM + Single state (like react-redux)
Slide 4
Slide 4 text
Ovto is (2/3)
'Octo' is already taken everywhere
Slide 5
Slide 5 text
Ovto is (3/3)
DEMO: http://rk2019.yhara.jp
Slide 6
Slide 6 text
Agenda(1/3)
This talk does not cover:
Difference with Angular, Vue, etc.
How to use Ovto
en: book/guides/tutorial.md
ja: "Rubyist
のためのフロントエンドフレームワークOvto"
(Rubyist Magazine 0059)
Slide 7
Slide 7 text
Agenda(2/3)
This talk covers:
My thoughts on making Ovto
Knowledge you need to use Ovto
Slide 8
Slide 8 text
Agenda(3/3)
Part 1: Background
Part 2: Design
Part 3: Implementation
Slide 9
Slide 9 text
Today's goal
Find the 2nd user
Slide 10
Slide 10 text
Myself
@yhara (Yutaka HARA)
Slide 11
Slide 11 text
Ad: RubyDebugCheatSheet
NaCl @ 2F
Slide 12
Slide 12 text
Past Kaigi Talks
n-ways to distribute your Ruby apps (RubyKaigi2009)
Road to Ruby Master (RubyKaigi2011)
DIY Programming (SapporoRubyKaigi2012)
Let's Make a Functional Language (RubyKaigi2015)
Ruby, Opal and WebAssembly (RubyKaigi2017)
Ovto: Frontend web framework for Rubyists (RubyKaigi2019)
Slide 13
Slide 13 text
My interest
DIY Programming
Language processor
Slide 14
Slide 14 text
Part 1. Why I made Ovto
Slide 15
Slide 15 text
DIY Programming
Make software you need
Ruby is very good for it
Supports many areas
Good for prototyping
Slide 16
Slide 16 text
My DIYs(1/3)
Slide 17
Slide 17 text
My DIYs(2/3)
Slide 18
Slide 18 text
My DIYs(3/3)
Slide 19
Slide 19 text
Web app is mobile app
Slide 20
Slide 20 text
Mobile app is hard
Swift or Kotlin?
Obj-C or Java?
Evolves to quickly (at least so far)
Slide 21
Slide 21 text
Web tech is everywhere
Mobile web
Mobile app (PhogeGap, etc.)
Desktop app (Electron, etc.)
Slide 22
Slide 22 text
But...
How to make this kind of app?
Slide 23
Slide 23 text
jQuery is not enough(1/2)
You specify 'where' and 'what'
$(elem).append(item);
$(elem).prepend(item);
$(elem).remove();
$(item).insertBefore(elem);
...
Slide 24
Slide 24 text
jQuery is not enough(2/2)
Slide 25
Slide 25 text
Here comes VirtualDOM(1/6)
Slide 26
Slide 26 text
Here comes VirtualDOM(2/6)
Slide 27
Slide 27 text
Here comes VirtualDOM(3/6)
Slide 28
Slide 28 text
Here comes VirtualDOM(4/6)
Slide 29
Slide 29 text
Here comes VirtualDOM(5/6)
Slide 30
Slide 30 text
Here comes VirtualDOM(6/6)
You write "What it should be"
React calculates & applies the difference automatically
Slide 31
Slide 31 text
React and me
3 month exprerience of react-redux at work
Slide 32
Slide 32 text
react-redux
Make React to be "Single State"
Slide 33
Slide 33 text
Single state (1/4)
Slide 34
Slide 34 text
Single state (2/4)
Slide 35
Slide 35 text
Single state (3/4)
Slide 36
Slide 36 text
Single state (4/4)
Slide 37
Slide 37 text
And then:
Slide 38
Slide 38 text
hyperapp
Slide 39
Slide 39 text
IDEA: Port hyperapp to Ruby
Slide 40
Slide 40 text
to Ruby?
They say "You need to write JS to make an SPA"
Actually it's not true
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
Opal (1/2)
Slide 43
Slide 43 text
Opal (2/2)
Slide 44
Slide 44 text
Why not JS?
Ruby is my native tongue
Minor but irritating difference
No Array#==, etc.
Slide 45
Slide 45 text
Ovto
Slide 46
Slide 46 text
(Notices)
Based on hyperapp v1
Not a 1-to-1 port
Redesigned to be "Rubyish" API
Slide 47
Slide 47 text
hyperapp example
Slide 48
Slide 48 text
Ruby port?
Slide 49
Slide 49 text
The question is...
What the sample program should look like?
Slide 50
Slide 50 text
In Ovto
Slide 51
Slide 51 text
Demo
Slide 52
Slide 52 text
Vision
github: yhara/vision
Slide 53
Slide 53 text
Part 2. Design of Ovto
Slide 54
Slide 54 text
Ovto's design principle
Make it fun.
Programming is fun
Remove what's not fun
→ WIN
Slide 55
Slide 55 text
Simplicity
"There's too many things to learn :-("
Only have 3 classes
State, Actions, Component
Slide 56
Slide 56 text
Debuggability
"unde ned method 'to_s' for nil:NilClass"
Use Ovto::State instead of Hash
If state were a Hash:
state['pagee'] #=> nil
Use keyword arguments
Slide 57
Slide 57 text
Scalability
"It's too simple for big project :-("
State
→ Nesting
Actions
→ Split into modules
Component
→ o method supports sub component
Slide 58
Slide 58 text
Help you to design app
"No idea how to make this feature"
Design it in this order:
State
View
Action
Slide 59
Slide 59 text
Part 3. Implementation of Ovto
Slide 60
Slide 60 text
Repository
github: yhara/ovto
Example codes:
examples/*
github: yhara/vision
github: yhara/OvtoShow
Slide 61
Slide 61 text
Reading Ovto's source
% wc -l lib/**/*.rb
58 lib/ovto.rb
10 lib/ovto/actions.rb
85 lib/ovto/app.rb
198 lib/ovto/component.rb
53 lib/ovto/fetch.rb
394 lib/ovto/runtime.rb
72 lib/ovto/state.rb
3 lib/ovto/version.rb
35 lib/ovto/wired_actions.rb
908 total
Slide 62
Slide 62 text
runtime.rb(1/2)
Slide 63
Slide 63 text
runtime.rb(2/2)
Slide 64
Slide 64 text
wired_actions.rb(1/4)
Slide 65
Slide 65 text
wired_actions.rb(2/4)
Slide 66
Slide 66 text
wired_actions.rb(3/4)
Slide 67
Slide 67 text
wired_actions.rb(4/4)
Slide 68
Slide 68 text
Implementation of OvtoShow(1/2)
https://medium.com/@dan_abramov/you-might-not-need-redux-
be46360cf367
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
Implementation of OvtoShow(2/2)
Send action via WebSocket
Slide 71
Slide 71 text
Contributing to Ovto
Try it!
Write posts to your blog, dev.to, Qiita, etc.
Future plan
Server-side rendering
Router
Slide 72
Slide 72 text
Thank you!