Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
500TECH - AngularJS Consultancy
ReactJS & AngularJSReactJS & AngularJS
Chuck Norris doesn't need a framework - he updates ...
500TECH - AngularJS Consultancy
Boris DinkevichBoris Dinkevich
CEO @ 500TECHCEO @ 500TECH
Cats, good weather and Ruby
500TECH - AngularJS Consultancy
What is ReactJS ?What is ReactJS ?
Component framework
Virtual DOM
Adding React to AngularAdding React to Angular
500TECH - AngularJS Consultancy
500TECH - AngularJS Consultancy
angular.module("sampleapp", [])
.directive("sampleDirective", function() {
return {
templa...
angular.module("sampleapp")
.directive("reactContainer", function() {
return {
template: '<div></div>',
link: function(sco...
500TECH - AngularJS Consultancy
angular.module("sampleapp")
.directive("reactContainer", function() {
return {
template: '...
500TECH - AngularJS Consultancy
ngReactngReact
https://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({
r...
500TECH - AngularJS Consultancy
Dependency Injection - IIDependency Injection - II
Example code
angular.module("sampleapp"...
500TECH - AngularJS Consultancy
Dependency Injection - IIIDependency Injection - III
Example code
// ReactComponent = .......
500TECH - AngularJS Consultancy
Dependency Injection - IVDependency Injection - IV
angular.module("sampleapp")
.factory("H...
500TECH - AngularJS Consultancy
Going crazyGoing crazy
Angular in React in Angular in React in Angular
Example code
angular.module("sampleapp")
.factory("ComplexComponent", function(HeaderComponent, FooterComponent) {
return React.createC...
500TECH - AngularJS Consultancy
Directory structureDirectory structure
App
|
|- directives
|- services
|- components
|
.
....
500TECH - AngularJS Consultancy
But wait..But wait..
return React.createElement(
"h2",
null,
"React Component: ",
DataServ...
500TECH - AngularJS Consultancy
There is no $watchThere is no $watch
If you want data binding, you can either use
Angular'...
500TECH - AngularJS Consultancy
The Angular wayThe Angular way
We have Dependency Injection...
We have $rootScope or conta...
500TECH - AngularJS Consultancy
How does Angular renderHow does Angular render
Digest cycleDigest cycle
500TECH - AngularJS Consultancy
How does React renderHow does React render
Data modeling - NOT Virtual DOMData modeling - ...
500TECH - AngularJS Consultancy
-- ProfileComponent
<div class="row">
<div class="col-sm-6">
<div class="profile-pic">
<im...
500TECH - AngularJS Consultancy
So what is this Virtual DOM ?So what is this Virtual DOM ?
-- ProfileComponent
<div class=...
500TECH - AngularJS Consultancy
Wow right ?Wow right ?
ReactJS saved DOM manipulations by
calculating the diff itself.
.. ...
500TECH - AngularJS Consultancy
500TECH - AngularJS Consultancy
"Speed" comparison"Speed" comparison
If you look carefuly, most samples of AngularJS vs Re...
500TECH - AngularJS Consultancy
So why React ?So why React ?
Components life cycle
Clear state management
Break away from ...
500TECH - AngularJS Consultancy
So why React ?So why React ?
Total results: {{ ? }}
Available ?
Isolated scope digest
Isol...
500TECH - AngularJS Consultancy
Server RenderingServer Rendering
SEO
Fast page load (bind later)
Embed in page before Angu...
500TECH - AngularJS Consultancy
Life cycleLife cycle
“ You can simulate everything in
AngularJS, but then its not AngularJ...
500TECH - AngularJS Consultancy
JSX ?JSX ?
React.createElement("div", null,
React.createElement(HeaderComponent, null),
Re...
500TECH - AngularJS Consultancy
Directive TemplateDirective Template
<div class="row">
<div class="controls" ng-class={ vi...
500TECH - AngularJS Consultancy
JSXJSX
render: function() {
var className = cx({
'visible': this.state.canAdd,
'controls':...
500TECH - AngularJS Consultancy
JSXJSX
Interesting solution from Wix ( )
Work directly with final result
Splitting to very ...
500TECH - AngularJS Consultancy
Data ModelingData Modeling
500TECH - AngularJS Consultancy
Angular / MVVMAngular / MVVM
Data flowData flow
500TECH - AngularJS Consultancy
FluxFlux
A Pattern - Not a libraryA Pattern - Not a library
“ All arrows go one way
500TECH - AngularJS Consultancy
Flux librariesFlux libraries
Facebook Flux
Fluxible by Yahoo
Reflux
Alt
Flummox
Marty
McFly...
500TECH - AngularJS Consultancy
Flux in AngularFlux in Angular
Regular services
EventEmitter / $broadcast
ReactJS Flux lib...
500TECH - AngularJS Consultancy
Angular 2.0Angular 2.0
500TECH - AngularJS Consultancy
Questions ?Questions ?
Thank you !
Boris@500Tech.com
Amazing AngularJS / NodeJS / ReactJS ...
Upcoming SlideShare
Loading in …5
×

Using ReactJS in AngularJS

12,362 views

Published on

How to use AngularJS and ReactJS together

Published in: Technology
  • Be the first to comment

Using ReactJS in AngularJS

  1. 1. 500TECH - AngularJS Consultancy ReactJS & AngularJSReactJS & AngularJS Chuck Norris doesn't need a framework - he updates the DOM directly, in C. (not vs !) Boris Dinkevich
  2. 2. 500TECH - AngularJS Consultancy Boris DinkevichBoris Dinkevich CEO @ 500TECHCEO @ 500TECH Cats, good weather and Ruby
  3. 3. 500TECH - AngularJS Consultancy What is ReactJS ?What is ReactJS ? Component framework Virtual DOM
  4. 4. Adding React to AngularAdding React to Angular 500TECH - AngularJS Consultancy
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 500TECH - AngularJS Consultancy ngReactngReact https://github.com/davidchang/ngReact
  9. 9. 500TECH - AngularJS Consultancy Thank you, buh bye !Thank you, buh bye !
  10. 10. 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"); } }); })
  11. 11. 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()); } }); })
  12. 12. 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] ); } } });
  13. 13. 500TECH - AngularJS Consultancy Dependency Injection - IVDependency Injection - IV angular.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) )} }); })
  14. 14. 500TECH - AngularJS Consultancy Going crazyGoing crazy Angular in React in Angular in React in Angular Example code
  15. 15. 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 Babel JSX-transpiler Works with Webpack/Gulp/Grunt/etc
  16. 16. 500TECH - AngularJS Consultancy Directory structureDirectory structure App | |- directives |- services |- components | . . .
  17. 17. 500TECH - AngularJS Consultancy But wait..But wait.. return React.createElement( "h2", null, "React Component: ", DataService.data() ); DataServices.data() ?
  18. 18. 500TECH - AngularJS Consultancy There is no $watchThere is no $watch If you want data binding, you can either use Angular's or roll out your own (flux). Example code “ $broadcast makes more sense there
  19. 19. 500TECH - AngularJS Consultancy 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..
  20. 20. 500TECH - AngularJS Consultancy How does Angular renderHow does Angular render Digest cycleDigest cycle
  21. 21. 500TECH - AngularJS Consultancy How does React renderHow does React render Data modeling - NOT Virtual DOMData modeling - NOT Virtual DOM
  22. 22. 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 ?
  23. 23. 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>
  24. 24. 500TECH - AngularJS Consultancy 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
  25. 25. 500TECH - AngularJS Consultancy
  26. 26. 500TECH - AngularJS Consultancy "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."
  27. 27. 500TECH - AngularJS Consultancy So why React ?So why React ? Components life cycle Clear state management Break away from $digest Server side rendering ! Buzz
  28. 28. 500TECH - AngularJS Consultancy So why React ?So why React ? Total results: {{ ? }} Available ? Isolated scope digest Isolated scope digest Isolated scope digest
  29. 29. 500TECH - AngularJS Consultancy Server RenderingServer Rendering SEO Fast page load (bind later) Embed in page before Angular even runs ["hip","hip"]
  30. 30. 500TECH - AngularJS Consultancy Life cycleLife cycle “ You can simulate everything in AngularJS, but then its not AngularJS.
  31. 31. 500TECH - AngularJS Consultancy JSX ?JSX ? React.createElement("div", null, React.createElement(HeaderComponent, null), React.createElement("div", null, "Some nice graphics"), React.createElement(FooterComponent, null) )}
  32. 32. 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>
  33. 33. 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> ); }
  34. 34. 500TECH - AngularJS Consultancy JSXJSX Interesting solution from Wix ( ) Work directly with final result Splitting to very large of mini components react-templates
  35. 35. 500TECH - AngularJS Consultancy Data ModelingData Modeling
  36. 36. 500TECH - AngularJS Consultancy Angular / MVVMAngular / MVVM Data flowData flow
  37. 37. 500TECH - AngularJS Consultancy FluxFlux A Pattern - Not a libraryA Pattern - Not a library “ All arrows go one way
  38. 38. 500TECH - AngularJS Consultancy Flux librariesFlux libraries Facebook Flux Fluxible by Yahoo Reflux Alt Flummox Marty McFly Lux Material Flux Delorean
  39. 39. 500TECH - AngularJS Consultancy Flux in AngularFlux in Angular Regular services EventEmitter / $broadcast ReactJS Flux libraries
  40. 40. 500TECH - AngularJS Consultancy Angular 2.0Angular 2.0
  41. 41. 500TECH - AngularJS Consultancy 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

×