Download - Angular 2 vs React
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
This is not a fight
Table of Content
1. Framework vs Library2. Typescript vs ES63. JSX vs HTML Templates4. Web Components5. Size6. CSS Scoping7. Performance8. Native Support9. Server Rendering
10. Routing11. Testing12. Animations13. Packaging
Framework vs Library
Framework vs LibraryAngular is FULL
● Routing
● Testing
● Structure
● Recommended Packaging
● Recommended Language
● Web API calls
● Templating
● Forms
● Style Scoping
Framework vs Library
React is “EMPTY”● Addons
● Many react external libraries
● Easily integration with 3rd parties
WAIT
How to compare
Looks like Performance Features
How looks like
Angular: https://cli.angular.io/
React: https://github.com/facebookincubator/create-react-app
Performance
https://auth0.com/blog/2016/01/11/updated-and-improved-more-benchmarks-virtual-dom-vs-angular-12-vs-mithril-js-vs-the-rest/
Performance
Garbage collection
Performance
Javascript
Features - Typescript vs ES6
Your choice!!
● 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
Features - Typescript vs ES6
Middle point
Features - JSX vs HTML TemplatesAngular 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
Features - JSX vs HTML Templates
Features - Web Components
Custom Elements
HTML Imports
Templates
Shadow DOM
Features - Size
React: 130kb● No gzipped
● No Redux
● No Addons
Angular 2: 560kb● No gzipped
● No RxJS
● No Addons
What this mean?
Features - CSS Scoping
Not by default
=> Inline styling
=> CSS Modules
View Encapsulation
=> Deactivated
=> Compatibility protection
=> Shadow DOM
https://github.com/Wildhoney/ReactShadowhttps://github.com/gajus/react-css-moduleshttps://github.com/css-modules/css-modulesify
https://angular.io/docs/ts/latest/guide/component-styles.html
Features - Native Support
ngReactNative
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
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
Features - Routing
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
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!!!!!
● Full documented for SystemJS● Well documented for Webpack● Poor documented for Browserify● Some moves to Rollup
Features - Packaging
● Browserify● WebPack● SystemJS● UMD
Hard conclusions
Choose whatever ;-)
Thanks