reconciling reactjs as a view layer replacement (midwestjs 2014)
DESCRIPTION
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)TRANSCRIPT
![Page 1: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/1.jpg)
Reconciling React as a View Layer Replacement
Zach Lendon @zachlendon
#reactjs #midwestjs #reactjsisawesome
https://github.com/zachlendon/midwestjs2014
![Page 2: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/2.jpg)
Traditional JS MV* “issues”
•“State” •Performance •Complexity •Predictability •Testability
• Isomorphic Javascript • The right simple :: powerful ratio • The right configurable :: opinionated ratio • Pluggable modular architecture • Performant • SEO
Top keys to future “web” MV* framework success
“State” of the JS MV*
![Page 3: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/3.jpg)
Meet React
•A Javascript Library for Creating User Interfaces •https://github.com/facebook/react •Open Sourced and Battle-tested by Facebook and
Instagram •Browser support to IE8
![Page 4: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/4.jpg)
“React is not a full MVC framework, and this is actually one of its strengths. Many who adopt React choose to do so alongside their favorite MVC framework, like Backbone. React has no opinions about routing or syncing data, so you can easily use your favorite tools to handle those aspects of your frontend application. You'll often see React used to manage specific parts of an application's UI and not others. React really shines, however, when you fully embrace its strategies and make it the core of your application's interface.”
@bkonkle: http://lincolnloop.com/blog/architecting-your-app-react-part-1/
![Page 5: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/5.jpg)
Why React?
• “State” is what makes building UIs hard • “Data Changing over time is the Root of All Evil”
![Page 6: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/6.jpg)
React Solution
Use composable React components that effectively re-render themselves on each state mutation
![Page 7: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/7.jpg)
•Apple •Oranges
•Apple •Grapes •Bananas
React
Before After
![Page 8: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/8.jpg)
Virtual DOM
•In-memory representation of the DOM and events system •Even HTML5 events in IE8
![Page 9: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/9.jpg)
Advantages of Virtual DOM
•Interacting with DOM -> Slow, •with Javascript In-Memory Objects -> fast
•60 fps fast •Faster parsing •Faster Validation
•Since no real browser, can easily render on server or client
•Easier To Test
![Page 10: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/10.jpg)
Fallout Advantages of Virtual DOM include
•Autobinding •Event Delegation
![Page 11: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/11.jpg)
http://lincolnloop.com/blog/architecting-your-app-react-part-1/
![Page 12: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/12.jpg)
React Components
React Components translate raw data into rich HTML
The Ultimate State Machine
![Page 13: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/13.jpg)
React Components
React.createClass({..})
The Ultimate State Machine
![Page 14: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/14.jpg)
Render: “pure” Javascript function
http://jsfiddle.net/zlendon/9xyn3/
![Page 15: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/15.jpg)
Render: “pure” Coffeescript function
http://jsfiddle.net/zlendon/32xj5/
![Page 16: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/16.jpg)
Render: Better “pure” Coffeescript function
http://jsfiddle.net/zlendon/32xj5/1/
![Page 18: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/18.jpg)
JSX “Desugared” to native Javascript
![Page 19: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/19.jpg)
Rules of Render•Return a single child component
•Native DOM component •Composite Component
•Return predictable result each time invoked •Does not touch the DOM (read or write) or interact with the
browser (i.e., setTimeout) !
![Page 20: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/20.jpg)
Rules of Server Side Render
!!!
!
•renderComponentToString on server •render on client, to same node, preserves server-rendered
markup and adds event handlers
•http://www.princeton.edu/~crmarsh/react-ssr/ (Charlie Marsh)
•https://github.com/andreypopp/react-async •https://github.com/karlmikko/bleeding-edge-
sample-app/blob/react-router/server/render/render.js (soon to be in React-Router)
tl&dr;
![Page 21: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/21.jpg)
React Components: Input
•Props: immutable data specific to an instance of a component •Like params into a function
•State: Private mutable attribute. Change within which trigger scheduling of a component re-render
![Page 22: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/22.jpg)
Both Props and State
• Are plain JS objects • Changes trigger a render update • Are deterministic. If your Component generates different outputs for
the same combination of props and state then you're doing something wrong.
https://github.com/uberVU/react-guide/blob/master/props-vs-state.md#readme
![Page 23: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/23.jpg)
Rules of State•Belong to only one component •Within that component, modified 2 ways
•getInitialState •setState
•Render returns same result each time invoked with same state
•Do not use computed data or duplicate prop data as state •Avoid using state when possible •Do not change state of children components
![Page 24: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/24.jpg)
Rules of Props
•Passed from the parent • Immutable •Often pass callback functions through them !
![Page 25: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/25.jpg)
Component LifecycleMounting • componentWillMount() • componentDidMount() !Updating • componentWillReceiveProps(object nextProps) • boolean shouldComponentUpdate(object nextProps, object nextState) • componentWillUpdate(object nextProps, object nextState) • componentDidUpdate(object prevProps, object prevState) !Unmounting • componentWillUnmount()
![Page 26: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/26.jpg)
Mixins
•Cross cutting concerns
•Examples: •ReactScriptLoader: https://github.com/yariv/ReactScriptLoader •ReactIntlMixin: https://github.com/yahoo/react-intl •Backbone.React.Component.mixin: https://github.com/
magalhas/backbone-react-component
![Page 27: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/27.jpg)
Scaling React
!!!
!
Action Controller Model View
Conference MVC
• Modified from Flux into by Jing Chen at F8, 2014
![Page 28: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/28.jpg)
Scaling with React
!!!
!
Action Controller Model ViewModelModel
Model
Model
Model
View
View
View
View
View
View
Real World MVC
![Page 29: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/29.jpg)
Scaling with React
!!!
!
Action Dispatcher Store View
Action
Flux
![Page 30: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/30.jpg)
Starting a New App: React•Lots of Great “Full-Stack” Starter Kit Options - Many Listed:
https://github.com/facebook/react/wiki/Complementary-Tools
![Page 31: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/31.jpg)
New Project w/ Routing•React Boilerplate: https://github.com/rackt/react-boilerplate •Uses:
•React-router (prev. react-nested-router) •Translation of Ember Router API to React
•Webpack •pushstate-serv
![Page 32: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/32.jpg)
New Project w/o Routing•https://github.com/newtriks/generator-react-webpack •Yeoman Generator •Uses:
•Webpack •Grunt •Karma
![Page 33: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/33.jpg)
New Project w/ Routing & Server-side Rendering:
•React Quickstart: •https://github.com/newtriks/generator-react-webpack
•Uses: •react-router-component •react-async •express •browserify •npm
![Page 34: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/34.jpg)
New Project: Midwest JS Demo
•React Boilerplate •Plus:
•Express (3) •Bootstrap 3
![Page 35: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/35.jpg)
DEMO DISCUSSION
![Page 36: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/36.jpg)
Adding React To Existing Project
“We don’t need to switch to React everywhere, all at once. It’s not a framework that imposes anything on the application structure. [...] Easy, iterative adoption is definitely something in React’s favor for us.”
!
-Adobe Brackets Team
![Page 37: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/37.jpg)
Backbone Views
•Nested Backbone.View’s are difficult to maintain •Every collection change re-renders all views
![Page 38: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/38.jpg)
Simple Backbone Port
![Page 39: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/39.jpg)
Integration with Backbone Models and Collections
•Trigger React re-render on Backbone model “change” events
![Page 40: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/40.jpg)
Mixins! Maybe
Lost shouldComponentUpdate hooks
TODO MVC: React + Backbone
![Page 41: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/41.jpg)
Mixins! MaybeBackbone-React-Component
![Page 42: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/42.jpg)
Mixins! MaybeBackbone-React-Component
![Page 43: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/43.jpg)
Use State Callback
![Page 44: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/44.jpg)
Use State Callback
![Page 45: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/45.jpg)
Angular and React
![Page 46: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/46.jpg)
Angular Directives Wrapping React
•ngReact
•ngReactGrid
![Page 47: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/47.jpg)
Angular ngReactGrid Demo
![Page 48: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/48.jpg)
Integration Lessons•You can integrate React with other frameworks •Backbone integration works better than many options since re-
rendering on model state change is the typical Backbone approach
•Angular will work best from directives but is a bit of a force fit •Best approach to let React own the DOM element being
rendered into
![Page 49: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/49.jpg)
(Beyond the Obvious) Additional Resources (1/2)•Great Collection of Community links:
https://github.com/mindreframer/reactjs-stuff •Developing User Interfaces with React: http://youtu.be/
1OeXsL5mr4g?list=PLuE9Gq9Mxr5kCvVa7tcwW1S2-FEym5fbt (intro + good performance demo)
•Good Flux intro by Ryan Florence: http://vimeo.com/102953099
•Thorough and infamous Angular/ReactJS performance/integration post: http://www.williambrownstreet.net/blog/2014/04/faster-angularjs-rendering-angularjs-and-reactjs/
•Performance Tools: http://facebook.github.io/react/docs/perf.html
!
![Page 50: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/50.jpg)
(Beyond the Obvious) Additional Resources (2/2)
!•Webpack Howto: https://github.com/petehunt/webpack-
howto •Webpack Hot Module Replacement: https://github.com/
webpack/docs/wiki/hot-module-replacement-with-webpack •Om: https://github.com/swannodette/om •Jest: http://facebook.github.io/jest/
![Page 51: Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)](https://reader034.vdocument.in/reader034/viewer/2022042601/54b7336f4a79595e468b45b0/html5/thumbnails/51.jpg)
Thank You
Questions?
Zach Lendon @zachlendon
#reactjs #midwestjs https://github.com/zachlendon
#reactjs on freenode