SlideShare a Scribd company logo
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 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 {
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
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({
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 - 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)
)}
});
})
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.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
500TECH - AngularJS Consultancy
Directory structureDirectory structure
App
|
|- 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 $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
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..
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 - 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 by
calculating the diff itself.
.. in JavaScript ..
React.js Conf 2015 - Hype!
Angular + React = Speed Dave Smith
500TECH - AngularJS Consultancy
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."
500TECH - AngularJS Consultancy
So why React ?So why React ?
Components life cycle
Clear state management
Break away from $digest
Server 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 Rendering
SEO
Fast page load (bind later)
Embed in page before Angular even runs
["hip","hip"]
500TECH - AngularJS Consultancy
Life cycleLife cycle
“ You can simulate everything in
AngularJS, 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
JSXJSX
Interesting solution from Wix ( )
Work directly with final result
Splitting to very large of mini components
react-templates
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
Lux
Material Flux
Delorean
500TECH - AngularJS Consultancy
Flux in AngularFlux in Angular
Regular services
EventEmitter / $broadcast
ReactJS Flux libraries
500TECH - AngularJS Consultancy
Angular 2.0Angular 2.0
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

More Related Content

PDF
Angular js vs. Facebook react
PPTX
Combining Angular and React Together
PPTX
React vs Angular: ups & downs (speaker Oleksandr Kovalov, Binary Studio)
PPTX
PPTX
React Vs AnagularJS
PPTX
Getting started with ReactJS
PPTX
Introduction to Angularjs
ODP
AngularJs Crash Course
Angular js vs. Facebook react
Combining Angular and React Together
React vs Angular: ups & downs (speaker Oleksandr Kovalov, Binary Studio)
React Vs AnagularJS
Getting started with ReactJS
Introduction to Angularjs
AngularJs Crash Course

What's hot (20)

PDF
AngularJS - Overcoming performance issues. Limits.
PDF
Advanced Tips & Tricks for using Angular JS
PDF
Overview of the AngularJS framework
PDF
The Art of AngularJS - DeRailed 2014
PDF
AngularJS best-practices
PDF
A gently introduction to AngularJS
PPTX
Angular2 for Beginners
PPTX
AngularJS One Day Workshop
PDF
React vs-angular-mobile
PDF
AngularJS application architecture
PDF
AngularJS - What is it & Why is it awesome ? (with demos)
PDF
AngularJS Basics
PDF
React Facebook JavaScript Library
PPTX
AngularJS for Java Developers
PDF
Introduction to AngularJS
PDF
Gettings started with the superheroic JavaScript library AngularJS
PPTX
A Brief Introduction to React.js
PPTX
20180518 QNAP Seminar - Introduction to React Native
PPTX
AngularJs presentation
AngularJS - Overcoming performance issues. Limits.
Advanced Tips & Tricks for using Angular JS
Overview of the AngularJS framework
The Art of AngularJS - DeRailed 2014
AngularJS best-practices
A gently introduction to AngularJS
Angular2 for Beginners
AngularJS One Day Workshop
React vs-angular-mobile
AngularJS application architecture
AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS Basics
React Facebook JavaScript Library
AngularJS for Java Developers
Introduction to AngularJS
Gettings started with the superheroic JavaScript library AngularJS
A Brief Introduction to React.js
20180518 QNAP Seminar - Introduction to React Native
AngularJs presentation
Ad

Similar to Using ReactJS in AngularJS (20)

PPTX
Introduction à AngularJS
PPTX
Angular - Beginner
PDF
Yeoman AngularJS and D3 - A solid stack for web apps
PDF
Building Universal Web Apps with React ForwardJS 2017
PDF
Heroku pop-behind-the-sense
PPTX
Angular1x and Angular 2 for Beginners
PPT
AngularJS Mobile Warsaw 20-10-2014
PDF
AngularJS 101 - Everything you need to know to get started
PPTX
Angularjs 2
PDF
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
PPTX
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
PPTX
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
PPSX
PDF
Course CodeSchool - Shaping up with Angular.js
PPTX
AngularJs
PPTX
Angular workshop
PPT
AngularJS for Legacy Apps
PDF
AngularJS By Vipin
PPTX
Angular Js Get Started - Complete Course
PDF
243329387 angular-docs
Introduction à AngularJS
Angular - Beginner
Yeoman AngularJS and D3 - A solid stack for web apps
Building Universal Web Apps with React ForwardJS 2017
Heroku pop-behind-the-sense
Angular1x and Angular 2 for Beginners
AngularJS Mobile Warsaw 20-10-2014
AngularJS 101 - Everything you need to know to get started
Angularjs 2
gDayX 2013 - Advanced AngularJS - Nicolas Embleton
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
Course CodeSchool - Shaping up with Angular.js
AngularJs
Angular workshop
AngularJS for Legacy Apps
AngularJS By Vipin
Angular Js Get Started - Complete Course
243329387 angular-docs
Ad

More from Boris Dinkevich (6)

PDF
Advanced redux
PDF
Reduxing like a pro
PDF
Introduction to ReactJS and Redux
PDF
From render() to DOM
PDF
Introduction to React & Redux
PDF
Why ruby on rails
Advanced redux
Reduxing like a pro
Introduction to ReactJS and Redux
From render() to DOM
Introduction to React & Redux
Why ruby on rails

Recently uploaded (20)

PDF
Machine learning based COVID-19 study performance prediction
PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
PPTX
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
DOCX
The AUB Centre for AI in Media Proposal.docx
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PDF
A comparative analysis of optical character recognition models for extracting...
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PDF
cuic standard and advanced reporting.pdf
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
NewMind AI Weekly Chronicles - August'25-Week II
PDF
Encapsulation theory and applications.pdf
PDF
Network Security Unit 5.pdf for BCA BBA.
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
PDF
Electronic commerce courselecture one. Pdf
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
PDF
Encapsulation_ Review paper, used for researhc scholars
PPTX
MYSQL Presentation for SQL database connectivity
Machine learning based COVID-19 study performance prediction
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Diabetes mellitus diagnosis method based random forest with bat algorithm
ACSFv1EN-58255 AWS Academy Cloud Security Foundations.pptx
The AUB Centre for AI in Media Proposal.docx
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
A comparative analysis of optical character recognition models for extracting...
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
“AI and Expert System Decision Support & Business Intelligence Systems”
cuic standard and advanced reporting.pdf
Advanced methodologies resolving dimensionality complications for autism neur...
NewMind AI Weekly Chronicles - August'25-Week II
Encapsulation theory and applications.pdf
Network Security Unit 5.pdf for BCA BBA.
Dropbox Q2 2025 Financial Results & Investor Presentation
Electronic commerce courselecture one. Pdf
20250228 LYD VKU AI Blended-Learning.pptx
Encapsulation_ Review paper, used for researhc scholars
MYSQL Presentation for SQL database connectivity

Using ReactJS in AngularJS

  • 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. 500TECH - AngularJS Consultancy Boris DinkevichBoris Dinkevich CEO @ 500TECHCEO @ 500TECH Cats, good weather and Ruby
  • 3. 500TECH - AngularJS Consultancy What is ReactJS ?What is ReactJS ? Component framework Virtual DOM
  • 4. Adding React to AngularAdding React to Angular 500TECH - AngularJS Consultancy
  • 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. 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 - 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. 500TECH - AngularJS Consultancy ngReactngReact https://github.com/davidchang/ngReact
  • 9. 500TECH - AngularJS Consultancy Thank you, buh bye !Thank you, buh bye !
  • 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. 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. 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. 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. 500TECH - AngularJS Consultancy 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 - AngularJS Consultancy Directory structureDirectory structure App | |- directives |- services |- components | . . .
  • 17. 500TECH - AngularJS Consultancy But wait..But wait.. return React.createElement( "h2", null, "React Component: ", DataService.data() ); DataServices.data() ?
  • 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. 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. 500TECH - AngularJS Consultancy How does Angular renderHow does Angular render Digest cycleDigest cycle
  • 21. 500TECH - AngularJS Consultancy How does React renderHow does React render Data modeling - NOT Virtual DOMData modeling - NOT Virtual DOM
  • 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. 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. 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. 500TECH - AngularJS Consultancy
  • 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. 500TECH - AngularJS Consultancy So why React ?So why React ? Components life cycle Clear state management Break away from $digest Server side rendering ! Buzz
  • 28. 500TECH - AngularJS Consultancy So why React ?So why React ? Total results: {{ ? }} Available ? Isolated scope digest Isolated scope digest Isolated scope digest
  • 29. 500TECH - AngularJS Consultancy Server RenderingServer Rendering SEO Fast page load (bind later) Embed in page before Angular even runs ["hip","hip"]
  • 30. 500TECH - AngularJS Consultancy Life cycleLife cycle “ You can simulate everything in AngularJS, but then its not AngularJS.
  • 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. 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. 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. 500TECH - AngularJS Consultancy JSXJSX Interesting solution from Wix ( ) Work directly with final result Splitting to very large of mini components react-templates
  • 35. 500TECH - AngularJS Consultancy Data ModelingData Modeling
  • 36. 500TECH - AngularJS Consultancy Angular / MVVMAngular / MVVM Data flowData flow
  • 37. 500TECH - AngularJS Consultancy FluxFlux A Pattern - Not a libraryA Pattern - Not a library “ All arrows go one way
  • 38. 500TECH - AngularJS Consultancy Flux librariesFlux libraries Facebook Flux Fluxible by Yahoo Reflux Alt Flummox Marty McFly Lux Material Flux Delorean
  • 39. 500TECH - AngularJS Consultancy Flux in AngularFlux in Angular Regular services EventEmitter / $broadcast ReactJS Flux libraries
  • 40. 500TECH - AngularJS Consultancy Angular 2.0Angular 2.0
  • 41. 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 Course starts this Wedensday