Ideas taken from React
• Declarative - predictable & easier to debug.
• Everything is a Component - Proper separation of
concerns.
• Learn Once Write Anywhere - how to render is handled by
library.
24
Slide 25
Slide 25 text
Declarative UI
25
Slide 26
Slide 26 text
UI Component:
26
Slide 27
Slide 27 text
class Timer < Component
def initialize
@state = { second: 0 }
end
def after_mount
$window.every(1) {
set_state(sec: state[:second] + 1)
}
end
def render
h('span', nil, "Time elapsed: #{state[:second]}")
end
end
27
Slide 28
Slide 28 text
Mindset
1. Always re-render when data change.
2. Component returns a blueprint instead of the actual
instance of UI.
3. Framework do the hard work to generate minimal UI
updates.
28
Slide 29
Slide 29 text
Everything
is a component
29
Slide 30
Slide 30 text
Store Profile
30
Slide 31
Slide 31 text
31
Slide 32
Slide 32 text
32
Slide 33
Slide 33 text
33
Slide 34
Slide 34 text
34
Slide 35
Slide 35 text
Why Component-Based UI?
1. A proper separation of concerns for applications.
2. Fundamental building blocks for application.
35
Slide 36
Slide 36 text
Learn Once
Write Anywhere
36
Slide 37
Slide 37 text
Let's render this:
h("div", nil, "Hello")
37
Slide 38
Slide 38 text
38
Slide 39
Slide 39 text
39
Slide 40
Slide 40 text
Demo
40
Slide 41
Slide 41 text
Server Side
Rendering
(a.k.a SSR)
41
Slide 42
Slide 42 text
Client-side rendering
• initial request loads the page layout, CSS and JavaScript.
• some or all of the content isn't included
Server-side rendering
• initial request loads the page, layout, CSS, JavaScript
• and content.
42
Slide 43
Slide 43 text
Why Server Side Rendering?
• Better start-up experience.
• Visible to search engines (SEO.)
• User might disable JavaScript.
43
Slide 44
Slide 44 text
Current Problems
1. Component state could not be preserved
2. Side-effects to make a meaningful first mount must be
handled at the top level.
3. JS Runtime is required (e.g. V8, Nashorn.)
44
Slide 45
Slide 45 text
Let's fix this in Atoll!
45
Slide 46
Slide 46 text
Marshal!
46
Slide 47
Slide 47 text
Marshal
class Foo
attr_reader :bar
def initialize
@bar = "yeah"
end
end
f = Foo.new
s = Marshal.dump(f)
# => "\x04\bo:\bFoo\x06:\t@barI\"\tyeah\x06:\x06ET"
f = Marshal.load(s)
f.bar
# => "yeah"
47
Slide 48
Slide 48 text
Marshal
• Serialize object to byte stream.
• Supported by almost every Rubies (e.g. Opal, MRI,
RubyMotion.)
• Almost everything could be marshaled by default.
48
Slide 49
Slide 49 text
Demo
49
Slide 50
Slide 50 text
On server
<%= atoll_component(LikeButton) %>
On client
Like
50
Slide 51
Slide 51 text
What's unlocked?
• Could be used with existing template toolchain.
• Server side rendering for mobile app.
• Pre-render for selective component.
51
Slide 52
Slide 52 text
Road ahead
• Will be free & open sourced
• Follow @atollrb. !
• Also follow @opalrb, @RubyMotion
• It’s simply fun to build this. "
52