Yes, I know, this topic has been debated many times, and will be, for so long. I'm not the first to try to explain differences between those well known entities, and neither the last. My purpose here is to bring my vision over it, and give comparison methodologies to new developers, such as students, interns or juniors.
Well, let's get into it!
Philosophies
There's no tool in this world which serve no purpose. Especially in tech industry! Currently, developers never used as many tools as before (and maybe a return of minimalism because of it) and choosing them hasn't been this difficult over the past years. Out of this frameworks ocean, there are two (three actually) of them which have demonstrated their efficiency : ReactJS, and Angular (and Vue.js but I won't talk about it as I don't know it well).
React
According to React landing page :
"React is a JavaScript library for building user interfaces."
"React makes it painless to create interactive UIs."
"Declarative views make your code more predictable and easier to debug."
"We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code."
It was published for the first time in 2013 by Facebook. Jordan Walke, his father, was influenced by XHP, a PHP library based on HTML component which was also developed by Facebook, released by 2010.
The major innovation was the implementation of JSX (JavaScript XML) as an extension to JavaScript.
JSX gives the ability to declare HTML tags as JavaScript variables, and use scripts inside the XML architecture.
As it probably seems a little blurry, I will give you an example :
class App extends React.Component {
render() {
const meal = 'pasta';
return (
<p>The best meal in the universe is {meal}. No doubt.</p>
);
}
}
Angular
According to Angular landing page :
"One framework. Mobile & desktop."
"Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target."
"Build features quickly with simple, declarative templates."
Angular (known today as Angular 2+) is a rewrite of AngularJS. from JavaScript to TypeScript, leaving behind jQuery, Angular is quite different from its 2009 predecessor, and will be published only in 2016. As the new version is pretty young, many companies haven't made the upgrade yet, and you can still find jobs using it.
So, Angular is a framework based on TypeScript, providing now a multitude of core APIs, as it's meant to be used (almost) alone for building client side application. It uses MVC pattern, as you write HTML template and a controller for each of your components, and declare data model with the help of RxJS.
Now that we know the different philosophies, it's time to code! Let's see how we build a minimal application with both frameworks.
Hello World!
If it's your first time with these two, be sure to have Node.js installed on your computer!
React
React needs only two dependencies, you can install them with this command :
npm install react react-dom --save
We'll start with a simple HTML file :
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>
next to it, create an index.js file, which contains :
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return (
<div>
Hello World!
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
What's happening here ? Once the script is injected, all the magic is in this call :
ReactDOM.render(<App/>, document.getElementById('root'));
We are rendering a React element into the DOM. The container 'root' is selected through document, the JavaScript object representing the DOM.
Is it that simple ?
Yes! Now we want to see our app, we need to bundle and serve it. You can use Parcel for this purpose :
npm install parcel-bundler --save-dev
Then :
parcel index.html
Open a browser and go to localhost:1234, you must see your app saying 'Hello World!'
Angular
Angular requires to use a CLI to build yourself a usable project, I recommend you to install it globally :
npm install -g @angular/cli
Then, we will initiate our project with :
ng new my-angular-app
Now you have a whole project ready to run with npm start.
In a way to render 'Hello World!', I invite you to just write this in src/app/app.component.html :
<div>Hello World!</div>
Open a browser, and go to localhost:4200.
So, as you can see in your index.html, there's a strange tag in your body : <app-root></app-root>. In fact, this tag refers to your component selector, as you can see in src/app/app.component.ts, as a parameter of Component decorator. The mechanic of component encapsulation is base on referring to a selector as a tag, in your templates.
Well, although it seems more complicated to use Angular, actually the CLI brings useful features, like component, module or directive generation. React may be only a library, create-react-app is a useful CLI package to quickly build a React project, you should give it a try if you're a beginner!
Architecture
React
According to React paradigm, there's no mandatory architecture! It gives you freedom of settling your folders the way you want, or adapted them to a specific use case. Besides, I advise you to separate wisely your different types of file, like services / components / containers / pages...
If you're a Yarn user, don't hesitate to use packages!
Angular
Previously, when we used the ng new command to create a workspace. As it's described in this guide, workspaces may contain multiple projects, but by default, the 'new' command generate also an application, which follows a specific structure.
But there's a hint. Angular CLI offers you the ability to generate components, and create for you a folder with 4 files inside :
- A TypeScript file, which is your component controller;
- An HTML file, which is your component template;
- A style file (CSS/SASS/SCSS, whether which one you have chosen);
- An other TypeScript file (ending in spec.ts) which is a testing file for your component.
This folder is created in your src/app directory, as the 'root' directory for Angular components. Whether it seems to be enjoyable using such commands, what happens in a real world project, with twenty, fifty, a hundred components, services, models... ?
Thankfully, you can provide a path to your component when you're naming it, by adding slashes. For example, ng g c components/todo/todo-list will create a folder todo-list in src/app/components/todo. as I told you, src/app will be the 'root', so it's up to you to arrange your directories the way you want!
What's the point of this section then ?
To show you that both frameworks let you organize your project the way you want, at the exception that Angular provide a quicker way to add and import a component to your codebase, but you have to tell him where you want to generate it, and it makes your app.module.ts bigger and bigger over time...
Bundle size
When your project has to be the tiniest, the choice between the technologies you will be using is really important, as they don't bundle their sources the same weight. Many studies confronted the most popular frameworks on their bundle size for a comparable 'real world' project. That being said, with the earliest version of Angular and React, numbers changed a bit, but you can be assured that rankings stayed quite in place.
According to this article from freecodecamp, there are thee result for frameworks bundle sizes, in kB :
Wait... Why React and Angular appear multiple time ?
Because in a real world project, you will probably not use Angular neither React alone, so it's important to mention the most used side kicks!
Like Robin for Batman ?
Absolutely!
Ok but what this chart tells us ?
Basically, React has the potential to be lighter than Angular, depending on the dependencies you choose.
Depending on the dependencies ?
Isn't that poetic ?
Not really.
I hate you.
Integrated APIs
By definition, each framework comes with many utilities that make them autonomous, or not. Let's see what tools React and Angular provide!
React
Besides make DOM manipulations easier, there's no other features React gives to us. That being said, after version 16, and the apparition of Hooks, the community raised new functionalities very useful and time saving. But is that really 'React' ? Well, as the project is open source, and considering it is only a library (so not reeeeeally a framework), we can consider at least those new packages are come from the 'React Universe' as Hooks is a specific to React. I'm tempted to say that this extended universe is the real React, but it's just my opinion!
Angular
HTTP requests, Forms, animations... Angular is full of services, sometimes easy to use, sometimes... Well, I'm not giving my view on this right now! But it is certain that Angular stands by itself, and can be used relatively quickly, with unique documentation.
What's important to know here is that if you choose React, you will have to find other libraries to build your features, but there are plenty wonderful packages out there so it won't be a problem if you like them. In the other, Angular is provided with almost every tools you need, but you have to get used with Angular documentation.
So you're saying Angular doc is awful ?
No, just saying you have to get used with it. No opinion here!
Community and job opportunities
Here again, I will need charts, and what can be better than StackOverflow to provide them ?
StackOverflow made a survey early 2019, and near 90 000 software developers answered! Find all the results here.
Let's focus first on developers feelings, by observing the 'Most Loved Web Frameworks' charts :
Near 20% space between React and the pair Angular/Angular.js, that's quite impressive. But, we have to put back in context. If Angular was coupled with Angular.js, it may explain those numbers. See, the first version of the framework is in decline for many years, and most of developers do not want to touch it again. Version 2 is very young, so there's still a big part of developers who work with Angular.js, because their project hasn't made the switch. I think Angular might be at least à 60-65% on this chart if it would be on its one, but I'm not convinced it can reach React.
And that, again, it's your opinion.
I'm aware of that, Mr. Im-always-against-you!
Focusing on the job offers, this article summed up in a chart gathering the most popular job board on the internet :
(Angular: Red / React: Blue / Vue.js: Green)
This one gives confidence in Angular developers! Yes there are jobs for you! As you can see, both offer quite the same amount of jobs around the globe, and are really far away from their third concurrent, Vue.js.
Conclusion
So who wins ?
Nobody wins, cause it's not a fight!
After this cheesy pre-conclusion, you probably want me to give my verdict. But first, I want you, student, young developer, to know that the best technologies in the world are the technologies you are the most comfortable with. You will never build your entire career on only one framework, neither one language. You must make your own opinion over new released technology by trying them! This is how you will slowly become a confirmed developer.
My point of view
I am a React lover. I admit that if I had to choose, I'll go React every time. Because React fits me very well, even more now, with the Hooks. The feelings I got by coding with this library have no equivalent. But, I'll not throw Angular to trash. In my opinion, Angular is a good choice for two use cases :
- You're a student, you never built a web application before, you barely know your basics on HTML CSS and JS, Angular is a perfect choice for you to enter this world.
- You're a big company, you have big and strong process, Angular will help you to maintain your structure.
The reason I don't particularly like Angular, is because of its documentation, and sometimes, the difficulty to implement what I found really basic with React (like forms). To be honest, React documentation is not the best, but it does the job.
That's it for me! I hope you enjoyed reading this article, it's my first time as a tech comparator. Don't hesitate to nicely comment which one you prefer between both frameworks, or give me the ones you want me to talk about!
Stay safe, drink water, and happy hacking!
Top comments (3)
Thanks for this informative post!
The power of React cannot be denied. How many users use it daily on Facebook?
Angular , my current focus, coupled with Typescript, becomes easy after you've been at it for a while. You are right though, the documentation they have is not inspiring.
I've tried Aurelia and didn't care for it (at the time it was having issues as Rob had left it to work with Microsoft and Angular at the time).
On my list Vue, Svelte.
Not on my list Elm, Stencil.
Bottom line, they all get the job done, some more efficiently than others. The power of Node is undeniable too, perhaps even to the extent of replacing .NET.
Yeah Svelte is cool, I tried it on personal projects, and I'll be glad to get jobs on it! I will write something about it.
What makes you unhappy with Stencil ? I kinda liked it when I tried, just events weren't working very well on dev environment...
Titouan;
I didn't give Stencil enough time. Perhaps I should reconsider.
I'd read your articles on Svelt for sure! Thanks for this post