Cycle.js and functional reactive user interfaces

Cycle.js and functional reactive user interfaces

Presented at Reactive 2015. React's future is going to be more functional, and less OOP. What if that future is already reality? How would it look like? React's foundations are reactive rendering and UI as a pure function of state. These two foundations are reactive programming and functional programming, yet React has a lot of concepts from imperative programming. In this talk we will discover how Cycle.js is purely reactive and functional, and why it's an interesting alternative to React.

Watch the full talk here: https://www.youtube.com/watch?v=uNZnftSksYg

C8dbe3c6d219999ee0ecce86a450d0e3?s=128

André Staltz

November 04, 2015
Tweet

Transcript

  1. Hi

  2. None
  3. It’s about functional programming

  4. I think the functional paradigm in general is what React

    has opened up to a wider audience.
  5. We see ourselves moving towards less side effects and a

    more declarative [style] in the future React.
  6. We need to start thinking about what goes beyond classes.

  7. class Counter extends React.Component { constructor(props) { super(props); this.state =

    {count: props.initialCount}; } tick() { this.setState({count: this.state.count + 1}); } render() { return ( <div onClick={this.tick.bind(this)}> Clicks: {this.state.count} </div> ); } } Counter.propTypes = { initialCount: React.PropTypes.number }; Counter.defaultProps = { initialCount: 0 };
  8. Functional
 Programming UI = f(state)

  9. Reactive
 Programming Functional
 Programming UI = f(state) auto-render

  10. None
  11. let FancyButton = { initialize(props) { }, render(props, state) {

    }, observe(props, state) { }, reduce(props, state, signals) { }, output(props, state, signals) { } };
  12. Cycle.js and functional reactive user interfaces @andrestaltz

  13. Novem ber 2014 v0.1.0 January 2015 v0.7.0
 Custom Elem ents

    v0.8.0
 No m ore string-based v0.12.0
 User as a function February 2015 April 2015 v0.20.0
 Injectable Stream s v0.21.0
 Just functions May 2015 v0.23.0
 Drivers June 2015 v1.0.0
  14. Lines of JS code

  15. Concise

  16. None
  17. None
  18. None
  19. None
  20. How do you mount an isomorphic Cycle.js app 
 client-side

    so it doesn't
 re-render in vain?
  21. None
  22. Declarative

  23. None
  24. None
  25. Data Flow

  26. DOMSource decrement$ increment$ action$ count$ vtree$ DOMSink

  27. RxJS Observables!

  28. HARD to reason about

  29. 19th century Easy to 
 reason about

  30. Hard to reason about

  31. None
  32. None
  33. None
  34. No training…

  35. None
  36. Horses go anywhere

  37. Cars: only on asphalt

  38. You can use
 horses if you wish

  39. Genghis Khan’s empire conquered a whole continent

  40. Yet, cars are better

  41. None
  42. None
  43. RxJS ?

  44. RxJS Observable

  45. None
  46. clicks
 [, , ] increments
 [1, 1, 1] counter
 3

    map reduce clicks
 [, , , ] increments
 [1, 1, 1] counter
 3
  47. None
  48. clicks
 [, , ] increments
 [1, 1, 1] counter
 3

  49. clicks
 [, , ] increments
 [1, 1, 1] counter
 3

    push() pushListener pushListener push(1) counter =
 increments.reduce(…) clicks
 [, , , ] increments
 [1, 1, 1, 1] counter
 4
  50. clicks
 , , , increments
 1, 1, 1, 1 counter


    4 var increments = clicks.map(c => 1); var counter = increments.scan(add); var clicks = Rx.Observable.fromEvent(‘click’);
  51. None
  52. None
  53. Everything is automatically updated

  54. Your
 main()
 function The DOM
 and
 the user Cycle.js framework

    User land
  55. Your
 main()
 function The DOM
 and
 the user An evolving

    tree of virtual DOM Cycle.js framework User land
  56. Your
 main()
 function The DOM
 and
 the user An evolving

    tree of virtual DOM Sequence of user events Cycle.js framework User land
  57. None
  58. Components?

  59. Component ? ?

  60. Component Props ?

  61. Component Props VDOM

  62. Component Props VDOM ?

  63. Component Props VDOM User events

  64. Your
 main()
 function Sequence of
 user events An evolving tree

    
 of virtual DOM
  65. None
  66. None
  67. None
  68. None
  69. Components ✅

  70. None
  71. None
  72. None
  73. Architecture?

  74. None
  75. Your
 main()
 function The DOM
 and
 the user

  76. 
 main()
 MVI Components
 Explicit data flow

  77. intent()
 model()
 view() MVI

  78. Listen
 Process
 Speak MVI

  79. Components intent()
 model()
 view()

  80. Explicit data flow decrement$ increment$ action$ count$ vtree$

  81. DOMSource decrement$

  82. None
  83. None
  84. None
  85. None
  86. Reactive
 Programming Functional
 Programming main() is pure RxJS everywhere cycle.js.org

  87. The future? Developer Experience (DX) Tools that make it easier

    to write code Code is more often read than written
  88. Thanks ;)