React vs Angular vs View

Ideal for

Angular	React	Vue
Large scale and feature-rich WEB applications Native Apps Hybrid Apps	Large scale and feature rich WEB applications Native rendered Apps (about React Native)	Large scale and feature rich WEB applications Native Apps (Started supporting)

Props

Angular	React	Vue
abundant resources and support: Google offers a rich treasure trove of resources and rolls out new updates and improvements every 6 months. component-based architecture is a key concept; scalable for huge teams; big community; a lot of experienced developers.	easy to maintain isolated components in React and they are easy to reuse; convenient architecture – Flux – is highly competitive to MVC. One-way data flow provides maintainability and efficient arrangement of data and DOM elements; lightweight among the ones that are widely used today; component-based architecture can be implemented; ranked 1st most popular front-end javascript framework in State Of JS survey; backward compatibility – Transitioning or migrating from older to new versions is fairly easy in react using CodeMods; rich community; a lot of experienced developers.	Small size; Ease of understanding and development; Simple integration into existing apps; (IN PROGRESS) Flexibility. Can be used on different projects, with almost any library and tool (JSX, ES6, routing, bundlint, etc.) fast configuration - Vue has an inbuilt MVC model which makes configuration quick and easy compared to angular and react. integration capability: Vue can be used to build both SPAs and large-scale complex applications as well with easy integration with server-side frameworks like Laravel, Symfony Django etc.

Cons

Angular	React	Vue
difficult syntax: Angular has made a big leap in terms of syntax complexity after adopting TypeScript in angular2 and beyond. Yet it poses a steep learning curve for anyone making a transition from vanilla JS. steep learning curve: Angular has the steepest learning curve and suffers from a very high rate of abandonment. A large base of angular users has moved to Vue and react.	use JSX proprietary technology (add extra abstractions over HTML); Not a complete solution. (To have a complete solution React should be used with other staff like Routing, State management system, etc.) Not opinionated in terms of application structure. Code organization methodology should be defined at the beginning of the project.	Not so many production experience with this framework.

Learning curve

Angular	React	Vue
MEDIUM (application setup, common rules and data flows are organized) start knowledge: Typescript, HTML, CSS - Low must have knowledge for development: directives, modules, decorators, components, services, dependency injection, pipes, and templates. - Medium advanced topics such as change detection, zones, AoT compilation, and Rx.js. - High	LOW (developer needs to be familiar with HTML and Javascript only to start)	LOW (developer needs to be familiar with HTML and Javascript only to start)

Browser's support

Angular	React	Vue
Chrome-latest Firefox - latest Edge - 13, 14 IE - 9, 10, 11 Safari - 7, 8, 9, 10	IE 8 and above. (Starting with React v15, Authors are discontinuing React DOM's support for IE 8) - Authors won't actively remove IE 8–related code quite yet, but we will deprioritize new bugs that are reported. If you need to support IE 8 we recommend you stay on React v0.14. React DOM will continue to support IE 9and above for the foreseeable future.	ES5-compliant browsers: Chrome – latest, Firefox – latest, IE 9+.

Ecosystem

Angular	React	Vue
Strict architecture and structure, so the chance for error is low. TypeScript as a native language and great IDE support prevent errors in early stages, grace to strict typing, new ES6 syntax. Angular-CLI makes new project creation easy, automates the creation of angular2 artifacts, and has its own development server with live-reload. Can be ran under any other static server. But is still in beta in Nov 2016, is not as flexible for custom builds & development configurations.	No strict architecture or structure. Dependent of Babel for JSX transpilling. There are some automation tools like react-cli, but they are not popular, because react is pretty simple. Can be ran under any static server.	No strict architecture or structure, but has a lot of advices from the official docs. It parses templates from pure HTML but can be used with JSX (thought babel plugin). Has an official CLI, which can be used as a scaffolding tool for creating a boilerplate.

DOM

Angular	React	Vue
Regular DOM/Shadow DOM	Virtual DOM support. (Instead of relying on the DOM, React implements a virtual DOM from scratch, allowing it to calculate precisely what needs to be patched during the next screen refresh.This is orders of magnitude faster than fiddling with the DOM itself. React's virtual DOM is fast, but it requires storing elements in the virtual and real DOM increasing memory usage for the page. This can be a real problem for single-page web apps designed to be left running in the background.)	Virtual DOM.

Testing tools

Angular	React	Vue
Any testing framework. Karma is recommended as a test runner.	Jest Enzyme + Mocha + Chai	Buil-in QUnit, also, supports Jasmine, Mocha, Chai

Templating

Angular	React	Vue
Templates are very similar to templates in Angular 1, though there are many small syntactical changes that make it more clear what is happening. Also it's easier to read and write (compared to Angular 1.x) cause of the powerful event system. One more concept of Angular 2 about templates is to keep attributes clean and don't put any Angular expressions on them - everything is binded via properties only. Supports any templating engine. For developers, who prefer to use a templating engine instead of plain HTML, Angular supports any templating engine that compiles to HTML.	React provides a template engine JSX, which is easy to use (https://jsx.github.io/). JSX is a XML-like syntax extension to ECMAScript without any defined semantics. It may remind you of a template language, but it comes with the full power of JavaScript. Requires to learn a custom syntax. JSX is not a requirement for using React. Using React without JSX is especially convenient when you don't want to set up compilation in your build environment. Each JSX element is just syntactic sugar for calling “React.createElement(component, props, ...children)”. So, anything you can do with JSX can also be done with just plain JavaScript. But not everyone likes this approach, where presentation and logic are all in one place. And that's is also possible to use for example react-templates or other libraries. But that is not recommended since it adds a lot of unneeded complexity which JSX tries to avoid.	Vue provides a template engine based on HTML. All templates are valid HTML code. Double figure bracers are used for expressions. Attributes are used as directives, very similar with angular directives. As angular has inline filters. Also has "modifiers".

Architecture

Angular	React	Vue
The architecture of Angular 2 contains following modules: Module, Component, Template, Metadata, Data Binding, Service, Directive and Dependency Injection. Angular 2 runtime is divided into application and render layer. Elements of the application do not directly depend or access the elements of the render code, and vice versa. They can only communicate via a renderer transport. This leads to the following properties: - Application and render code can be supplied via separate files (compilation units) - Application code can run in a separate process from the process where the renderer code runs (e.g. web worker, server) Zone.js is used to create and control execution context across async tasks. It means that we haven't sync our view & model manually, angular knows about all possible async actions and monkeypatches them (timeouts, intervals, animations, XHR, etc.). Angular 2 forces the reactive paradigm, it's based on top of RxJs and a lot of interfaces return Observables. @angular/compiler module is responsible for components' JIT or AOT compilation. It generates the code of your component based on the provided metadata automatically.	React does not do everything for the developer, it's merely a tool for building the UI of a web app. It does not have support for routing or models, at least not out of the box. While some missing features can be added through libraries, to start using React and use it in production, you still would need to have experience, or at least a good grasp on what the best libraries to use would be. For making React more complete solution you can use one of an architecture patterns, which revolves around a strict unidirectional data flow. This means that all data in an application follows the same lifecycle pattern, making the logic of your app more predictable and easier to understand. It also encourages data normalization, so that you don't end up with multiple, independent copies of the same data that are unaware of one another.	Vue.js is a adaptable framework with a core which focuses on the view layer only, but with a simple way to integrate with other libraries in projects. Vue.js focuses on detecting changes through getters/setters in objects (Vue will wall through all data objects and its own properties at the building of component and converts them using Object.defineProperty). In these methods core manages dependencies and notifies about changes. Vue.js uses light-weight implementation of Vritual DOM. Vue component’s dependencies automatically detects during rendering. After state change, only needed components will be updated. Vuex is useful library, which can improve state management in an app. It’s Elm inspired implementation with good integration with Vue.js core.

Routing

Angular	React	Vue
Component Router. The application will have one router. When the browser's URL changes, the router looks for a corresponding Route from which it can determine the component to display. Declarative application states - State transition management - Lazy loading - Parallel named outlets Url structure example: /inbox/33(popup:compose) /inbox/33;open=true/messages/44	Not in the box. But it's possible to use the next one: https://github.com/rackt/react-router.	Not in the box. But has an official solution written by developers of core team - Vue-Route: https://github.com/vuejs/vue-router

Security

Angular	React	Vue
High. Includes CSRF, XSSI, XSS defense. +AoT compiles HTML templates and components into JavaScript files long before they are served to the client. With no templates to read and no risky client-side HTML or JavaScript evaluation, there are fewer opportunities for injection attacks.	Only build-in XSS protection. Other protect is the conscience of developers.	Most protection responsibilities is the conscience of developers.

Performance

Angular	React	V
DOM manipulation (faster) Startup time (slower) Memory allocation (slower) Bundle size (biggest)	DOM manipulation (fast) Startup time (fast) Memory allocation (fast) Bundle size (medium)	DOM manipulation (fast) Startup time (faster) Memory allocation (faster) Bundle size (lowest)