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

Transcript

1. Hi
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
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
20. How do you mount an isomorphic Cycle.js app 
 client-side so it doesn't
 re-render in vain?
22. Declarative
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
34. No training…
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
43. RxJS ?
44. RxJS Observable
46. clicks
 [, , ] increments
 [1, 1, 1] counter
 3 map reduce clicks
 [, , , ] increments
 [1, 1, 1] counter
 3
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’);
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
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
69. Components ✅
73. Architecture?
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$
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 ;)