React - Glasgow JS, 1st April 2014

Facebook’s React library is not your average JavaScript MVC framework. That’s because React is not an MVC framework. Douglas talks about what it is, the philosophy it’s predicated on, and how you might approach using it. He also dives off into a discussion about Web Components more generally (although that's not covered too much in the slides!), and mentions libraries that wrap it like Om.

Transcript

1. React Douglas Greenshields Markup ! @bedroomation shieldo
2. Comparisons React vs: Angular.js, Backbone, Ember, etc etc I’m not interested in saying which you should use. That’s an exercise best left to you.
3. That’s a cop-out That may be, but React has a singular purpose. It’s comparable to aspects of other libraries, but it keeps its scope of concerns limited. Which makes it more interesting than it would be as just part of a larger, all- seeing, all-dancing “MVC framework”.
4. Where did React come from? React is a library originally developed inside Instagram, which has of course since been co- opted into the all-conquering Facebook borg. It was announced to the wider community of non stinking-rich zillionaires at JSConf US on 29th May 2013.
5. Will using React encourage Facebook in its relentless quest to make everything I know and love die? Left as an exercise for the reader.
6. Browser support for React Anything that implements ECMAScript 5: IE9+, plus most others IE8 support can be achieved using es5-shim.js and es5-sham.js: (https:/ /github.com/es-shims/es5-shim)
7. So, is it M, V or C? It has to do with view rendering, but calling it the “V” part would be crude. It’s more subtle than that.
8. You can use it with Backbone, or whatever you like It just does the thing it does.
9. React’s approach, in short (part 1) *Components* that render using JavaScript, not templates/ controllers. Components compose other components, which compose other components. Components all the way down.
10. React’s approach, in short (part 2) Components contain markup *and* display logic.
11. … wait!
12. React’s approach, in short (part 2, to repeat) Components contain markup *and* display logic.
13. React’s approach, in short (part 3) The React component tree you build defines how an underlying data structure should cause a view to be rendered, not just at first, but *through all points in time*.
14. React’s approach, in short (part 4) React creates a virtual DOM structure from which a real DOM is generated (on initial render). This virtual DOM also uses synthetic events to implement the W3C Events spec closer than any browser does in the DOM itself. (And makes it work in IE8.)
15. React’s approach, in short (part 5) On state change, React calculates a new virtual DOM state, and diffs against the old one to calculate the smallest number of changes it needs to make to the *real* DOM. It then queues those changes and batch- executes them.
16. React’s approach, to be more succinct It’s an abstraction that allows functional UI programming! f(D1) = V1 f(D2) = V2
17. What’s up with templates? AngularJS: <body ng-controller="PhoneListCtrl"> <ul> <li ng-repeat="phone in phones"> {{phone.name}} <p>{{phone.snippet}}</p> </li> </ul> </body>
18. What’s up with templates? Handlebars: <div class="entry"> <h1>{{title}}</h1> <h2>By {{author.name}}</h2> <div class="body"> {{body}} </div> </div>
19. What’s up with templates? Templates are *fine* when data doesn’t change. When it does, and you want to make the interface change with it, you need to put hacks in a monolith. That’s necessarily cumbersome. It’s a leaky abstraction.
20. What’s up with templates? Because it’s better doing it in a Turing- complete language like JavaScript. You get to do novel things like have control over scope. You get to *program*.
21. So, what does React do for markup? Ha ha. Check this out ————>
22. JSX! It’s JavaScript written in XML!! Finally! THE DREAM OF THE 90s!!!!
23. It’s actually OK /** @jsx React.DOM */ var HelloWorld = React.createClass({ render: function () { return ( <p> Hello, <input type="text" placeholder="Your name here" />! It is {this.props.date.toTimeString()} </p> ); } }); setInterval(function () { React.renderComponent( <HelloWorld date={new Date()} />, document.getElementById('example') ); }, 500);
24. It’s not even necessary /** @jsx React.DOM */ var HelloWorld = React.createClass({displayName: 'HelloWorld', render: function () { return ( React.DOM.p(null, "Hello, ", React.DOM.input( {type:"text", placeholder:"Your name here"} ),"!"+' '+ "It is ", this.props.date.toTimeString() ) ); } }); setInterval(function () { React.renderComponent( HelloWorld( {date:new Date()} ), document.getElementById('example') ); }, 500);
25. react-tools npm install react-tools Provides JSX transform to JS. There’s a client-side script for this, but you want to be doing it as a build step for any production setting.
26. Components in components Components know how to render themselves. They can also indicate the conditions under which they need to re-render.
27. Data in components Components can have *changeable* data called “state” and derived/ immutable data called “props”.
28. Data in a component tree The state will tend to live high up in the component structure. This state can be passed down the tree as props. Because it’s derived, it’ll then change automatically when the state changes.
29. Demos Stuff I didn’t write earlier. TodoMVC using React and Backbone: https://github.com/tastejs/todomvc/tree/gh-pages/labs/architecture-examples/react-backbone Rendering on the server. Yep. https://github.com/mhart/react-server-example
30. Web Components W3C Standard for defining custom HTML elements with scoped CSS and JavaScript. Web Components and React aren’t at odds - you can make Web Components using React, because it’s just JavaScript. React probably better fits a model where there is a component hierarchy with elements pertaining to the application domain.
31. Om A library by David Nolen in ClojureScript that lightly wraps React. The data is immutable, and changes just apply functions to the data. Therefore it’s very easy to traverse history and implement things like Undo. There are other similar ClojureScript projects based on React that are fun to check out.
32. –David Nolen (http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/) “There's nothing special here that hasn't been known for a long, long time. If you treat the browser as a remote rendering engine and stop treating it as a place to query and store crap, everything gets faster. Sound like something familiar? Yeah, computer graphics programming.”
33. Thanks! React lives at: http://facebook.github.io/react/ ! Do you have any questions? If so, I will try to answer them.