Angular or React.js: Which should you learn? Which should you use for a project? And more importantly, what are the structural and fundamental
differences between these two solutions? I’ve worked with Angular since 2016 and with React since 2019 (And by Angular, I mean
Angular 2 and later, not AngularJs). To me, although the two
serve a very similar purpose, they feel radically different to code with. The first point worth mentioning is that
Angular is used on Gmail and on Google products in general, at Microsoft Office
Online, at UpWork, at Sony, at Forbes. React, on the other hand is used at
Facebook, Instagram, Netflix, Dropbox, and Uber.
The first thing underline is that this means Angular and React
are both mature solutions with strong references. However, those names, those companies, tell
a story of two very different worlds and they provide the first inkling of a clue about the
underlying difference between the two solutions. In fact, the two logos tell a very similar story. Angular’s logo is a shield, which has
undertones of being safe and solid and secure. React’s logo, on the other hand, is an atom. And if you combine the semantics of React and an
atom, you get… an explosion, an atomic reaction. Which is kind of the polar
opposite of safety and security. And the internal mission statements of the
two companies building these two solutions show exactly that same opposition. Google, where Angular was
created, aims to “Do no evil”. Facebook, the birthplace of React, on the other
hand, wants to “Move fast and break things”. Where Google sounds very
law-abiding and gentlemanly, Facebook’s internal motto gives off
a kind of rebellious, bad-boy vibe. And it seems to me that this opposition rubs
off on the two solutions, that Angular and React each reflect or embody these two
mindsets, these two mission statements. And if we take a closer look
at the companies that use the two solutions, they tell
pretty much the same story. Angular proudly boasts of solid and
sensible companies, like Sony and Forbes. Whereas the React champions – i.e. Dropbox,
and Netflix, and Uber – are disruptive. They favor speed of execution over
following established ways of doing things. Or to put in in other terms,
they… move fast and break things. If we were to translate this
opposition into roleplaying terms, Angular would have a Lawful Good alignment. And React would have a Chaotic Neutral one. And it’s interesting to see how these
opposing philosophies or mindsets translate into code, into how the
two solutions expect you to use them. On the React side, there’s
no pre-imposed structure. In fact, React doesn’t even
claim to be a framework – and frameworks provide structure. It’s
in the name, they provide a frame. No, React is simply a library, an engine that can
be plunked into which ever structure you choose. In Angular, there’s a coding and naming
convention which is derived from the MVC model (MVC stands for model view controller). The filesystem structure reflects this. Each module has a folder, and within the module
folders, each component has it’s own folder. And all this structure needs to be adhered if you want the application to
compile, let alone function. React doesn’t have an MVC structure in the code,
and doesn’t impose a structure on the filesystem. A component is just a function
that render HTML code directly (if we’re using hooks and functional components). How to structure the code and the filesystem
is left firmly in the developers’ hands. And that comes at a cost.
How you structure your code, which library you use for routing,
or translation, or state management. All those choices are in the developer’s’
hand, and choosing badly can be costly. In Angular, that cost of having to choose
is gone. All the choices are made for you, Angular is batteries included. Routing?
Check. Translation? Check. State? Check. Angular has you covered. However… that structure and those
batteries come at a cost too. All those libraries, all that functionality,
needs to be understood, and learnt correctly. Where React can be learnt
in one productive afternoon, Angular takes quite a bit more time to cover. Now, how are Angular and
React different in practice? In my experience, the differences in
structure lead to bigger components with larger scope in Angular, whereas React
is conducive to more focused components. Re-using components is also more complex in
Angular, whereas doing so in React requires minimal effort, where everything
feels more focused and lightweight. Because Angular is a fully-fledged framework
with a much larger scope (it provides more functionality out of the box, like routing or
internationalization or two-way state management) and a pre-defined structure, it
has a steeper learning curve. React on the other hand is a focused library,
with way less structure and less scope. This makes it easier to learn because
initially, just because there is less of it to learn. You can cover the
main concepts in an afternoon. That single-minded focus is also
what gives it greater flexibility. Angular provides security and structure
where React provides agility and speed. Which one do I recommend? To start with, I would recommend learning
JavaScript and TypeScript before learning either. Once that is done, if you can, learn both. If you can’t, my recommendation would
depend on your personality traits, on how risk-averse you are, and
on how much structure you need. If you need things to be standardized and
secure, I would advise you go for Angular. If you need action and flexibility,
I would recommend you go for React. If you want a development
career in the banking sector or a stable work environment, favor Angular. If you would prefer to work rather in a start-up
where everything is moving in all directions, I recommend React. Both are good choices, but only you can answer
which one best fits where you want to go.
