A friendly comparison between Angular 2 and React

2. About me
● Iran Reyes Fleitas
● 27 years old
● Happy working for Jam3
Disclaimer
● More than 3 years working full with AngularJS
● Switched to React at the end of 2015

3. This is not a fight

4. Table of
Content
1. Framework vs Library
2. Typescript vs ES6
3. JSX vs HTML Templates
4. Web Components
5. Size
6. CSS Scoping
7. Performance
8. Native Support
9. Server Rendering
10. Routing
11. Testing
12. Animations
13. Packaging

5. Framework vs Library

6. Framework vs Library
Angular is FULL
● Routing
● Testing
● Structure
● Recommended Packaging
● Recommended Language
● Web API calls
● Templating
● Forms
● Style Scoping

7. Framework vs Library
React is “EMPTY”
● Addons
● Many react external libraries
● Easily integration with 3rd parties

8. WAIT

9. How to compare
Looks like Performance Features

10. How looks like
Angular: https://cli.angular.io/
React: https://github.com/facebookincubator/create-react-app

11. Performance
https://auth0.com/blog/2016/01/11/updated-and-improved-more-benchmarks-virtu
al-dom-vs-angular-12-vs-mithril-js-vs-the-rest/

12. Performance
Garbage collection

13. Performance
Javascript

14. Features - Typescript vs ES6
Your
● Bad documentation in ES6 for Angular 2
● Typescript fit better for big projects (mmm, I don’t like this)
● Too much code for things that are straightforward
● Another thing to learn and deal
● Less common errors
● Easy Intellisense
● Name replacements
● Better IDE Support

15. Features - Typescript vs ES6
Middle point

16. Features - JSX vs HTML Templates
Angular 2 remains HTML-centric rather than JavaScript-centric
JavaScript is far more powerful than HTML
● No need to learn more new syntax.
● Faster. Easy to debug.
● Intellisense
● Better errors (Angular has a own HTML parser)
● Compile-Time Checking
● Away from the current Web Components standards

17. Features - JSX vs HTML Templates

18. Features - Web Components
Custom Elements
HTML Imports
Templates
Shadow DOM

19. Features - Size
React: 130kb
● No gzipped
● No Redux
● No Addons
Angular 2: 560kb
● No gzipped
● No RxJS
● No Addons
What
this
mean?

20. Features - CSS Scoping
Not by default
=> Inline styling
=> CSS Modules
View Encapsulation
=> Deactivated
=> Compatibility protection
=> Shadow DOM
https://github.com/Wildhoney/ReactShadow
https://github.com/gajus/react-css-modules
https://github.com/css-modules/css-modulesify
https://angular.io/docs/ts/latest/guid
e/component-styles.html

21. Features - Native Support
ngReactNative

22. Features - Server Rendering
● Longer time in the web
● Many examples
● Real apps using it
● Not completely ready yet
● Not many examples
● Lack of good articles
SEO PWA

23. Features - Routing
● Doesn’t have one by default
● Most popular: React-router
● Good integration with flux and redux
● Comes with one by default
● Can be replaced
● Native Lazy loading support: AsyncRoute

24. Features - Routing

25. Features - Testing
● Comes with Karma(Test runner)
● Comes with Protractor(E2E tests)
● Dependency Injection
● “Doesn’t” have one by default: ReactTestUtils
● Use Jest to run your tests(Jasmine)
● Enzyme + Mocha
● Use Karma and Protractor

26. Features - Animations
● Animation Library 2.0
○ http://slides.yearofmoo.com/ng-conf-2016-slides/index.html
● “Doesn’t” have one by default:
○ ReactCSSTransitionGroup
○ ReactTransitionGroup
● React F1
● React Motion
So much better!!!!!

27. ● Full documented for SystemJS
● Well documented for Webpack
● Poor documented for Browserify
● Some moves to Rollup
Features - Packaging
● Browserify
● WebPack
● SystemJS
● UMD

28. Hard conclusions
Choose whatever ;-)

29. Thanks