Downloaded 158 times
![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](https://image.slidesharecdn.com/decks1-150529093602-lva1-app6892/75/Using-ReactJS-in-AngularJS-5-2048.jpg)
![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](https://image.slidesharecdn.com/decks1-150529093602-lva1-app6892/75/Using-ReactJS-in-AngularJS-6-2048.jpg)
![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](https://image.slidesharecdn.com/decks1-150529093602-lva1-app6892/75/Using-ReactJS-in-AngularJS-7-2048.jpg)
![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] ); } } });](https://image.slidesharecdn.com/decks1-150529093602-lva1-app6892/75/Using-ReactJS-in-AngularJS-12-2048.jpg)
![500TECH - AngularJS Consultancy Server RenderingServer Rendering SEO Fast page load (bind later) Embed in page before Angular even runs ["hip","hip"]](https://image.slidesharecdn.com/decks1-150529093602-lva1-app6892/75/Using-ReactJS-in-AngularJS-29-2048.jpg)
Uploaded byBoris Dinkevich
Using ReactJS in AngularJS
The document discusses integrating ReactJS with AngularJS. It describes using directives to render React components, dependency injection with React components, and using JSX syntax with components. It also covers data modeling approaches, comparing Angular's digest cycle to React's virtual DOM, and questions around performance comparisons.
Using ReactJS in AngularJS
- 1. 500TECH - AngularJSConsultancy ReactJS & AngularJSReactJS & AngularJS Chuck Norris doesn't need a framework - he updates the DOM directly, in C. (not vs !) Boris Dinkevich
- 2. 500TECH - AngularJSConsultancy Boris DinkevichBoris Dinkevich CEO @ 500TECHCEO @ 500TECH Cats, good weather and Ruby
- 3. 500TECH - AngularJSConsultancy What is ReactJS ?What is ReactJS ? Component framework Virtual DOM
- 4. Adding React toAngularAdding React to Angular 500TECH - AngularJS Consultancy
- 5. 500TECH - AngularJSConsultancy 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. 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. 500TECH - AngularJSConsultancy 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. 500TECH - AngularJSConsultancy ngReactngReact https://github.com/davidchang/ngReact
- 9. 500TECH - AngularJSConsultancy Thank you, buh bye !Thank you, buh bye !
- 10. 500TECH - AngularJSConsultancy 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. 500TECH - AngularJSConsultancy 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. 500TECH - AngularJSConsultancy 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. 500TECH - AngularJSConsultancy 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. 500TECH - AngularJSConsultancy Going crazyGoing crazy Angular in React in Angular in React in Angular Example code
- 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. 500TECH - AngularJSConsultancy Directory structureDirectory structure App | |- directives |- services |- components | . . .
- 17. 500TECH - AngularJSConsultancy But wait..But wait.. return React.createElement( "h2", null, "React Component: ", DataService.data() ); DataServices.data() ?
- 18. 500TECH - AngularJSConsultancy 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. 500TECH - AngularJSConsultancy 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. 500TECH - AngularJSConsultancy How does Angular renderHow does Angular render Digest cycleDigest cycle
- 21. 500TECH - AngularJSConsultancy How does React renderHow does React render Data modeling - NOT Virtual DOMData modeling - NOT Virtual DOM
- 22. 500TECH - AngularJSConsultancy -- 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. 500TECH - AngularJSConsultancy 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. 500TECH - AngularJSConsultancy 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. 500TECH - AngularJSConsultancy
- 26. 500TECH - AngularJSConsultancy "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. 500TECH - AngularJSConsultancy So why React ?So why React ? Components life cycle Clear state management Break away from $digest Server side rendering ! Buzz
- 28. 500TECH - AngularJSConsultancy So why React ?So why React ? Total results: {{ ? }} Available ? Isolated scope digest Isolated scope digest Isolated scope digest
- 29. 500TECH - AngularJSConsultancy Server RenderingServer Rendering SEO Fast page load (bind later) Embed in page before Angular even runs ["hip","hip"]
- 30. 500TECH - AngularJSConsultancy Life cycleLife cycle “ You can simulate everything in AngularJS, but then its not AngularJS.
- 31. 500TECH - AngularJSConsultancy JSX ?JSX ? React.createElement("div", null, React.createElement(HeaderComponent, null), React.createElement("div", null, "Some nice graphics"), React.createElement(FooterComponent, null) )}
- 32. 500TECH - AngularJSConsultancy 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. 500TECH - AngularJSConsultancy 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. 500TECH - AngularJSConsultancy JSXJSX Interesting solution from Wix ( ) Work directly with final result Splitting to very large of mini components react-templates
- 35. 500TECH - AngularJSConsultancy Data ModelingData Modeling
- 36. 500TECH - AngularJSConsultancy Angular / MVVMAngular / MVVM Data flowData flow
- 37. 500TECH - AngularJSConsultancy FluxFlux A Pattern - Not a libraryA Pattern - Not a library “ All arrows go one way
- 38. 500TECH - AngularJSConsultancy Flux librariesFlux libraries Facebook Flux Fluxible by Yahoo Reflux Alt Flummox Marty McFly Lux Material Flux Delorean
- 39. 500TECH - AngularJSConsultancy Flux in AngularFlux in Angular Regular services EventEmitter / $broadcast ReactJS Flux libraries
- 40. 500TECH - AngularJSConsultancy Angular 2.0Angular 2.0
- 41. 500TECH - AngularJSConsultancy 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