A React Inspired UI framework in Pure Ruby

Transcript

1. 1.

   A React Inspired UI framework in Pure Ruby 1

2. 2.

   About Me • David Chang @zetachang (github, twitter) • Software

   Engineer @ ಋ಑ೌ搚 solda.io • Author of HyperReact (a.k.a reactrb) - a ReactJS wrapper. 2
3. 3.

   Building UI is hard 3

4. 4.

   4

5. 5.

   I love JavaScript 5

6. 6.

   I love JavaScript 6

7. 7.

   I love CoffeeScript 7

8. 8.

   I love CoffeeScript 8

9. 9.

   I love TypeScript 9

10. 10.

    I love TypeScript 10

11. 11.

    I love ClojureScript 11

12. 12.

    I love ClojureScript 12

13. 13.

    Hmm.. 13

14. 14.

    Tons of languages compile to JavaScript 14

15. 15.

    is one of them. 15

16. 16.

    Atoll A Ruby Library for Building User Interfaces 16

17. 17.

    Atoll vs. React 17

18. 18.

    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
19. 19.

    Built upon Ruby Idioms 1. Shorter & cleaner method name.

    2. Familiar toolchain (e.g. rake, rspec, sprockets.) 19
20. 20.

    Shorter & Cleaner method name • componentWillMount • componentDidMount •

    componentWillReceiveProps • shouldComponentUpdate 20
21. 21.

    Shorter & Cleaner method name • componentWillMount before_mount • componentDidMount

    after_mount • componentWillReceiveProps before_receive_props • shouldComponentUpdate needs_update? 21
22. 22.

    Familiar Toolchains • Sprockets • ERB • Rake • RSpec

    • .... • (webpack, gulp, babel, yarn, npm, browserify, rollup, jest, mocha, enzyme) 22
23. 23.

    Demo 23

24. 24.

    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
25. 25.

    Declarative UI 25

26. 26.

    UI Component: 26

27. 27.

    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
28. 28.

    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
29. 29.

    Everything is a component 29

30. 30.

    Store Profile 30

31. 31.

    31

32. 32.

    32

33. 33.

    33

34. 34.

    34

35. 35.

    Why Component-Based UI? 1. A proper separation of concerns for

    applications. 2. Fundamental building blocks for application. 35
36. 36.

    Learn Once Write Anywhere 36

37. 37.

    Let's render this: h("div", nil, "Hello") 37

38. 38.

    38

39. 39.

    39

40. 40.

    Demo 40

41. 41.

    Server Side Rendering (a.k.a SSR) 41

42. 42.

    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
43. 43.

    Why Server Side Rendering? • Better start-up experience. • Visible

    to search engines (SEO.) • User might disable JavaScript. 43
44. 44.

    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
45. 45.

    Let's fix this in Atoll! 45

46. 46.

    Marshal! 46

47. 47.

    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
48. 48.

    Marshal • Serialize object to byte stream. • Supported by

    almost every Rubies (e.g. Opal, MRI, RubyMotion.) • Almost everything could be marshaled by default. 48
49. 49.

    Demo 49

50. 50.

    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
51. 51.

    What's unlocked? • Could be used with existing template toolchain.

    • Server side rendering for mobile app. • Pre-render for selective component. 51
52. 52.

    Road ahead • Will be free & open sourced •

    Follow @atollrb. ! • Also follow @opalrb, @RubyMotion • It’s simply fun to build this. " 52