react vs angular
TRANSCRIPT
![Page 1: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/1.jpg)
THE FRONT-END JUNGLE
Adam Klein
React vs. Angular
![Page 2: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/2.jpg)
ONCE UPON A TIME
![Page 3: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/3.jpg)
<1995
![Page 4: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/4.jpg)
1997-2010
![Page 5: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/5.jpg)
2010 - Adam Learns Web
![Page 6: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/6.jpg)
2010-2015
![Page 7: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/7.jpg)
Google trends - world wide2011-2015
![Page 8: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/8.jpg)
Google trends - Israel2011-2015
![Page 9: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/9.jpg)
SPASingle Page Application
![Page 10: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/10.jpg)
I’m going to be an Angular Expert!!
![Page 11: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/11.jpg)
AngularJSGoogle
Initial release - 2010
Currently version 1.5
![Page 12: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/12.jpg)
HTML based<body> <h1>Hi {{ name }}</h1> <my-grid data="data"></my-grid> </body>
![Page 13: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/13.jpg)
2 way data binding
![Page 14: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/14.jpg)
Digest Cycle
[DELETE THIS]: Use this slide for strong messages. It’s not a chapter name
![Page 15: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/15.jpg)
AngularJSWrite normal HTML
2 way data binding
Much built-in: forms, http, Dependency injection
Custom tags & attributes for reusability
Magical change detection
Harder component composition
Extensive adoption in Israel
![Page 16: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/16.jpg)
ReactJSFacebook
2013
Current version v15
![Page 17: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/17.jpg)
JSX & virtual DOM<div> <h1>Hi { this.name }</h1> <MyGrid data={this.data}></MyGrid> </div>
![Page 18: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/18.jpg)
Component based
![Page 19: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/19.jpg)
Explicit change detection
![Page 20: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/20.jpg)
ReactJScomponent architecture
component lifecycle
just the view, nothing else built in
one way data binding
explicit change detection, customisable
decoupled from DOM (mobile, server)
no magic
early adoption in Israel
![Page 21: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/21.jpg)
Bothgreat eco-system & community
much open source
no state management (flux)
![Page 22: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/22.jpg)
2016
![Page 23: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/23.jpg)
Angular 2
https://youtu.be/gNmWybAyBHI?t=607https://youtu.be/gNmWybAyBHI?t=548
https://youtu.be/gNmWybAyBHI?t=724
Late 2014 announcements
https://youtu.be/gNmWybAyBHI?t=984
![Page 24: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/24.jpg)
Angular 2 here we go!!
2.0
![Page 25: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/25.jpg)
Angular 228 google developers
September 2014 announcement
May 2016 RC
Angular 1 is continuing
Huge cooperations and idea sharing (React, Ember, Microsoft)
Development platform - i18n, http, DI, forms, router, lazy loading
Component based
Improved change detection
Using Web Component standard
Typescript
Decoupled from DOM (mobile NativeScript, server, testing, web workers)
Removed old browser support
![Page 26: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/26.jpg)
Angular 2Hardly any open source
Hardly any Stack Overflow
API changes
Not in production
![Page 27: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/27.jpg)
Existing Angular 1.5 - Migration pathUse a component based architecture
Use angular 1.5 components
Use TypeScript
Use the new router (when it works well)
Wait for Angular2 to be production & stable
![Page 28: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/28.jpg)
New appsAngular React
All in one View only
Typescript ES6
Object Oriented Functional Programming
HTML Templates JSX
![Page 29: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/29.jpg)
Conferencesreact-next.com - September
angular conference - November
Courses react.courses.500tech.com
angular2.courses.500tech.com
![Page 30: React vs angular](https://reader031.vdocument.in/reader031/viewer/2022021500/58729e721a28ab07208b534f/html5/thumbnails/30.jpg)
Learn more:
http://blog.500tech.comhttp://meetup.com/angularjs-il
http://meetup.com/reactjs-israel
0527475633