AngularJS vs ReactJS

Hello folks, I kept my promise and here I am with my second post on comparison between what it is working with AngularJS and ReactJS.

Disclaimer: All these points are a conglomeration of my thoughts and experience. They might vary from person to person. I’m just sharing my take on choosing one of them.

Framework vs Library

Here we are comparing a full fledged framework (Angular) with a mere library (React). This is the very first thing every frontend developer needs to understand. Angular comes up as a whole “opinionated package” I must say while the latter is just a plain JS library. Now, while it is easier to learn an opinionated environment from scratch, it’s most of the times a confusion to start with a library to make it behave like a framework. I was really bewildered by the introduction of this new library while I was flowing in the Angular waves and this was the very first difference I observed between the two. The very thought of collating several third party or maybe official libraries to make it at par with the already existing standard framework of Angular kept me loyal towards Ng than this new little library. So, working with framework and library has their own pros and cons. While framework gives a well defined path in an opinionated way to develop things, using libraries, you have to depend on few other libraries to achieve the same task.

Learning Curve

This is one of the major driving force making developers choose what they should go with. After working with both Angular 1&2 and React, definitely learning AngularJS is tougher than ReactJS. Reason being, ReactJS is truly JS while for learning Angular especially Angular 2, you have to learn TypeScript, RxJS which I’m a fan of. I too was very rigid of not choosing TS or RxJS in the beginning, but when I used them, I saw their pros and found that, it was worth the effort. Though choosing between es6 or TS is a common source of confusion for beginners of ng 2. I suggest you go as per the ng 2 community advice and adapt TypeScript. If you know any oops language, it’s a piece of cake for you to learn it. Now, talking about React, it took me just a day to learn it! Since, it was just JS, I adapted it pretty quickly. JSX though seemed a little odd in the beginning but when you get a hold of it, its nothing. On the other hand, it took me a month to learn Angular 2 with all the RxJS and TS stuff and learning the completely new facet of Angular 2 as you might know that Angular 1 and 2 are very much different in terms of semantics and architecture.

Speed

When Angular 1 was introduced years back, being the sole player in the market, it took a huge popularity among the devs and it was really something very fascinating thing introduced by Google. It completely revolutionised the way we used to write those ugly looking spaghetti JQuery web pages. The code and folder structure now was more organised and clean. It went for a lot of time but on the introduction of ReactJS and its fast performance, questions starting rising up on the performance of AngularJS. Yes, I’m talking about the notorious ng-repeat. When it comes to handling thousands of DOM rows, its wise to go for React than Angular 1 but hey what about Angular 2? They (Angular creators) claim Angular 2 to be 5x times faster than Angular 1 as now the UI thread is freed up from JS computation. Angular 2 makes use of web workers to free up the UI thread for rendering purpose. All the heavy JS tasks will happen in the backend. Having said that, I find the famous “Virtual DOM” of ReactJS taking all the lime light in this case. This is what makes React so popular. As we all know, DOM operations are pretty expensive in a web app and when it comes to handling thousands of records or elements, React uses its powers like the Virtual DOM and smart diff Algorithm. I don’t wanna get into the details but the end result is superb. The web apps using react are fast and less juddery.

Scaffolding & Packaging

I can recall those days of struggling with requirejs for modules and dependency management and the main struggle comes when you need to bundle up the things for your production environment. Angular 2 though provides a beautiful angular-cli as a scaffolding tool that generates the boilerplate for you to start with. I didn’t try much to peek under the hood of that scary scaffolding. With React, you have this wonderful tool called webpack, very lucid and easy to use with features like code chunking and production environment compression etc, its makes it very easy to ship apps easily.

Server Side Rendering

With Angular 1, there has always been a complain that it takes huge time for the users to see the initial view of the page load. While there are ways to mitigate that by applying app bootstrap loaders but it doesn’t solve the real problem. With Angular 2, we have this tool called Angular Universal that supports Server Side Rendering. What it means is that, when the app is being loaded, the server will render an initial view of the page and then when slowly the client apps loads its main bundle js file, Angular will kick in and handle the UI interactions. And the same is true for React using Redux, you can specify the initial state of the application that helps you render the initial view of the page.

Component based Approach

As web has evolved over time, there has been introduction of this nice component based architecture. Everything on your web page is a component that can further have sub components and so on. This makes it very clear for the developers to comprehend about their apps before building them. I find it very clean now as opposed to that mess before. Angular 1 doesn’t encourage Component based architecture while Angular 2 does and so does React.

Bytes Matters

Now, lets cut to the chase and discuss about yet another important aspect for deciding frontend framework for your apps, Sizing.

Angular 2: 766k (with RxJS)
Angular 1: 143k
React + Redux: 139k

Whoa, that’s a lot of numbers. At the very first glance, it makes Angular 2 a poor contender for our choice. But lemme tell you, these are the numbers I got from internet and the pragmatic numbers vary. Practically, my react redux app takes like 1.2 mb! Ouch! And thats because, its not just react+redux required to build a beautiful app, it takes libraries like Material-UI or Angular Material which takes a heavy toll on size. That said, I’m able to mitigate that concern through webpack chunking about which I’ll write a post about soon. But lets limit our discussion to creating apps without material-ui libraries for now, and you can see the difference. I’m not really sure about this but I understand in ng-conf 2016, they claimed the Angular 2 size to be about 150 kb. In the end, I’d like to say that don’t go by these numbers, there are a number of other libraries you need to rely for your particular requirements, so it may vary.

Building for Mobile

How cool it would be for you if what you have learnt to create web apps could be used to create Mobile Apps at the same time. Yes, both of these frameworks help you to create mobile apps but in different ways. For Angular 1 & 2, there’s Ionic 1 & 2 respectively. The 2 versions of both Angular and Ionic haven’t stabilised yet while React Native on the other has gained a lot of popularity and many of the popular apps in my knowledge have shifted to React Native. There’s also a buzz about NativeScript for Angular folks. The main difference between Ionic and React Native is that Ionic is used to build Hybrid web apps using AngularJS architecture and Cordova while React Native gives you a fully native experience.

P.S.

Both of these frameworks have performed well and has revolutionised the way we developed web apps before. Angular 1 has been there for quite a long time and since the launch of ReactJS, a lot of commotion has been there. Reason being, React seems to adapt to the new web standards way earlier than Angular. Angular 2 has come but is late, it’s still in RC(Release Candidate) at the time of writing this post. I have enjoyed working with ReactJS more over AngularJS. So, lets put an end to this discussion. As per me, concluding that ReactJS is more powerful contender for choosing frontend framework won’t be wrong. Though, definitely learning isn’t harmful in any way. You can always learn and come out with a mixture of good features from both the frameworks and have the best of both worlds.

Thank You! Comments most welcome.