react intro

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