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