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
330
A React Inspired UI framework in Pure Ruby
zetachang
December 02, 2016
Tweet
Share
Other Decks in Programming
See All in Programming
コード生成を伴うLLMエージェント - 2024.07.18 Tokyo AI
smiyawaki0820
11
4.1k
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
Rust.Nagoya #1
codemountains
0
170
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
790
iOSアプリでクリップボードにコピーしたことをユーザーに伝えるちょうど良いフィードバックを探す
ski
0
100
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
CSC307 Lecture 14
javiergs
PRO
0
220
Featured
See All Featured
A Tale of Four Properties
chriscoyier
155
22k
Navigating Team Friction
lara
181
13k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Robots, Beer and Maslow
schacon
PRO
157
8.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.1k
The Cult of Friendly URLs
andyhume
75
5.9k
Side Projects
sachag
451
42k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Code Reviewing Like a Champion
maltzj
517
39k
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