What to learn first React or Angular?
If you are thinking about which one of them to choose I’ll help you decide by highlighting their advantages and disadvantages.
Beware, I’m not going to tell you that one is better than the other. My mission is to explain the pros and cons of both technologies from my own experience to help you make a more weighted decision on which one to learn first. Yes, first. I encourage you to learn both as they both are great technologies solving common problems just in different approaches.
By learning both you will be more prepared for learning other frameworks if needed as the concepts are similar. And sometimes approach used in one technology may help you better write the code in other.
First of all, what are they? They both are the means to manipulate your UIs efficiently in a declarative way without the overhead of updating DOM yourself.
React
React is a rendering library. Although, some people argue that it’s a framework, it’s not. It is a library by definition and by the words of its authors, which doesn’t make it any less worthy.
Why one would want to choose React
It’s a quite small library by itself. It’s not overloaded with library-specific concepts as you mostly write pure JS and HTML using JSX syntax (a special “language” to write JS and HTML as one block of code).
It not only takes a short time to get up and running but also the library itself is lightweight which is crucial for users with a slow internet connection.
It can work with JS or TS (TypeScript) so you can skip the part of learning a new language, although I would recommend not to as TS is an amazing tool that helps you catch most of the errors even before the app is launched. Furthermore, it features lots of refactoring toolings provided by IDEs which are impossible or very complicated with plain JS.
It’s maintained by Facebook which gives us some hope that it won’t be dead in a few years. Also, they update the library in a backwards-compatible way so you don’t need to suddenly refactor the whole repo just to upgrade to a new version.
It has a widespread community with rich libraries like MUI.
There are multiple frameworks atop of React, like full stack-ish framework NextJS which allows you to have server-side rendering with almost no effort.
What the cons of React are
JS, HTML and sometimes CSS are all in one place and often are nested within each other multiple times which makes it harder to read.
There are no strict rules in organizing the app, so without a strong architect, the app might turn into chaos.
The library is only about UI render and if you want to make an SPA you would need to add another bunch of libraries, like react-router, which you will need to learn separately. To handle forms effectively you would also need yet another library and learn it as well or write a small custom solution of your own.
The way of styling the components is bizarre as you need to style it in CSS in JS style or use CSS modules which I don’t find appealing to use or use global styles which isn’t an ideal approach when you have a component-based architecture.
Angular
Angular is a framework maintained by Google. It’s shipped with lots of features like forms, router, TypeScript, RxJS etc. which not only make it prepared for most of the cases out of the box but also obscures the learning path as you have to learn all of them to work effectively.
The features it possesses could be put both in pros and cons of it. Pros, because they are great and make a powerful tool from Angular (especially TypeScript IMO), but cons as you should learn all of them and some features are not that well-documented and might be found only somewhere in GitHub issues.
Why one would want to choose Angular
It’s self-sufficient and therefore you don’t need to know the Angular ecosystem very well to work effectively.
It’s quite opinionated and all the guidelines are written by folks from Google in the docs. This makes development easier as you don’t spend time and resources coming up with a good solution and reaching an agreement in the team.
The technologies used in par with Angular are mostly the same and therefore you don’t need to adapt each time you change the project. You just come and start working as the file structure, app organizations and the libraries used are usually the same.
It’s empowered by TypeScript. While TS might take some time to learn it’s worth it as it spares you an enormous time of catching errors like typos, using wrong types in the equations (you don’t get the ‘2’ + ‘2’ — 2 memes as TS won’t allow you writing this and thus spare a good time catching tricky bugs).
Component’s structure is not a mix of logic and markup but instead is split into 4 files: TS file which contains logic, HTML file which contains markup, CSS/SCSS/SASS/Stylus file containing the CSS which are encapsulated in the component and “spec” file for the unit tests.
There is a dependency injection system that allows you to have services (special classes that contain logic like fetching data from the server) to separate business logic from logic responsible for the presentation. Furthermore, this allows you to have communication between distant relatives in one tree of components with just a few lines of code.
The updates are usually a smooth process of running ng update which runs schematics (a special set of scripts that do migrations in the codebase for you).
What the drawbacks are
The app size is huge from the starters (about 300 kb), because of the Zones which are essential for change detection for now (there are plans in the roadmap to make them optional, though).
You have to learn too many technologies just before the start. Also, there are plenty Angular specific features that you have to learn but are not applicable outside of the Angular world.
You can hardly opt-out of TS.
There are no frameworks atop Angular like we have for React (Gatsby, NextJS) and thus server-side rendering might become a more complicated process.
Observables that are hugely used in Angular are a new concept for newcomers and therefore an easy spot to create memory leaks.
There is a common misconception about SharedModule or MaterialModule which contains at least half of the functionality your app ever uses and therefore causes huge initial bundle sizes, which is impossible to do in React as every component there is standalone.
Afterwords
Nowadays, Angular and React solve common problems and are very good competitors. I wouldn’t say that one is better than the other. As always it very much depends on the situation. If needed SEO I would be more tempted to use NextJS which is built atop React with SEO and server-side rendering in mind so that I don’t have to spend time finding/configuring the tooling for the job.
I had started my learning path with React because at that time I had glanced at AngularJS which in my opinion looks terrible. However, after that, I’d learnt that there is already an Angular 4 which I just loved for its structure, clean of code and non-mixed markup, logic and CSS. Now it’s been already more than 3 years of close work with Angular and I just love it, but it doesn’t interfere with my interest in React, its technologies and also adopting new tricks widely used in React but not that often in Angular.
In the end, I can say that no matter which one you choose it’s always a good thing to learn another technology. As there is a say “the more languages you know, the more you are a human” I would adapt it to “the more technologies you know, the more you are a developer”.
