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
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
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.
34. 500TECH - AngularJS Consultancy
JSXJSX
Interesting solution from Wix ( )
Work directly with final result
Splitting to very large of mini components
react-templates
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