Don't

Don't

Andre Medeiros

@andrestaltz

Why this presentation?

• There is a reason why some technologies die
• Grunt, anyone?

Pioneers make mistakes

• Highly unlikely that the Virtual DOM pioneer is perfect
• Underscore => Lodash
• React authors do not seemto understand Reactive Programming
  • Documentation mentions:
  • "Reactive Data Flow" => WRONG
  • "Reactive state" => WRONG

What is Reactive?

Reactive Programming is an Enlightened Path to Programming Utopia Yet to be Grokked By Mere Humans

Inter-module communication

X defines which other modules does X affect

X defines which other modules affect X

Roles in Interactive Programming

• Passive: exposes functions so others can change it
• Proactive: changes and forces passive modules

// speaker.js

getEndOfSpeechPromise()
  .then(function () {
    participants.forEach(function (participant) {
      participant.goGetBeer();
    });
  });

Roles in Reactive Programming

• Reactive: listens to events, and exposes events that can listened by others
• No other role
• "I am in full control over myself."

// participant1.js

speaker.endOfSpeechEvents.subscribe(function () {
  goGetBeer();
});

// participant2.js

speaker.endOfSpeechEvents.subscribe(function () {
  tweet('Pretty decent presentation.');
});

What is React?

• Virtual DOM Rendering
• Reusable hierarchical components
• Hides Virtual DOM data structure from the programmer
• Mostly Passive API
• Not a framework, an opinionated building block

// Timer is PROACTIVE
var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  },
  tick: function() {
    // State is PASSIVE
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() { // Rendering is REACTIVE
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
});

React.render(<Timer />, mountNode);

React virtual elements are not observable

• Testing worse, through the DOM
• Cannot have post processing steps
  • E.g. replace every 'foo' with 'bar'
• Cannot delay rendering after state/props change
• Cannot reactively compose components

How could it be better?

• Virtual DOM elements as first class data structures
• Reactive-friendly
• Less magic

What is virtual-dom?

• https://github.com/Matt-Esch/virtual-dom
• A library alternative to React
• Data structures for Virtual DOM elements
• Diff & patch algorithms
• Non-opinionated building block

What is Cycle.js?

• https://github.com/staltz/cycle
• My on-going attempt
• A Reactive Virtual DOM frontend framework
• Built on virtual-dom and RxJS
• View separated from Rendering
• Functional Data flow nodes

var HelloModel = Cycle.createModel(['changeName$'], function (intent) {
  return {name$: intent.changeName$.startWith('')};
});

var HelloView = Cycle.createView(['name$'], function (model) {
  return {
    vtree$: model.name$
      .map(function (name) {
        return h('div', {}, [
          h('label', 'Name:'),
          h('input', {
            'attributes': {'type': 'text'},
            'ev-input': 'inputText$'
          }),
          h('hr'),
          h('h1', 'Hello ' + name)
        ]);
      }),
    events: ['inputText$']
  };
});

var HelloIntent = Cycle.createIntent(['inputText$'], function (view) {
  return {
    changeName$: view.inputText$.map(function (ev) { return ev.target.value; })
  };
});

Cycle.createRenderer('.js-container').inject(HelloView);
Cycle.circularInject(HelloModel, HelloView, HelloIntent);

Other Virtual DOM frameworks

Mercury

Mithril (MVC)

Conclusion

• React sucks
• Great ideas, bad API
• React is not Reactive Programming
  • Rendering is Reactive, all the rest is Passive
• React is unsuitable for Reactive Programming
• React could be better

Thanks!

Questions?