React.js vs Angular 4 overview

WRITTEN BY GARETH DUNNE @JSDIARIES

As I started this blog I had a bit of tunnel vision for wanting to focus on Angular and all its related technologies almost exclusively.

At that point my interest turned to Ionic as building hybrid applications using web technologies was extremely appealing to me.

And while I do think that specialisation is extremely important I also believe that loyalty to one technology can really limit opportunity and inhibit you from looking at the bigger picture.

I had averted my thoughts towards React.js for quite awhile, I really didn’t ever give it much consideration at all. The blog has died down in recent times as I’ve been working quite a lot with it and wanted to give a brief comparison to Angular.

Initially I’m going to give a non technical comparison but may follow up this post with a more in depth analysis.

If you are immediately looking for a learning resource for the React + Redux pattern have a look here.

I would also recommend having a look at Toptal covering the react ecosystem here as well.

Otherwise, this is a great starting series by thenewboston.

And in addition to this, a very clear and concise demonstration of React with Firebase was created by Wes Doyle.

Angular and React.js are compared constantly on many a forum, blog post or subreddit. But this comparison is only partly fair because while, yes, they are both hugely popular frontend tools, React.js is a library and Angular 4 is fully packaged framework.

React was originally created by Facebook in 2011 and was subsequently introduced into Facebook feed soon after. Come 2012, and it was implemented into Instagram too. It has come leaps and bounds since with a whole host of collaborations with other technologies etc.

Generally speaking React.js is quite lightweight due to it only being a library and like the latest in frontend frameworks, its aim is to provide an infrastructure that creates web applications with high speed reactive data and scaleability.

I personally think that React should be compared to Angular only when used in combination with Redux, a library that provides data state management for an application. This is when the benefits of React became more obvious to me. However, we will just go over a few aspects that both can be easily compared.

So this is where React and Angular differ in a more obvious way. Angular ships with a CLI (Command Line Interface) packaged with it. Again, this is due to Angular being a full framework rather than library like React.

Having said that Angular is very much a framework that relies heavily on CLI scaffolding for creating its project structure and directories. This also includes generating Ionic components too. You can really generate a wide range of file types for your project. This includes services, components (with or without scss enabled),  interfaces(for TypeScript), directives, pipes etc.

For more information check it out the CLI Docs here.

On the other hand,  React.js is less impressive in terms of its CLI capabilities out of the box and to be honest there isn’t any external package CLI that is as comprehensive as the Angular one.

However, a tool called create-react-app  exists which is an incredibly impressive piece of utility to have when starting your React.js app.

Its has every asset that you would require to build out a modern react project including ES6, Flow syntax and a great linter for catching common compile errors.

It really is an all encompassing package and reduces the downtime of starting a new application without the worry of all the setting up of many extras in this current era proclaimed as JavaScript Fatigue.

I originally started using TypeScript with Angular as it was built into the framework. However using TypeScript with React and Redux is just as incredibly enjoyable and effective.

In combination with Typescript, if you also include an ES linter in your coding environment you are really set up to write effective and clean code, as your code will not compile if something is unused or anything you write could possibly be null.

This is available for both React and Angular so theres not much advantage for either one here except that Angular comes packaged with TypeScript, while it may not be as obvious how to use it with React.js

However there is a fairly comprehensive blog post about it here that I encourage you to check out.

To create full React/Redux/TypeScript ecosystem can be quite challenging to get right. However, its a very well regarded to use this combination as it provides the developer with very well written code as well as incredibly power state management processes for managing your data in relation to your UI components.

This TypeScript-React-Starter template repo takes a lot of sting out of setting this powerful combination up.

The potential for hybrid app development with both of these technologies could potentially be a tipping point for developers. Both offer very different approaches for this.

On the Angular side of things we have Ionic for producing web view based applications that can be published to both app stores. I have covered Ionic extensively on the blog before so please start here if your looking for more information.

In a nutshell, Ionic provides us with a very nice infrastructure to create apps that run in the web view on a mobile application. They tend to be not as fast as its native app technology counterparts

Meanwhile, React Native has gained a lot of attention recently due to its fast and powerful production of natively functioning applications using JavaScript and React.js.

From what I have read, there is a lot of positivity for React Native going forward and its one to definitely watch out for over the next year.

I would also recommend that you check out how Airbnb is using React as this may further convince you of its potential.

In fairness, Angular also has native mobile app creation library called NativeScript . And while I don’t have personal experience with this the general consensus seems to be that is not as popular but just as capable.

A blog post by Itay Herskovits goes into more detail about the comparison. And to be honest both technologies are just capable as another for providing hybrid and native mobile development.

There isn’t too much too compare here. Both of these technologies have informative documentation but in all honesty I would say the Angular docs are far more comprehensive and clear than the React ones.

This is just my opinion but the use cases and examples from the Angular docs stood out more to me.

So what can you take from this overview exactly? Well I really don’t think there is a clear winner from these comparisons alone. And really there won’t ever be a clear winner to most people, both these front end technologies are modern, fast, full of functionality and are just as capable as each other.

So your personal prefernce will go a long way in choosing what you find the most comfortable and suitable for your frontend aims.

But there is no doubt that Angular and React (and Vue!) will be here for years to come as they are changing the way user interfaces interact with data and styling.

As I get to gripes with a React, Redux and Typescript stack I find myself switching over somewhat. However, we’ll see how this goes but I will be providing some more technical posts of this stack in the future.