Angular vs React Presentation - Lunch and learn presentation for Hubba - Talks about future and legacy of front-end application development - Compares angular to react - Live demo GitHub Presentation Link: https://github.com/xphong/angular-react-presentation Blog Post: http://www.phonghuynh.ca/angular-vs-react/ Demo Links: marvel-api: https://github.com/xphong/marvel-powerlevels-api marvel-angular2: https://github.com/xphong/marvel-angular2 marvel-react: https://github.com/xphong/marvel-react

1. ANGULAR 2 VS. REACT

2. PHONG HUYNH

3. AGENDA
1. Legacy/Future
2. Comparisons
3. Live Demo

4. Hard to reuse across
projects and teams
Coupled architecture
State issues
Difficult to debug
Eventually outdated
LEGACY FRONT-END

6. Re-use of components
(DRY, SRP)
Decoupled architecture
Faster Development
Uni-directional flow
New application
architectures
PRESENT FRONT-END

10. WHY ANGULAR AND REACT

11. ANGULAR
JavaScript Framework
TypeScript
Final release in 2016
Google
REACT
JavaScript library
JavaScript w/ JSX
Released in 2013
Facebook
OVERVIEW

13. Framework
Steeper learning curve
Opionated
Growing community
Library
Easy to learn, difficult
ecosystem
More autonomy
Active/strong community
MAIN DIFFERENCES

14. CODE DIFFERENCES
<ul>
<li *ngfor="let character of characters">
{{character.name}}
</li>
</ul>
<ul>
{ characters.map(character =>
<li key="{character.id}">{character.name}</li>
)}
</ul>

15. MORE CODE EXAMPLES
(click)="handleSearch()"
onClick={this.handleSearch.bind(this)}

16. LIVE DEMO

17. AND THE WINNER OF THE JAVASCRIPT
FRAMEWORK WARS IS... ANGULAR.

18. THE END

19. LINKS
marvel-api:
marvel-angular2:
marvel-react:
https://github.com/xphong/marvel-
powerlevels-api
https://github.com/xphong/marvel-angular2
https://github.com/xphong/marvel-
react