An epic battle between Angular 2 and React

JavaScript popularity continues its rising and the number of web development frameworks and libraries based on it continue increasing. Today we will compare 2 of most used JS frameworks for building SPA applications – Angular 2 and React.

What is Angular 2?

Angular 2 is a framework that makes it easy to build applications with the web, supported by Google. It is is often referred as a MVC framework. Angular 2 combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular 2 empowers developers to build applications that live on the web, mobile, or the desktop.

How Angular 2 works. Let see angular architecture:

What is React?

React is an open-source JavaScript library for building user interfaces. Maintaining by Facebook it is rapidly increasing in popularity. React allows developers to create large web applications that use data which can change over time, without reloading the page. Its main goal is to be fast, simple and scalable. React processes only user interfaces in applications. This corresponds to View in the Model-View-Controller (MVC) template, and can be used in combination with other JavaScript libraries or frameworks in MVC, such as AngularJS.

As React is just a library it does not provide any architecture itself. Most used architectures are Flux and Redux. How React works:

Trends:

What do Google Trends tell us?

But what about the job trends?

We can see that Angular is a winner in the 2 categories.

Learning Curve:

Angular 2: Angular 2 itself is a huge library that requires more time to learn. It has a steep learning curve because of its funky syntax and large scope. Also you should take in mind the fact that ng2* developers usually have to invest some extra time to learn TypeScript when they get started with their first Angular project

ReactJs: Compared to Angular 2, React has a way smaller API surface and less custom syntax to learn. React is just a small library, based on Javascript and you can learn it in 1 week. But it has a serious paradox of choice problem and it will take more time to learn the best practices, as there are a lot of ways in which you can do the same thing or go wrong.

Community:

Community is the prime factor to consider while selecting a framework. A large community means more questions answered, more third-party modules, more YouTube tutorials.

Angular 2: Angular 1 is definitely the most popular with largest number of community members. Also, it has the highest number of StackOverflow questions.
While the AngularJS 1 community is very large, the Angular 2 community is just gaining ground.
Angular 2 is just over 25k stars on Github. There are ~15 000 repositories on Github that contain "Angular 2" or "ng2" and are written in TypeScript

React: There’s a quickly growing community, but it isn't big enough to provide all solutions. Also the community is young, so it’s possible you’ll have to do a lot of “reinventing of the wheel” in order to get the specific features you’re looking for.
React is over 69K stars on Github. There are 95, 500 repositories containing the word "react" in them, roughly over nine times more than what Angular 2 has. Still, one of the big reasons for the large number of repositories is that React comes with just a few built-in functionalities and relies on its community to provide it with the needed tooling to develop full-scale applications.

Performance:

So many people think that tech selections should be all about performance. In the performance battle between Angular 1 and React, React won easily due to Angular 1 dirty checking and digest cycles. But Angular 2 has cleaned up its act. It’s fast, thanks to its highly sophisticated change detection mechanisms.

Angular 2 doesn't do deep object comparison. If items are added/removed to/from an array, change detection won't detect it. The same for object properties as long as they are not directly bound from the view.

React is based on concept of diffing the DOM of the new state with the previous state, using Virtual DOM and only render the difference. Manipulating the DOM is slow. Manipulating the virtual DOM is much faster, because nothing gets drawn onscreen.

There’s not much of a difference between React and ng2, both are performance-wise.

Comparison:



Angular 2 React
Type Framework Library
Company Google Facebook
Language used TypeScript JSX
Size prod 140KB 145KiB
Size dev 1,4MB 726KiB
Github stars 25,021 69,179
Code Design JS into HTML JS centric
DOM Regular DOM Virtual DOM
Learning Curve Difficult Easy
Unclosing Tags No Yes
Binding Two-way One-way
MVC Yes View layer only
Tooling High (CLI) High
Packaging Medium Strong
Rendering Server-side Server-side
3rd party library compatibility High High
Cross-platform Ionic 2/ NativeScript React Native
Development Time Medium Low
Project Setup Easy Difficult
Churn* Reduced High
Flexibility Inflexible (prescriptive) Flexible

Stuff in Angular 2 You Won’t Find in React:

  • Layer V and C in MVC - In AngularJS the MVC pattern is implemented in JavaScript and HTML. The view is defined in HTML, while the model and controller are implemented in JavaScript.
  • TypeScript - The biggest selling point of TypeScript is tooling. It provides advanced autocompletion, navigation, and refactoring. Angular 2 with typescript generally has better IDE support. There is a bunch of hints and error messages flow in the Microsoft Visual Studio Code.
  • Dependency Injection - Angular has its own dependency injection framework, and you really can't build an Angular application without it. DI is a coding pattern in which a class receives its dependencies from external sources rather than creating them itself. For comparison React has not any concept of a DI. That is, instead of having a container that knows how to create objects and passing in dependencies, you pass them explicitly by passing props to the component when you instantiate it.
  • AOT compilation - Angular 2 + RxJS is pretty huge. Almost 800k minified. That’s about 4 times larger than React + Redux. But ng2 has the ability to do Ahead Of Time compiling (AOT) and tree-shaking. With a correctly configured production build, you can reduce the bundle size dramatically using only the features actually used in your app, which give the final bundle a much smaller footprint.

Stuff in React You Won’t Find in Angular 2:

  • JSX - Instead of templates, React has JSX, which compiles to JavaScript at compile time. In this way, errors can be cached at compile-time. It’s a Frankenstein hybrid of JavaScript APIs and markup. That means you have to learn its quirks, such as using `className` instead of `class`. For comparison Angular 2 relies on HTML templates, but you have to learn stuff like *ngIf and *ngFor. Also when you make a mistake, they fail at runtime. Fortunately with -aot compilation, we can catch template`s errors on Compile time.
React and Angular both are great technologies that give miscellaneous opportunities in development. Angular is really good at declarative solutions, but it lacks the freedom and simplicity of React.

Here is a useful list to help you make the decision:
  • For cooperation developers/larger projects/beginners, it’s a good idea to start with Angular 2 which simplify lots of specific problems and bring your architecture in order
  • if you are a start up, go with React
  • if you like simplicity and want something slimmer and less prescriptive, pick React
  • If you love the tech choices and you can live with the additional boilerplate overhead, pick Angular 2
  • if you prefer JavaScript, try out React
  • if you 💙 Typescript, use Angular 2
Finally there is no "silver bullet", you need to choose the right solution that will suit your challenges, goals, and long-term strategy.


*I’ll sometimes abbreviate Angular 2 “ng2” — a common practice in the community.
*When we use the word churn in the JavaScript community we are referring to the overwhelming rate at which JavaScript frameworks and libraries are created, adopted and then abandoned.

Comments

  1. Thanks for this reactjs and angularjs concepts. It is useful and i have bookmarked this page for my future reference. Continue share more like this.
    React js Training in Chennai | React js course | AngularJS Training in Chennai

    ReplyDelete
  2. Nice post.Thank you so much for sharing.I like the way of comparison between angular and react js.I have bookmarked your site for future references.Keep updating.
    Yiioverflow is a web development company.We have well expert team in Angular JS, Ionic, Yii Framework, Node JS, Laravel, PHP, MySQL, and WordPress.I you want a developer visit.. https://yiioverflow.com/

    ReplyDelete
  3. Thanks for sharing such a nice article.Both the frameworks React js and Angular js are good for building web applications in their own aspects.Here are the Top 5 reasons for choosing React js for your projects.

    ReplyDelete
  4. Great efforts put it to find the list of articles. thanks for taking the time to discuss this, I feel happy about it and I love learning more about this topic.
    Angular JS Training in Chennai | Angular JS Training in Velachery

    ReplyDelete
  5. It is very nice post for learning Angular and web development. Thanks for sharing this useful blog.
    Angular 4 Training in Chennai | AngularJS Training Chennai

    ReplyDelete
  6. Nice it seems to be good post... It will get readers engagement on the article since readers engagement plays an vital role in every ...
    Angularjs Developer

    ReplyDelete
  7. Thanks for all those examples, very appreciated! I think it would be very greate if we could have an example with the html5Mode(true) for the pushState feature and FoodMe would be a good app for that.
    angularjs training in chennai
    devops training in chennai

    ReplyDelete
  8. Great! You are doing nice work. I read this blog post with my interest. Really, this is wonderful.
    AngularJS Training in Chennai | AngularJS Training Institute in Chennai



    ReplyDelete

Post a Comment