Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

André Staltz

November 04, 2015
Tweet

More Decks by André Staltz

Other Decks in Programming

Transcript

  1. Hi

  2. We see ourselves moving towards less side effects and a

    more declarative [style] in the future React.
  3. 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 };
  4. let FancyButton = { initialize(props) { }, render(props, state) {

    }, observe(props, state) { }, reduce(props, state, signals) { }, output(props, state, signals) { } };
  5. 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
  6. clicks
 [, , ] increments
 [1, 1, 1] counter
 3

    map reduce clicks
 [, , , ] increments
 [1, 1, 1] counter
 3
  7. clicks
 [, , ] increments
 [1, 1, 1] counter
 3

    push() pushListener pushListener push(1) counter =
 increments.reduce(…) clicks
 [, , , ] increments
 [1, 1, 1, 1] counter
 4
  8. 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’);
  9. Your
 main()
 function The DOM
 and
 the user An evolving

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

    tree of virtual DOM Sequence of user events Cycle.js framework User land
  11. The future? Developer Experience (DX) Tools that make it easier

    to write code Code is more often read than written