01

of 04

Introduction

In the past 2 months I started learning Angular, after 7 years of ReactJs with Typescript.

As I advanced in my web development career, I’ve come to the conclusion that ReactJs is not always a great choice. Let’s find out why.

02

of 04

What made me test Angular after 7 years of ReactJs?

I love Typescript so using with react was a no brainer for me anyway. Hence my start with Angular wasn’t that steep from language’s point of view

Don’t get me back on vanilla js 😢, please.

I used to be such a big fan of ReactJs, an advocate I would say. I was wrong, and before cutting me into pieces, hear me out.

Whether you are working with ReactJs, Angular, Vue, Svelte, NextJs – you name it – I strongly believe we can all agree that these are just tools that make our lives easier.

As the apps grow in size, these libraries and frameworks exponentially save costs by reducing development time while improving the overall coding experience.

Advocating for one being the star ⭐️ and the others being modest 💩 is a mistake. They all have advantages and disadvantages.

So, what made me so upset with React that I am looking for alternatives? – It’s actually the freedom it offers. Bear with me, please.

When you start a react application you have the freedom of choice for:

• Folder & file structure
• route management module
• state management module
• forms configuration & validation module
• REST API requests module

That may sound great but it’s not, actually it’s bad!

Let me explain why ⬇ :

1) NPM Packages

Instead of having the functionality maintained by the framework’s official contributors team, we have 10 modules for the same problem, developed by 10 parties, organisations or even developers.

I cover npm packages in a great article taking into consideration maintenance, open source and code quality. Read it here.

We have:

• react-router for route management
• countless modules for state management like Redux (some of which I haven’t even heard about: Recoil, Jotai, Rematch etc);
• formik, jotform, formstack and countless others for forms configuration & validation
• axios, fetch, swr, react-query and countless others for fetching data.

Modules are reactive to the framework updates instead of being part of the updates.

All of these are susceptible to:

• contributors can stop the maintenance for any reason
• open source licensing changes (Video version)
• Code quality
• Breaking updates (how react-router did lately)

Few important examples:

• Formik (link)
  • I love this module. It solves important problems and the integration with yup is amazing. But since 2021 it is not updated anymore. It seems though it’s still maintained for enterprise clients (according to their website being alive). This is a huge problem for long term big applications.
• React-router: The latest incremental changes broke a lot of applications. It reflected in the market around us.

2) Folder & File Structure

We are different.

Each developer has its own style and level of knowledge. What I thought yesterday to be the best decision it may not be available today. Because I am better than yesterday and learned something new.

Without enforced standards, everyone has the freedom of choice which is not ideal. In solo projects it is great! But when you have a team of developers, if you don’t take the time to enforce a folder structure and document where each piece of code should be living in – everything can become overwhelming on the long term.

Every developer comes with their style, their opinions and implement according to those which can get very fast out of hand. Not to mention the conflict that can arise from deciding these standards in a small team.

Since there’s no golden rule and a perfect way of doing things, being forced to do it in a certain way, wether we like it or not, we can get used to it. On the long term the project will thank us!

This is where Angular does an amazing job. That’s why I think it’s called a framework as it comes out of the box & in house maintained with:

• http service managing queries
• routing
• enforced folder & file structure
• reactive forms

Everything is maintained by angular team itself. This means that every update is going smoothly between the modules dependencies, even though you may have to adjust your code a bit.

That means the modules are developed together with each Angular release and there’s no delay between them.

I am not 100% happy about the folder structure as it will get lots of deep folders. But it’s something I can live with, because I know exactly what to expect when I open a folder. In React you don’t know what is inside a folder when you open it. You can get surprised every time.

03

of 04

What I love about React compared to Angular

What I love about React compared with Angular is JSX.

The binding is so much better in React because you can actually use IDEs’ Intellisense. Angular is a bit harder to read since its templating is html and the binding is done inside strings.

Although it takes time getting used to the binding inside html, I think that’s intentional (please let me know your opinion). The variables used in angular template should only be the final render content and not for doing operations like you are allowed in React.

I find it a bit annoying but it’s something that I currently accept as it is.

04

of 04

Final thoughts

This is why I am considering Angular as my main framework, let’s see how this goes. I’ll keep you updated with more thoughts and the conclusion at some point if I am really switching or not.

Follow me on Twitter & Youtube and let’s learn together!

More to come, follow me on Twitter.