React vs Angular comparasion (Feb 2017)

angular_vs_react.md

React vs Angular

Some thoughts on react vs angular after building applications with both frameworks.

• Angular is a framwork vs React is a view library. Angular provides all you need out of the box for building good applications. (http/router/forms/material). But React has a better ecosystem of components (react-router/redux/react-forms/fetch). Angular is also modular, if you don't need some parts, you can provide your own implementation.

• Both has a cli tool (@angular/cli create-react-app), that automates the process of creating a new app, and wiring a webpack config. Both had config hided by default but on both config could be ejected. At this point perhaps React is a little more polished.

• Angular is one of the frameworks at google vs react is the framework at facebook, airbnb, netflix, twitter, cloudflare...

• Angular is still a baby (less than one year old) vs react is mature and stable.

• Both are alive and evolving.. (Angular 4, React fiber). And both are backed by big companies (Google, facebook).

• Angular is more OOP. (DI everywhere) vs React is more composable/functional (HOC... ).

• Angular has html templates (that are compiled to javascript). React has JSX (like html templates that are compiled to js). In terms of dev UX both are great. Angular has switched his default to AOT compilation for templates that puts it near react (in terms of performance and security). (On the end JIT is an eval, and this is slow an unsafe ).

• Angular is more abstracted. There are new abstractions on it that are difficult to reason on the begining: Zones, changedetector, modules, injectables, rxjs... (and the way it works is more magic, you don't need to take care of triggering set state for producing a rerender). That is also not good, because when things going wrong is difficult to reason about it. For example, is more easy to schedule (for later) DOM work with react than in angular. React has the notion of controlled/uncontrolled. Angular has still no position around it, neither docs.

• Both react and angular are abastracted from the DOM. But perhaps with react is a little more easy to work with the real DOM. On angular side, the webworker thing is still not clear and perhaps can change it.

• Angular enforces the use of Observable Streams (rxjs) for async operations. React it's not opinionated about it, you can use whatever you want. Angular can also work with promises and React can work, and should, with rxjs streams.

• If you plan to build a component library for your project. With angular you are locked to the framework. There's no easy way to get generated components with angular outside of the framework. React has many options for shipping react components as web elements.

• Angular is not easy to setup on CMS like enviroments (where your app data is comming from a html stream SSR). Neither has the concept of progressive enhacemend. Can be archived with some efforts and SSR, but it's not easy.

• If you plan to use a global container state. (redux). React has better support an is easy to reason about it. Angular can work with redux but also has his own implementation ngrx/store. Both can mix well with redux-observables. And both have support for redux-dev-tool.

• Both had SSR (Server Side Rendering), but on both you need to relay to some third party. On Angular is still not ready. (but soon or later @angular/cli will support some kind of it).

• React has better integrations with chrome dev tools. Angular has augury, but it's not too much useful.

• Angular is typescript, but react can work with typescript also.

• Angular needs more boilerplate for setting up things. (Component, template, declarations, module) in react is more easy (just and old javascript function that returns jsx).

• Both can take advantage of using rxjs. (For example netflix is using react with rxjs).

• React abstractions are simpler to reason ( an vdom tree ) that is diffed against the real DOM. Angular has a black box (templates got compiled to AOT... but there are views, context, templates, changedetector... )

• Right now on react world there is better support for mobile (Just switching react for preact/inferno). Angular is working hard with closure compiler to obtain really tree shaked builds. (Mobile is so hard), mobile browsers are not good parsing javascript, and every extra Kb you add to your bundle it's important