React vs Angular: Brief comparison as of the beginning of 2018

Lately a lot has been written about React and Angular, yet with the beginning of 2018 and new versions released of both Angular and React it is worth to take a look at them one more time.

If you have any experience in front-end development you should know that they can’t really be compared as Angular is fully-featured MV* framework and React on it’s own is UI library. Nowadays what people mean by Angular or React development is the way of building front-end that is connected with picking one or the other.

Before I will move to technology and simple performance comparison let’s have a quick look at the popularity.

Looking at downloads in past 6 months from npm we can clearly see that react package is about 2.5-3 times more popular comparing to @angular/core package which is downloaded for every Angular app.

It looks even worse for Angular if we look at BuiltWith stats for Top 10k pages. According to BuiltWith 2.9% of Top 10k pages were built using React while only 0.2% of them used Angular 2+.

So does it mean that we should forget Angular and pick React if it is so popular? Not exactly.

Framework vs library

As mentioned before Angular is fully-equiped framework which people often describes as complete solution with ‘batteries included’. It means that you do not have to analyze piles of libraries, configure and connect them, you simply start working.

React in past was branded as ‚V’ in MVC. Facebook decided to change their marketing, so for now if you check React’s page it is described as ‘A JavaScript library for building user interfaces’. What it really means is that you have to search and add other libraries to come near features that Angular provides right from the box. This is not exactly the worst thing as it gives to developers flexibility in adding tools of theirs choice. Therefore React Developers end up with a framework that is as featured as Angular. Yet this flexibility also poses easily disregarded danger of ending up with non-functional library after React updates and when it comes to Angular you do not have to worry about such case as Angular team is taking care of everything.

In my opinion it was best summed up in an interview for JAXenter:

‘In Angular, you pay for safety by sacrificing flexibility.’

Interesting fact:

If you like React way of creating UI and you lack some Angular features you can combine then and use React with Angular. React will handle UI and templating while Angular will be responsible for state management.

How do we write our code then? – templating and languages used

Ecosystems discussed here are both component based with a basic principal of being reusable but with a different approach of creating then and their structure.

Once I said that if it was possible to write HTML in JavaScript I would do it. Little did I know until I opened React documentation.

It is advised to write React applications using modern JavaScript version like ES6 for your logic and for templates JSX – which is preprocessor for HTML-like syntax which will be compiled in JavaScript later. Personally, I also like this approach. Of course, you can use older ES5 without JSX but this creates unnecessary difficulties and makes code way less readable. We could call React a JS-centric library as the whole business logic and templates are written in JavaScript files. The difficulty of using JSX is to learn some of it’s quirky parts like for example using className instead of class in elements because ‚class’ is protected name in JavaScript.

On the other hand, Angular uses own syntax and regular HTML to create HTML templates, mostly stored in separate files. Angular uses TypeScript which is a superset of JavaScript among all of it’s features the biggest one is introduction of static types. TypeScript also provides first-class support for JSX so if you consider adding react to your project and you like what TypeScript offers you can easily include it in your React project.

Big difference is one-way vs two-way data binding. React’s one-way binding updates model first then renders updated UI while Angular’s two-way binding changes the model state when the UI element is updated.

When it comes to server-side rendering it is different matter. React is the one that support is right form the box and provides rendering API in their react-do library. To implement SSR whit angular we have to use Angular Universal package that doesn’t come with default Angular bundle. It is a little bit more complex(or was at the time or writing this) than React’s way to render on a server-side. It is important feature and we can see that one and the other teams are putting a lot of effort to improve rendering. Big changes in new versions affect rendering. Faster rendering or even feeling that the page rendered faster force up performance and perceived performance which is often more important than efficiency itself.

Both of them requires robust configuration and some building/bundling libraries before we can even start considering development (unless you are planning to use React with ES5 and no JSX. Then you can just put script source to your html and you are good to go but as I wrote I wouldn’t recommend this for any web application). Lucky for us Facebook and Google provide CLI tools that helps us with creation and configuration of our apps. This is huge time saver. Those of you that are afraid of not being able to add your custom config, do not worry. Both of configs created by CLI can be ejected and customized.

Learning curve

At this point it seems like Angular is way too complicated and requires a lot more time to learn than React and this is probably the truth when we compare framework to library. I assume that you already have some understanding on JavaScript and want to learn Angular. First you will have to look at some changes that comes with TypeScript and get use to them. Only then you start to learn Angular for real. And it is also good to know a bit of RxJS that Angular heavily uses. Seems like a lot of work and time. Maybe it is just better to pick up React, open it’s documentation and basically after an hour you can rewrite their tik-tak-toe example? Yes and no. We always have to remember that React is just a UI library and learning it on it’s own does not provides us with the same abilities as Angular does. When we get familiar with react we might need to add some state management library like Redux or Mobx. Also, routing would be nice and for most of time we would end up using react-router package. Then we end up with the same effort required to learn either Angular or React with supporting libraries.

Taking this into consideration I have to agree that in short term it might be easier to pick up and start with react but when we add everything that we have to add to it and everything that might break in the process we have to consider if maybe it’s not easier just to spend some more time with Angular at the beginning.

Latest changes

In the last months of 2017 we were given new major versions of React and Angular. This means that some of changes might be breaking for example making incompatible API changes.

For React it was a major change of underlying core architecture. Finally long awaited React Fiber was ready and shipped with v16. It is supposed to allow for incremental rendering. At this point Facebook declares that one of the most exciting area they are working on is async rendering…whatever this means. Other important changes in React are new render types so we finally can return something else from render method instead of one element. Some thing like array of strings or element or just a string. I think that this is step in a good direction as it removes some of unnecessary complexity. Other changes in React involved better SSR, error handling, reduction of packages size and introduced Portals…better late than never. More info about v16 changes you can find here.

As for Angular it is fairly new framework, version 2+ was released on September 2016 and from this time Angular team is realizing their goals. Angular 5.0.0 focuses on further performance improvement. CLI project has now  by default applied build optimizer. TypeScript version has been updated what allowed to change compiler config and made incremental rebuilds way faster. With every version Angular slowly turns from JIT to AOT compilation as a default option. It is already default for production build but with current changes we are slowly getting closer to introduce this as a default for development. Another very important update relates to Angular Universal State Transfer API and DOM Support which allows us to more easily share application state between the server side and client side versions of your application. Other improvements like Zone speed improvements, changes that allows to lower number of polyfills, replaced http client intends to improve performance even more. We cant forget also about other changes one of the most important that can’t be skipped is adding new lifecycle router events. It’s not really that big of a deal but looking at docs it creates chances to either simplify code or create better and more complex UI responses to router. For more information about Angular changes you can visit their blog post with release notes.

Performance

For sure performance and size will be a key factor for large number of people. Discussing size matter React even with Redux is smaller than Angular. However, this was easy to predict. When we look into performance tested with js-framework-benchmark the results are very interesting and we could say that they are almost tied.

With standalone React as fastest(no surprise) followed by Angular, even surpassing React in some cases. Also it wasn’t surprise that react based systems loaded faster but Angular holds it’s ground. Looking at it’s progress and improvement, I could say that is catching up with React’s performance. If you ask me I think that in a few iterations Angular will equal it’s performance with standalone React and then Facebook’s library will start loosing on popularity.

Summary

Both React and Angular are great ecosystems. Right now in JavaScript environment there is a lot of hype on React and it is forced like the only right way to write web in 2018. I can’t agree with that as my personal pick is Angular with it’s pristine and defined ecosystem thus I can also appreciate React’s flexibility. If you are developer just give a try to both of them and see what better suits you. Because at this point when the performance is almost tide up, the choice depends mostly in what you feel better. If I was about to decide I would start some small projects over few weekend, check what really feels good for me and went with it. For some UI complicated and dynamic projects I would go with React and for some heavier logic and computation on front-end I would definitely pick Angular. But after all as it was said in already mentioned JAXenter interview and I will leave you with this: ‚Angular and React are solving the same problems with different approaches.’

1 thought on “React vs Angular: Brief comparison as of the beginning of 2018

Leave a Reply

Your email address will not be published. Required fields are marked *