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
420
A React Inspired UI framework in Pure Ruby
zetachang
December 02, 2016
Tweet
Share
Other Decks in Programming
See All in Programming
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
130
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
Discover Metal 4
rei315
2
130
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
190
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
410
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Balancing Empowerment & Direction
lara
1
430
Building Applications with DynamoDB
mza
95
6.5k
Unsuck your backbone
ammeep
671
58k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
A designer walks into a library…
pauljervisheath
207
24k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
A Tale of Four Properties
chriscoyier
160
23k
The World Runs on Bad Software
bkeepers
PRO
69
11k
How GitHub (no longer) Works
holman
314
140k
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