I'm sorry, but angular, react, migration, thoughts?
TLDR: I am working at a company where the codebase is written in the MEAN stack. I have quite a lot of experience with react. We are only a team of 5 devs. How hard is it to migrate the angular code to react? Anyone done a migration like this? Does it make sense to do a migration like this? All thoughts about a big migration like this is highly appreciated! đ
Rant: Why would i want to do this at all you might ask, well simply because i think angular sucks. Only been using it for a couple of weeks, but simple stuff as editor recognizing types and giving suggest for props is a hazzle in angular. The templating of angular does not give autocomplete or correction for errors, theres a whole list of reasons why i want to abandon the angular ship, but mostly it is because i feel like the angular community is none-existent, it seems to be near dead and it is really hard to find tutorials, ui libraries, discussions, examples and so on. And the thought process and syntax of the system just seems old. Importing a component into a new component means importing the thing twice in one file. Stuff like that is just insane to me. This is adressed in the 2025 strategy for angular, aka RFC for selectorless components - https://blog.angular.dev/angular-2025-strategy-9ca333dfc334, but i dont like the feeling of trusting a promise from google. Google does not have a great record of keeping their promises and keeping products alive. I could go on and on, but in the end i just want input on whether or not this is a crazy idea to suggest to the company. It is a frontend with about 30 pages, and probably about 1000 components, probably about 100K lines of frontend-code.
7 Replies
About 4 years ago I was working in a team with Angular 9 and tbh I hated it from the beginning lol
We upgraded from 9 to 10 and then from 10 to 11 and we sticked with it for almost 2 more years. Then we got a new design for the system and we just wrote everything in react and it took us about a 1-2 months doing so (The code base was huge and we didn't deliver any new features).
So couple things I learned from this process are:
1. if the code ain't that bad and it's just you can't get used to Angular, maybe you need to give it a better try. It's very easy to get a code that you didn't write and say "Let's refactor this code, it's not that good"
2. don't use any migration tools. write everything from scratch. do it the right way. Angular is not React and React is not Angular.
3. consider using module federation in order to work in micro frontends. this way you can start refactoring parts of the system in react and use them in angular and this way you can take your time refactoring the code and also continue to deliver new features without affecting that much of the performance of the team and the website.
1. I am pretty new to angular and love react, so i wont suggest refactoring it right now, but i really want to đ
2. Good tip!
3. What does this mean? is this what you are suggesting?
--> @module-federation/vite
Vite plugin for Module Federation
You said it toke 1-2 months, how many devs were you? Did everybody know angular and react? if not, how did you do the migration? 1-2 weeks of learning react? then migrating? or learn as you go while migrating. I would be the only one knowing react in this team. Although its only one or two other frontenders on this team Was anyone against it? How did you fix that?
About number 3, read about webpack module federation and how you can implement it with angular and react.
We were 4 devs and 1 qa. Yeah all of the team knew angular but only half of the team knew react. So part of the team learned react on the go and we were very strict on code reviews.
Also we only refactored the frontend and didnât touch anything in the backend so that was a relief.
If youâre going to refactor, I suggest to choose a design system like mui or anything similar, it will help you reduce duplicate code and work on a lot of functionality.
Also try to make as many small tasks as you can so you would know what are the pain points and whatâs going to take time and also know how much you can estimate it. The snaller the task is, the easier it is to estimate it.
Take a note that it will take time and if youâre thinking it will take 2 months, give it another month or two for just in case.
Also idk what are the work hours in your work place but we worked a l o t. Like 10-12 hours a day lol
One thing to be careful about is the average skill level of the Team. In my experience angular codebases tend to stay cleaner as they grow than react codebases. Angular forces you to structure your code a certain way which makes it much easier for Devs that are less experienced or don't care much about frontend code. React lets you do whatever you want which is nice if you know what you're doing but sucks if you have 50 different ways to do things in the same codebase. You will have to be very deliberate about how things should be structured and how you approach training the team to avoid the many foot guns react has.
I know angular can suck but it might be better than starting from scratch using a technology only you know well
You might want to consider starting small migrating only a couple of pages for an isolated use case. Preferably something that shows the strengths of react. Don't pick mostly static pages. Pick something where things happen and you have a bunch of nested components and some state. Angular templating is much better than JSX for simple things like rendering lists or conditionally rendering elements. React in turn is better when you want to define many elements and pass state.
Unfortunately I disagree with you⌠Although angular has good structure and limits you to work in a specific way, but as devs tends to think that users are âstupidâ and try to do similar things, same thing with devs and angular.
The codebase I had in Angular was so awful, it took DAYS to add a simple tiny feature and it was very hard for other people to understand the code base.
Iâll be also guilty and tbh I wrote shit code in Angular too lol. Tried my best to actually learn angular but it wasnât it and I just wrote so things could work.
Each team and each code are different, but it could happen to anyone
Every codebase is getting more shitty the more it is worked on and if you don't want that to happen you will have to put in extra effort. What i mean is that angular gives you at least some guide rails which will keep at least those few aspects clean. Of course you can still make a mess but at least you know for each component where the template and state is defined
Really appreciate the insight! Thanks!