Download - 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
500TECH - AngularJS Consultancy
Boris DinkevichBoris DinkevichCEO @ 500TECHCEO @ 500TECH
Cats, good weather and Ruby
500TECH - AngularJS Consultancy
What is ReactJS ?What is ReactJS ?Component frameworkVirtual DOM
Adding React to AngularAdding React to Angular
500TECH - AngularJS Consultancy
500TECH - AngularJS Consultancy
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]); } } });
500TECH - AngularJS Consultancy
<body> <sample-directive></sample-directive> <react-container></react-container></body>
var MyComponent = React.createClass({ render: function() { return <h2>React Component</h2>; }});
Directive to render a ComponentDirective to render a Component
500TECH - AngularJS Consultancy
angular.module("sampleapp") .directive("reactContainer", function() { return { template: '<div></div>', link: function(scope, element, attrs) { return React.render( React.createElement(MyComponent, null), element[0]); } } });
Directive to render a ComponentDirective to render a Component
500TECH - AngularJS Consultancy
ngReactngReacthttps://github.com/davidchang/ngReact
500TECH - AngularJS Consultancy
Thank you, buh bye !Thank you, buh bye !
500TECH - AngularJS Consultancy
Dependency Injection - IDependency Injection - I
Example code
return React.createClass({ render: function() { return React.createElement("h2", null, "React Component"); } });
angular.module("sampleapp") .factory("ReactComponent", function() { return React.createClass({ render: function() { return React.createElement("h2", null, "React Component"); } }); })
500TECH - AngularJS Consultancy
Dependency Injection - IIDependency Injection - II
Example code
angular.module("sampleapp") .factory("ReactComponent", function() { return React.createClass({ render: function() { return React.createElement("h2", null, "React Component"); } }); })
angular.module("sampleapp") .factory("ReactComponent", function(DataService) { return React.createClass({ render: function() { return React.createElement("h2", null, "React Component: ", DataService.data()); } }); })
500TECH - AngularJS Consultancy
Dependency Injection - IIIDependency Injection - III
Example code
// ReactComponent = ....
angular.module("sampleapp") .directive("reactContainer", function() { return { template: '<div></div>', link: function(scope, element, attrs) { return React.render( React.createElement(ReactComponent, null), element[0] ); } } });
angular.module("sampleapp") .directive("reactContainer", function(ReactComponent) { return { template: '<div></div>', link: function(scope, element, attrs) { return React.render( React.createElement(ReactComponent, null), element[0] ); } } });
500TECH - AngularJS Consultancy
Dependency Injection - IVDependency Injection - IVangular.module("sampleapp") .factory("HeaderComponent", function(DataService) { return React.createClass({ render: function() { return React.createElement("h2", null, "React Component: ", DataService.data()); } }); })
angular.module("sampleapp") .factory("ComplexComponent", function(HeaderComponent, FooterComponent) { return React.createClass({ render: function() { React.createElement("div", null, React.createElement(HeaderComponent, null), React.createElement("div", null, "Some nice graphics"), React.createElement(FooterComponent, null) )} }); })
500TECH - AngularJS Consultancy
Going crazyGoing crazyAngular in React in Angular in React in Angular
Example code
angular.module("sampleapp") .factory("ComplexComponent", function(HeaderComponent, FooterComponent) { return React.createClass({ render: function() { return React.createElement("div", null, React.createElement(HeaderComponent, null), React.createElement("div", null, "Some nice graphics"), React.createElement(FooterComponent, null)
); } }); })
500TECH - AngularJS Consultancy
angular.module("sampleapp") .factory("ComplexComponent", function(HeaderComponent, FooterComponent) { return React.createClass({ render: function() { return ( <div> <HeaderComponent /> <div>Some nice graphics</div> <FooterComponent /> </div> ); } }); })
JSXJSX
BabelJSX-transpilerWorks with Webpack/Gulp/Grunt/etc
500TECH - AngularJS Consultancy
Directory structureDirectory structureApp | |- directives |- services |- components | . . .
500TECH - AngularJS Consultancy
But wait.. But wait.. return React.createElement( "h2", null, "React Component: ", DataService.data());
DataServices.data() ?
500TECH - AngularJS Consultancy
There is no $watchThere is no $watchIf you want data binding, you can either useAngular's or roll out your own (flux).
Example code
“ $broadcast makes more sense there
500TECH - AngularJS Consultancy
The Angular wayThe Angular wayWe have Dependency Injection...
We have $rootScope or container's Isolated Scope
We have $on & $watch
We can use digest !
“ Uh oh..
500TECH - AngularJS Consultancy
How does Angular renderHow does Angular renderDigest cycleDigest cycle
500TECH - AngularJS Consultancy
How does React renderHow does React renderData modeling - NOT Virtual DOMData modeling - NOT Virtual DOM
500TECH - AngularJS Consultancy
-- ProfileComponent
<div class="row"> <div class="col-sm-6"> <div class="profile-pic"> <img src="/images/51233221.jpg" /> </div> </div> <div class="col-sm-6"> <div class="data-container"> <span> <i class="icon-name"></i> Boris Dinkevich </span> </div> <div class="data-container"> <span> <i class="icon-age"></i> 33 </span> </div></div>
So what is this Virtual DOM ?So what is this Virtual DOM ?
500TECH - AngularJS Consultancy
So what is this Virtual DOM ?So what is this Virtual DOM ?-- ProfileComponent
<div class="row"> <div class="col-sm-6"> <div class="profile-pic"> <img src="/images/51233221.jpg" /> </div> </div> <div class="col-sm-6"> <div class="data-container"> <span> <i class="icon-name"></i> Boris Dinkevich </span> </div> <div class="data-container"> <span> <i class="icon-age"></i> 34 </span> </div></div>
-- ProfileComponent
<div class="row"> <div class="col-sm-6"> <div class="profile-pic"> <img src="/images/51233221.jpg" /> </div> </div> <div class="col-sm-6"> <div class="data-container"> <span> <i class="icon-name"></i> Boris Dinkevich </span> </div> <div class="data-container"> <span> <i class="icon-age"></i> 33 </span> </div></div>
500TECH - AngularJS Consultancy
Wow right ?Wow right ?ReactJS saved DOM manipulations bycalculating the diff itself.
.. in JavaScript ..
React.js Conf 2015 - Hype!Angular + React = Speed Dave Smith
500TECH - AngularJS Consultancy
500TECH - AngularJS Consultancy
"Speed" comparison"Speed" comparisonIf 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 SmithFixed github demo PR (Angular and React same speed)
“ "In theory, there ought to be no difference between theory and practice. In practice, there is."
500TECH - AngularJS Consultancy
So why React ?So why React ?Components life cycleClear state managementBreak away from $digestServer side rendering !Buzz
500TECH - AngularJS Consultancy
So why React ?So why React ?
Total results: {{ ? }}
Available ?
Isolated scope digest
Isolated scope digest
Isolated scope digest
500TECH - AngularJS Consultancy
Server RenderingServer RenderingSEOFast page load (bind later)Embed in page before Angular even runs
["hip","hip"]
500TECH - AngularJS Consultancy
Life cycleLife cycle
“ You can simulate everything inAngularJS, but then its not AngularJS.
500TECH - AngularJS Consultancy
JSX ?JSX ?React.createElement("div", null, React.createElement(HeaderComponent, null), React.createElement("div", null, "Some nice graphics"), React.createElement(FooterComponent, null))}
500TECH - AngularJS Consultancy
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>
500TECH - AngularJS Consultancy
JSXJSX render: function() { 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> ); }
500TECH - AngularJS Consultancy
JSXJSXInteresting solution from Wix ( )Work directly with final resultSplitting to very large of mini components
react-templates
500TECH - AngularJS Consultancy
Data ModelingData Modeling
500TECH - AngularJS Consultancy
Angular / MVVMAngular / MVVMData flowData flow
500TECH - AngularJS Consultancy
FluxFluxA Pattern - Not a libraryA Pattern - Not a library
“ All arrows go one way
500TECH - AngularJS Consultancy
Flux librariesFlux librariesFacebook Flux
Fluxible by Yahoo
Reflux
Alt
Flummox
Marty
McFly
Lux
Material Flux
Delorean
500TECH - AngularJS Consultancy
Flux in AngularFlux in AngularRegular servicesEventEmitter / $broadcastReactJS Flux libraries
500TECH - AngularJS Consultancy
Angular 2.0Angular 2.0
500TECH - AngularJS Consultancy
Questions ?Questions ?
Thank you [email protected]
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 Coursestarts this Wedensday