Using ReactJS in AngularJS

500TECH - AngularJS Consultancy
ReactJS & AngularJSReactJS & AngularJS
Chuck Norris doesn't need a framework - he updates the DOM directly, in C.
(not vs !)
Boris Dinkevich

Boris DinkevichBoris Dinkevich
CEO @ 500TECHCEO @ 500TECH
Cats, good weather and Ruby

What is ReactJS ?What is ReactJS ?
Component framework
Virtual DOM

Adding React to AngularAdding React to Angular

angular.module("sampleapp", [])
.directive("sampleDirective", function() {
return {
template: "<h2>Angular directive</h2>"
}
});
<body>
<sample-directive></sample-directive>
</body>
Example code
var MyComponent = React.createClass({
render: function() {
return <h2>React Component</h2>;
}
});
The basicsThe basics

angular.module("sampleapp")
.directive("reactContainer", function() {
return {
template: '<div></div>',
link: function(scope, element, attrs) {
return React.render(React.createElement(MyComponent, null), element[0]);
}
}
});
<body>
<sample-directive></sample-directive>
<react-container></react-container>
</body>
var MyComponent = React.createClass({
return <h2>React Component</h2>;
}
});
Directive to render a ComponentDirective to render a Component

return {
return React.render(
React.createElement(MyComponent, null),
element[0]);
}
}
});
Directive to render a ComponentDirective to render a Component

ngReactngReact
https://github.com/davidchang/ngReact

Thank you, buh bye !Thank you, buh bye !

Dependency Injection - IDependency Injection - I
Example code
return React.createClass({
return React.createElement("h2", null, "React Component");
}
});
.factory("ReactComponent", function() {
}
});
})

Dependency Injection - IIDependency Injection - II
Example code
.factory("ReactComponent", function() {
}
});
})
.factory("ReactComponent", function(DataService) {
return React.createElement("h2", null, "React Component: ", DataService.data());
}
});
})

Dependency Injection - IIIDependency Injection - III
Example code
// ReactComponent = ....
return {
React.createElement(ReactComponent, null), element[0]
);
}
}
});
.directive("reactContainer", function(ReactComponent) {
return {
React.createElement(ReactComponent, null), element[0]
);
}
}
});

Dependency Injection - IVDependency Injection - IV
.factory("HeaderComponent", function(DataService) {
return React.createElement("h2", null, "React Component: ", DataService.data());
}
});
})
.factory("ComplexComponent", function(HeaderComponent, FooterComponent) {
React.createElement("div", null,
React.createElement(HeaderComponent, null),
React.createElement("div", null, "Some nice graphics"),
React.createElement(FooterComponent, null)
)}
});
})

Going crazyGoing crazy
Angular in React in Angular in React in Angular
Example code

return
);
}
});
})
return (
<div>
<HeaderComponent />
<div>Some nice graphics</div>
<FooterComponent />
</div>
);
}
});
})
JSXJSX
Babel
JSX-transpiler
Works with Webpack/Gulp/Grunt/etc

But wait..But wait..
return React.createElement(
"h2",
null,
"React Component: ",
DataService.data()
);
DataServices.data() ?

There is no $watchThere is no $watch
If you want data binding, you can either use
Angular's or roll out your own (ﬂux).
Example code
“ $broadcast makes more sense there

The Angular wayThe Angular way
We have Dependency Injection...
We have $rootScope or container's Isolated Scope
We have $on & $watch
We can use digest !
“ Uh oh..

How does Angular renderHow does Angular render
Digest cycleDigest cycle

How does React renderHow does React render
Data modeling - NOT Virtual DOMData modeling - NOT Virtual DOM

-- ProfileComponent
<div class="row">
<div class="col-sm-6">
<div class="profile-pic">
<img src="/images/51233221.jpg" />
</div>
</div>
<div class="data-container">
<span>
<i class="icon-name"></i>
Boris Dinkevich
</span>
</div>
<span>
<i class="icon-age"></i>
33
</span>
</div>
</div>
So what is this Virtual DOM ?So what is this Virtual DOM ?

So what is this Virtual DOM ?So what is this Virtual DOM ?
-- ProfileComponent
<div class="row">
</div>
</div>
<span>
Boris Dinkevich
</span>
</div>
<span>
34
</span>
</div>
</div>
-- ProfileComponent
<div class="row">
</div>
</div>
<span>
Boris Dinkevich
</span>
</div>
<span>
33
</span>
</div>
</div>

Wow right ?Wow right ?
ReactJS saved DOM manipulations by
calculating the diff itself.
.. in JavaScript ..
React.js Conf 2015 - Hype!
Angular + React = Speed Dave Smith

"Speed" comparison"Speed" comparison
If you look carefuly, most samples of AngularJS vs ReactJS either:
Unoptimized Angular side
React.js Conf 2015 - Hype!
Fixed github demo PR (Angular is 2x faster than React)
Compares data binding ($digest), not rendering.
Angular + React = Speed Dave Smith
Fixed github demo PR (Angular and React same speed)
“ "In theory, there ought to be no difference between theory and practice. In practice, there is."

So why React ?So why React ?
Components life cycle
Clear state management
Break away from $digest
Server side rendering !
Buzz

So why React ?So why React ?
Total results: {{ ? }}
Available ?
Isolated scope digest

Server RenderingServer Rendering
SEO
Fast page load (bind later)
Embed in page before Angular even runs
["hip","hip"]

Life cycleLife cycle
“ You can simulate everything in
AngularJS, but then its not AngularJS.

JSX ?JSX ?
)}

Directive TemplateDirective Template
<div class="row">
<div class="controls" ng-class={ visible: ctrl.canAdd}>
<button ng-click="ctrl.addRow">New row</button>
<a class="back-button" href="">Go back</a>
</div>
<div ng-repeat="row in ctrl.rows" class="item">{{ row.name }}</div>
<HelpMessage type="addRow" ng-if="ctrl.canAdd"></HelpMessage>
</div>

JSXJSX
var className = cx({
'visible': this.state.canAdd,
'controls': true
});
var renderRow = function(row) {
return (<div className="item">{ row.name }</div>);
}
return (
<div className="row">
<div className={ className }>
<button onClick={ this.addRow }>New row</button>
<a className="back-button" href="">Go back</a>
</div>
{ this.state.rows.map(renderRow) }
{ this.state.canAdd ? <HelpMessage type="addRow" /> : null }
</div>
);
}

JSXJSX
Interesting solution from Wix ( )
Work directly with ﬁnal result
Splitting to very large of mini components
react-templates

Data ModelingData Modeling

Angular / MVVMAngular / MVVM
Data ﬂowData ﬂow

FluxFlux
A Pattern - Not a libraryA Pattern - Not a library
“ All arrows go one way

Flux librariesFlux libraries
Facebook Flux
Fluxible by Yahoo
Reﬂux
Alt
Flummox
Marty
McFly
Lux
Material Flux
Delorean

Flux in AngularFlux in Angular
Regular services
EventEmitter / $broadcast
ReactJS Flux libraries

Angular 2.0Angular 2.0

Questions ?Questions ?
Thank you !
Boris@500Tech.com
Amazing AngularJS / NodeJS / ReactJS Dev ?
Want to hone your skills on projects of all size and shape ?
Work in Israel & NYC ?
- Talk to me at the break
Our next AngularJS Course
starts this Wedensday

Using ReactJS in AngularJS

More Related Content

What's hot (20)

Similar to Using ReactJS in AngularJS (20)

More from Boris Dinkevich (6)

Recently uploaded (20)

Using ReactJS in AngularJS