Let me start this off by telling you something: I will do my absolute best to stop my bias in favor or any of the two Javascript frameworks we’ll discuss today. Now, for those of you who may be a bit newer to the Javascript development scene, the beginning goes like this:
Javascript Framework ? What’s that you say ?
Unless you’ve developed under a rock, with no internet connection for the past 3 years, you know what Javascript is. It’s the most popular programming language in the world right now, according to githut and it’s been the coolest kid on the block for a while. Once people figured out that you could do almost anything with just Javascript (Frontend, Backend, Desktop apps, you name it), the language just boomed. And with that boom, came frameworks like Angular and React. A framework is a neat little package of code that’s designed to do a set of things. Most Javascript frameworks are MVC’s (Model View Controller pattern) and their job is to connect Backend, Frontend and user interaction with ease. That’s where Angular fits in. Now, React is a completely different kind of creature, and this brings us to our first point.
Massive Misunderstanding
Angular and React belong to completely different species. They have a language in common, which is Javascript, and they do similar things, but they’re by no means the same thing. That’s why, comparing them head to head is not only wrong, it would be unfair. To both of them. Angular is a fully fledged framework, which is to say, brings a lot of functionality out of the box. React on the other hand is a lightweight take on just one thing: UI. You could actually argue that Angular is a computer, complete with motherboard, processor and monitor, while React is just the processor. But it’s a damn fine one.
Where React JS is strong
It’s fast. React is blazing fast, and when we talk about performance, there’s just no competition. React takes care of just the V (view) part of the MVC pattern, but it does so with flying colors. It’s the most performant way of handling the DOM and displaying information, specially when using large data sets. It works by creating a virtual DOM in pure Javascript, so it’s able to differentiate between what has changed and what has not, at any given point in time. I’m sure you can see why that’s awesome.
React is based on building components, which forces you to write reusable code. This is great for all of us lazy developers who tend to just copy, paste and change stuff whenever we need features we’ve made before. It can even take care of user interaction in an easy, straightforward manner. But it’s not all glitter and unicorns, as with all things, React has its dark side.
The Struggles
React uses a specific form of Javascript called JSX, which is basically Javascript that you can also write HTML in. It takes a while to get used to it, and, to be honest, you may never get entirely used to it. Like with anything else, it’s taking you out of your comfort zone. While that’s usually a good thing, it can get a bit confusing when you have to go back to plain old Javascript for anything not React based. To be fair, you can also write React in plain Javascript, without JSX, but you would not be taking full advantage of all the hard work the folks over at Facebook have put into their toy.
As I said before, React is just part of the package. It doesn’t come bundled with all the functionalities of Angular or other Javascript Frameworks. This can be both a good thing and a bad thing. The good part is that you get what you came for, blazing fast DOM manipulation while using large data sets. The bad thing is that, if you want the other good stuff, you have to use third party libraries or plugins. This can get a bit tricky to handle when you’re in so deep you can’t even tell if that was React to begin with.
Finally, React forces you to write HTML in Javascript. I am a huge fan of not doing that, and have been so my whole developer life. I love templates, and separating logic from views, but React wants you to mix that up. And it works. It really does work, you’re leveraging the power of a true programming language (Javascript) directly into HTML. It’s just kind of weird, and takes some time to get used to, so it can drive people off.
That’s it for an overview of React, but what about Angular ?
What Angular JS does best
Angular is at it’s best with Single Page Apps (SPA for short). These are apps that live in a single HTML document, and leverage routing, templating, data injection and handling user interaction to work. Angular’s MVC pattern is perfect for these sort of apps. It’s really simple to inject data into the DOM, and it’s even easier to handle user interaction with a controller. Also, you have templates that can be written in plain old HTML with the use of directives, which is sort of the Angular way of giving orders to HTML from Javascript. It’s also great when it comes to having a lot of functionalities in just one package, and it’s easily extendable, as you can write your own directives and modules. There’s also a huge community behind this project, which is mantained by Google.
But, again, it’s not always sunny in Angular.
The blunt angles
As with most frameworks, Angular struggles with huge data sets. It does so because it’s designed to have two way data binding. That means it knows when data has changed in any part of the structure and reacts accordingly. The problem is, to find a single node where data has changed, it has to loop over the whole set. That’s not a problem with small data sets, but when the numbers get higher, performance takes a hit.
Another thing that some people find ugly about Angular, is the fact that it forces a lot of stuff you may not need. It bundles a lot of functionalities that you may never use, and that’s not really what you want.
Now, the good news is, everything can be changed.
The web is a beautiful place
Did you notice how Angular’s weakest link is exactly what React does so well ? If you did, then you’re already wondering if they can be used together. Fact is, they can. React makes no assumptions as to what framework you’re using, so in theory you can use React as the View component of your Angular MVC. I haven’t done this myself, but I’m sure you’ll find plenty of examples in the internet on how to build Angular on steroids using React. Remember, Google is your friend.
Necessary conclusion
React and Angular are entirely different beings, so making a comparison of them is impossible. You can compare things that both of them do, like injecting data to the DOM, or handling user interaction, and then see for yourself what you like best. But deciding which is better is just not possible. It’s all a matter of taste. Like I said before, React can do anything that Angular can do if you mix it up with third party tools. So, if you like the Frankenstein route and are not afraid of mixing your Javascript up with HTML (JSX), then you should try React. If you’re better off having a package that guarantees everything included will work as intended, you should stick to Angular. And if you’re really into experimenting, use them both ! They’re both free and open after all, so why not try them out for yourself ?
