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
380
A React Inspired UI framework in Pure Ruby
zetachang
December 02, 2016
Tweet
Share
Other Decks in Programming
See All in Programming
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
テストをしないQAエンジニアは何をしているか?
nealle
0
120
Linux && Docker 研修/Linux && Docker training
forrep
23
4.4k
Terraform で作る Amazon ECS の CI/CD パイプライン
hiyanger
0
140
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
480
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
3
1.2k
CNCF Project の作者が考えている OSS の運営
utam0k
5
670
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
720
PicoRubyと暮らす、シェアハウスハック
ryosk7
0
260
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
A Philosophy of Restraint
colly
203
16k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Documentation Writing (for coders)
carmenintech
67
4.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Site-Speed That Sticks
csswizardry
3
360
Building Applications with DynamoDB
mza
93
6.2k
Keith and Marios Guide to Fast Websites
keithpitt
410
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