Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
A React Inspired UI framework in Pure Ruby
Search
zetachang
December 02, 2016
Programming
0
300
A React Inspired UI framework in Pure Ruby
zetachang
December 02, 2016
Tweet
Share
Other Decks in Programming
See All in Programming
Ruby Function Composition
bkuhlmann
1
340
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
10
1.7k
PHPはいつから死んでいるかの調査
chiroruxx
2
430
Hanami and htmx
bkuhlmann
0
230
AppRouter Panel Talk
yosuke_furukawa
PRO
1
500
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
200
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.3k
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
110
Milestoner
bkuhlmann
1
420
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
130
Next.js App Router
quramy
12
2.1k
新宿ダンジョンを可視化してみた
satoshi7190
3
420
Featured
See All Featured
The Language of Interfaces
destraynor
151
23k
Web development in the modern age
philhawksworth
203
10k
A designer walks into a library…
pauljervisheath
201
23k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
YesSQL, Process and Tooling at Scale
rocio
165
13k
Typedesign – Prime Four
hannesfritz
36
2.1k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
[RailsConf 2023] Rails as a piece of cake
palkan
28
4k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Designing for humans not robots
tammielis
247
25k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Transcript
A React Inspired UI framework in Pure Ruby 1
About Me • David Chang @zetachang (github, twitter) • Software
Engineer @ ಋೌ搚 solda.io • Author of HyperReact (a.k.a reactrb) - a ReactJS wrapper. 2
Building UI is hard 3
4
I love JavaScript 5
I love JavaScript 6
I love CoffeeScript 7
I love CoffeeScript 8
I love TypeScript 9
I love TypeScript 10
I love ClojureScript 11
I love ClojureScript 12
Hmm.. 13
Tons of languages compile to JavaScript 14
is one of them. 15
Atoll A Ruby Library for Building User Interfaces 16
Atoll vs. React 17
A React Component (ES6 + JSX҂ class HelloMessage extends React.Component
{ render() { return <div>Hello {this.props.name}</div>; } } An Atoll Component (Plain Ruby) class HelloMessage < Atoll::Component def render h('div', nil, "Hello #{props[:name]}") end end 18
Built upon Ruby Idioms 1. Shorter & cleaner method name.
2. Familiar toolchain (e.g. rake, rspec, sprockets.) 19
Shorter & Cleaner method name • componentWillMount • componentDidMount •
componentWillReceiveProps • shouldComponentUpdate 20
Shorter & Cleaner method name • componentWillMount before_mount • componentDidMount
after_mount • componentWillReceiveProps before_receive_props • shouldComponentUpdate needs_update? 21
Familiar Toolchains • Sprockets • ERB • Rake • RSpec
• .... • (webpack, gulp, babel, yarn, npm, browserify, rollup, jest, mocha, enzyme) 22
Demo 23
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
Declarative UI 25
UI Component: 26
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
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
Everything is a component 29
Store Profile 30
31
32
33
34
Why Component-Based UI? 1. A proper separation of concerns for
applications. 2. Fundamental building blocks for application. 35
Learn Once Write Anywhere 36
Let's render this: h("div", nil, "Hello") 37
38
39
Demo 40
Server Side Rendering (a.k.a SSR) 41
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
Why Server Side Rendering? • Better start-up experience. • Visible
to search engines (SEO.) • User might disable JavaScript. 43
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
Let's fix this in Atoll! 45
Marshal! 46
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
Marshal • Serialize object to byte stream. • Supported by
almost every Rubies (e.g. Opal, MRI, RubyMotion.) • Almost everything could be marshaled by default. 48
Demo 49
On server <!-- Inside ERB template--> <%= atoll_component(LikeButton) %> On
client <div id='like-btn' data-atoll-state="U2VuZCByZ...."> <button class="btn btn-like">Like</button> </div> 50
What's unlocked? • Could be used with existing template toolchain.
• Server side rendering for mobile app. • Pre-render for selective component. 51
Road ahead • Will be free & open sourced •
Follow @atollrb. ! • Also follow @opalrb, @RubyMotion • It’s simply fun to build this. " 52