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.
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.
In my opinion it was best summed up in an interview for JAXenter:
‘In Angular, you pay for safety by sacrificing flexibility.’
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.
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.
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.
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.
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.