“War. War never changes.” ©Bethesda

React is better than Angular” and other nonsense 🌈

A tale about a developer tired of useless and misleading articles

I’ll put it down as simple as possible: I’m tired, tired and disappointed. I’m sick of reading the same articles every day. I’m sick of this “the winner is” syndrome.
We don’t need another winner, and we don’t need developers to tell us which tool will be better for our job.

I really understand clickbaiting, I swear I do. And I don’t mind articles titled “This VS That”, as they’re meant to be read by curious AND unexperienced developers which will just Google that sentence.
But this is exactly the problem: unexperienced developers will tend to believe in whatever the community says. For that reason, if you’re serious about your job and your importance as an influencer, you must not declare any winner, because there is none! This is not a war, this is just one of the most fruitful times to build web applications, with lots of great tools out there.

So, let’s try to be honest and say what developers need to hear, through an imaginary interview.

I’m thinking about learning a new JS framework, which one should I choose?

With this lack of preconditions it’s quite impossible to say, but I understand your will to learn something new and it’s admirable to ask for an advice, since there are tons of new tools out there and even understanding them could be a difficult task. For now, just pick one of the big ones and try it out for the next few days. How much do you like it? Do you think it will help you solve your particular problems?

I just tried to use Angular for a week but I feel there’s so much to learn! I’m a bit scared of the amount of time I’ll need in order to master it… Instead, React looks easier, doesn’t it?

Yes and no. Angular is a framework, and gives you a lot of features out-of-the-box, such as a Routing system, Forms handling, HTTP requests, Animations, plus a strong module system with easy lazy-loading, a Dependency Injection framework, i18n support, and so on. In React’s world, you’ll have to choose a fair amount of 3rd-party libraries in order to have all this features, and you’ll be responsible for mantaining them, definitely not an easy task. Also, Angular enforces you to use both TypeScript and RxJS, which are awesome by the way, but you’ll need to understand them as they’re part of the ecosystem.

So, understanding Angular isn’t definitely an easy task, there’s a lot to learn, but in the end you’ll have a strong structure for your app: this is where Angular really shines, complex enterprise applications. It must be absolutely clear in your mind that you don’t need Angular for a simple website.

On the other hand, React gives you a lot of flexibility, but is it a good thing? That’s your choice! You’ll be responsible for creating your specific ecosystem driven by React. For me, the flexibility offered by React is phenomenal, but let’s go ahead.

What is the main difference between Angular and React in writing components?

Angular has its own template engine which is nice, and keeps HTML separated from JavaScript. This could be particularly appreciated by some devs who don’t like mixing them together, and THIS could be one of the selling points of Angular over React, but it’s a matter of preferences, it could be vice versa.

On the other side, React uses JSX which is basically a declarative way to put HTML into JavaScript: for me, that’s awesome. JSX is what keeps React’s components easy to understand and easy to work with. JSX is all about expression AND flexibility. Did someone say “dynamic component instantiation”? That’s where React is so much powerful over Angular, where dynamic instantiation is definitely more verbous (may it change in the future, it’d be awesome).

What is Redux, and do I have to learn it in order to use React?

Redux is the most famous library for handling application state in JavaScript projects. It surely helps you keeping your React application well structured and organized (if used properly), but I feel someone is missing the point here: you should be inspired by this tools, don’t be afraid of them! And also, don’t think you can’t live without them. Redux is not essential for a good React application. On the other side, if you fall in love with the Redux way of doing things, there’s no reason for not using it in Angular, too! A well structured application is well structured with or without Redux, and this is true for both Angular and React.

Which framework is the most mature?

I often see github stars comparisons, and they give me nightmares. First, they’re both too fragmented to make comparisons: React’s ecosystem is a lot of libraries and Angular is quite new out there, as it changed completely from the old AngularJS. Looking at popularity doesn’t tells us anything about the project itself, and you won’t decide which framework will solve your problems by looking at a number. However, apart from popularity, React is definitely the most mature nowadays. It’s been around for a while and Facebook is really doing a good job with it. There are far more UI Kits available out there, Server Side Rendering just works (Angular Universal is still really unstable, unfortunately) and React Native is probably the best tool for cross-platform mobile applications out there (sorry, NativeScript!)

On the other side, the Angular Team is really doing a great job with it, but it’ll take time to reach React’s level of maturity. I think it’s just a matter of time.

Angular 2, 4, 5… what’s happening here? This numbers scare me!

Did you know that React is actually at its 16th version? 😄 Don’t be scared by those numbers. Angular changes version every 6 months, ensuring programmatic updates. I admit that Angular’s breaking changes have been a bit difficult to follow up, but in the end, it’s definitely a good sign that indicates a great work behind it. An evolving project is WAY better than a dying project. Angular is still in its early days and breaking changes can be understood (I never had big problems since Angular 4, though).

What is Virtual DOM? Does it make React more performant than Angular?

Yes and no. The Virtual DOM is an abstraction, React under the hood builds a logic tree which represents the actual DOM structure. In other words, you have a sort of “copy” of your DOM in memory, and… well, it consumes memory. But Virtual DOM is all about doing the right things to update your application’s structure: React will figure out what to change after every event, it will modify the Virtual DOM and then it’ll do the fastest operations to adjust the real DOM accordingly. So Virtual DOM is both slower and faster at the same time, depending on your application structure. In general, React is really fast, but don’t expect to see miracles if your code is messed up! 😜

Angular doesn’t have Virtual DOM, it uses its own mechanism for Change Detection combined with Zones, which helps Angular going through the Change Detection tree from its root to its leaves.

Don’t be afraid of performance: they’re both fast enough!

So, in the end, what would you suggest? What should be my criteria?

What’s important is to choose the right tool for the job. This sums up to:

  • Your or your team’s preferences
  • Do you prefer an all-in-one framework solution over building your own structure with more libraries?
  • Does your app depend heavily on dynamic component instantiation?
  • Do you need a mobile version for your application? In that case, you could reuse a lot of code with React and React Native
  • Are you forced to have SSR working? As of now, React works better (see NextJS)
  • Are you working with local clients? Which one is the most used (or the most paid) in your country?

But the most important one is the first, your preferences. These will tell you which framework is right for you. And if you realize to love them both… Good for you! 😉

PS. I didn’t mention Vue simply because, honestly, I didn’t fall in love with it. It’s about personal preferences, right? However, it’s another great tool, you should definitely check it out!