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
410
A React Inspired UI framework in Pure Ruby
zetachang
December 02, 2016
Tweet
Share
Other Decks in Programming
See All in Programming
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
0
300
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
250
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
150
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
240
WindowInsetsだってテストしたい
ryunen344
1
220
PicoRuby on Rails
makicamel
2
120
NPOでのDevinの活用
codeforeveryone
0
650
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
130
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
520
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
840
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
120
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
4
240
Featured
See All Featured
Facilitating Awesome Meetings
lara
54
6.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Bash Introduction
62gerente
614
210k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Faster Mobile Websites
deanohume
307
31k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
BBQ
matthewcrist
89
9.7k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
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