| Comparison Index |
Angular |
React |
| History |
- TypeScript based JavaScript framework.
- Written in TypeScript.
- Developed and maintained by Google.
- Known as a “Superheroic JavaScript MVWFramework”.
- Complete rewrite of AngularJS.
- After almost 6 years of the release of AngularJS in 2010, its second version Angular 2 was released which was a complete rewrite.
- Angular 8 is the latest version of Angular.
- Google AdWords uses Angular. It is one of the important projects of Google
|
- Not a framework.
- JavaScript library developed and maintained by Facebook.
- Described as “a JavaScript library for building user interfaces.
- Released in 2013.
- Being used at Facebook.
|
| Architecture |
- Full MVC (Model, View, and Controller) framework.
- Facilitates strong facilities like how to structure your application and is thus considered a framework.
- There is no need to decide routing libraries.
|
- Simple JavaScript library (just the View).
- Gives much more freedom.
- Facilitates the choice of libraries.
|
| Prominent Features |
- Most prominent features:
- Provides templates, based on an extended version of HTML.
- Facilitates XSS protection.
- Facilitates Dependency injection.
- Facilitates Ajax requests by @angular/HTTP.
- Facilitates @angular/router for Routing.
- Facilitates Component CSS encapsulation.
- Facilitates Utilities for unit-testing components.
- Facilitates @angular/forms for building forms.
|
- Most prominent features:
- Uses JSX, an XML-like language built on top of JavaScript instead of classic templates.
- XSS protection.
- No dependency injection.
- Fetch for Ajax requests.
- Utilities for unit-testing components.
- Facilitates some popular libraries to add functionalities:
- React-router for routing.
- Redux or MobX for state management.
- Enzyme for additional testing utilities.
|
| Used DOM |
- Uses regular DOM.
- Regular DOM updates the entire tree structure of HTML tags.
- Regular DOM doesn’t make difference in a simple real app.
- Regular DOM affects the performance as well as the user’s experience, when dealing with large amount of data requests on the same page (and the HTML block is replaced for every page request).
|
- Uses virtual DOM.
- Virtual DOM makes it amazing fast.
- Virtual DOM was the most prominent feature of React when released.
- Virtual DOM updates only the specific part within a block of HTML codes.
- It looks for the differences between the previous and current HTML.
- It make changes to only that part which is required to be updated.
|
| Used Templates |
- Uses enhanced HTML templates with Angular directives i.e. “ng-if” or “ng-for” etc.
- Quite difficult because you have to learn its specific syntax.
|
- Uses UI templates and inline JavaScript logic together also called JSX.
- Uses component which contains both the markup AND logic in the same file.
- Uses an XML-like language which facilitates developers to write markup directly in their JavaScript code.
- JSX provides everything in one place.
- Code completion and compile-time checks work better.
|
| Data Binding |
- Facilitates two-way data binding.
- On changing the model state, the UI element changes.
- On changing the UI element, the corresponding model state changes as well.
|
- Facilitates one-way data binding.
- First the model state is updated, which renders the change in the UI element.
- On changing the UI element, the model state does not change.
|
| TypeScript vs JavaScript |
|
- Uses JavaScript.
- Easy to use.
|
| Scalability |
|
- More scalable than Angular.
|
| Speed |
- Fast as compared to old technologies.
|
|
| Size |
- Size is large.
- Takes longer load time and performance on mobile.
|
- Size is smaller than Angular.
- Little bit faster than Angular.
|
| Company Using |
- Google
- Nike
- Forbes
- Upwork
- General Motors
- HBO
- Sony
|
- Facebook
- Airbnb
- Uber
- Netflix
- Instagram
- WhatsApp
- Dropbox
|