React.js

(A JavaScript library for building user interfaces)

Domen Kožar / @iElectric

Ljubljana Autumn JavaScript Meetup 

Client side code complexity

MVC, MVVC, ...

Reactive (functional) programming

Wikipedia: In computing, reactive programming is a programming paradigm oriented around data flows and the propagation of change. 

Mindset

• mutation is bad
• bidirectional data binding means complex code
• DOM is SLOOW. Sad Mobile Panda :(

Render the whole view on each change

(immutability)

Virtual DOM

Hint: Custom DOM elements / Web components 

JSX component

var Hello = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});
 
React.render(<Hello name="World" />, document.body);

Griddle demo

Questions?

IRC client in react.js: https://github.com/kiberpipa/weenerd