react intro
TRANSCRIPT
1
React.JS a modern View of MVC
Koustuv SinhaApril 2015
2
Contents What is React
Motivation for React
Concept of Virtual DOM
Componentization of User Interface
Implementation of React
JSX
Virtual DOM and Components
Properties – Props
State Management – States
Component Lifecycle
Mixins
Isomorphic Javascript
Angular & React
Angular vs React in Performance
3
Not a Framework, But a Library
The view in MVC
Built by Facebook
Full Virtual DOM
Can be used in any framework as the View component
Separation of Concerns
What is React?
4
Nowadays, Javascript is very fast
New ES6 recommendation introduces powerful OOP principles in JS
But the main drawback is DOM
Till now, no complete standardization has been made in DOM api’s or Events in all browsers
DOM updates are slow
Applications are growing ever complex and data intensive
Motivation for React
5
React maintains a pure Javascript version of the DOM
All changes are done in the JS virtual DOM, so are very fast
React maintains the versions of the virtual DOM
React calculates the changes and updates the real DOM in a sequence of fast and optimized transactions
Eliminates XSS vulnerability
Can run on Node.js without any browser
Highly testable
Concept of Virtual DOM
6
Implementation of React
Browser ReactEvent
ReactDiff UserCode
Native Browser Event
Synthetic Event
Descriptor
DOM Operation
7
Componentization of User Interface
Parent – Child hierarchy
8
Componentization of User Interface
9
Componentization of User Interface
10
Componentization of User Interface
11
Componentization of User Interface
Corresponding code
var react = require(‘react’);
var NewsItem = React.createClass({render : function() {
return (<article className=‘news-
item’><div className=‘news-
author’><NewsAuthor />
</div><NewsTitle/>…
);}
});
Main function to draw in virtual DOM
12
JavaScript & XML – built for React
Can use HTML syntax inside of JavaScript
Compiles into pure Javascript by compilers (to be added by user)
In browser compilation possible, but not recommended for production as it is a bit slow
For production, compile jsx to js by task runners, example Gulp plugin
JSX
13
Virtual DOM & Components
14
Virtual DOM & Components
Core React Philosophy : re-render the entire virtual DOM on every state update (setState)
Batched read/writes for optimal DOM performance
15
Method to pass data and functions from Parent component to child component
Immutable data, that is the data that is passed by the parent cannot be changed by child
Props can be validated
Properties - props
Property “post” being passed from parent NewsItem to child NewsAuthor
16
Every Component has its own exclusive state
This data in state is mutable
Virtual DOM is re-rendered on each state change
State Management - state
Initiate the state variables
Set the state variablesGet the state variables by : this.state.<variable>
17
Callbacks to interact with Virtual DOM to manipulate the real DOM
Manage virtual DOM render updates
Manage state of component
Integrate third party scripts
Component Lifecycle
18
Initial Render
Component Lifecycle
19
Props Change
Component Lifecycle
20
State Change
Component Unmount
Component Lifecycle
21
Reusable code segments
More like ‘class’ concept of OOP
Has its own lifecycle methods
Can be injected in main component
Mixins
Redundant Code
22
Create Mixin
Mixins
Re-use Mixin
23
Problem in today’s SPA’s (Single Page Applications)
Whole Javascript library has to be loaded to render the component
Flash of Unstyled content (Angular)
SEO Failure – SPA’s cannot be crawled by robots as they only render on client
JavaScript disabled browsers cannot render
Isomorphic Javascript
• Solution – Go back to the Server!• Render component both on server and client• React components can be generated on server and then passed to client• On client load, client side event handling will take charge
24
Vanilla SPA
Isomorphic Javascript
Persistence via API
Server Client
Form Validatio
n
DOM Manipulation
Animations
View Layer
Routing / Controller
Application Logic
25
Isomorphic Javascript
Isomorphic Javascript
Persistence via API
Server Client
Form Validatio
n
DOM Manipulation
Animations
View Layer
Routing / Controller
Application Logic
26
Isomorphic Javascript
Render Components at Server -> Attach behavior at client
Example : http://react-router-mega-demo.herokuapp.com/
27
Angular & React
• Since React is only the View, can be used with Angular
• React components can be written in Angular directives
• Angular Performance can be greatly improved by using react
• NgReact directive is created having all react components - https://github.com/davidchang/ngReact
28
Since React is only the view, and it has virtual DOM technology, it is considerably fast than Angular 1.x
React takes only incremental DOM changes, while Angular performs a lot of DOM changes, thus takes time and is heavier
We performed a sample performance benchmark between them.
Sample Application which has a large data table, whose individual states are updated after 5 seconds :
Angular : http://jsfiddle.net/gamekathu/dc7n1x5q/
React : http://jsfiddle.net/gamekathu/u59baq8y/
Angular vs React
29
Angular vs React
Angular 1.3
React
Takes long time as most of the time is gone in re-painting
Small incremental batched DOM changes, thus is very fast
30
React is the Fastest DOM rendering library written yet.
Used By :
References
https://www.youtube.com/watch?v=x7cQ3mrcKaY
https://github.com/enaqx/awesome-react
http://facebook.github.io/react/docs/getting-started.html
http://facebook.github.io/react/docs/videos.html
https://speakerdeck.com/pedronauck/reactjs-keep-simple-everything-can-be-a-component
http://javascript.tutorialhorizon.com/2014/09/13/execution-sequence-of-a-react-components-lifecycle-methods/
Conclusion
31
Thank You