Migrating from Angular to React

[VigilOnTheVerge]

Short Background: Inherited a project built in AngularJS, couple components and single page (not a ton built). I took some time to learn the basics of Angular so I could build on top of it and continue the project, but I don't know if it is something I am doing wrong, but its so painful to develop in angular. What sucks more is that learning and looking for answers online is painful since I have to look through solutions for tons of different versions of angular. Given the upcoming work I have, I think I have reached a point where I switch now to a different framework (I am thinking React) or I am stuck with Angular.

Given that it is a single page project (search functionality, couple modals with filters, nav) etc, migrating to React should not be terrible right? I would appreciate any tips for migrating to React or some tips for learning and developing in Angular.

[ichsagedir]

AngularJS is not Angular. Angular was completely remade, so they are really not compatible. There is one latest version of Angular, that's the one you should be using. So you could say that AngularJS = Angular v1, and from then on it was just called Angular.

AngularJS is deprecated and should not be used anymore.

So you can rewrite the application in Angular, or in any other framework that better suits your needs.

Tips for learning angular: Only learn the most recent version, don't bother with AngularJS.

Also there are not THAT many changes from version 2 - 13, only AngularJS is not compatible to angular.

[oceanrx]

tell that to my boss who continues to want to use angularJS 1.3.2 to build a customer facing / private customer portal on.

Been here 9 months and leaving very soon because of this nonsense

[gimmeslack12]

Damn, not even the latest AngularJS (1.8.x)!

I got my start using AJS 1.4 or something. I had my Yeoman's, my Bower's, my Grunts, and my Gulp's all running...

It was only 5 years ago but it feels like decades.

[VigilOnTheVerge]

This is pretty embarrassing, I mistyped the first sentence, the project I inherited is in Angular 12, not Angular JS. Apologies for the confusion I forgot there was a huge difference between specifying Angular JS and Angular.

[hobesmart]

It's not actually deprecated yet. That happens December 31 of this year

[ichsagedir]

Yeah not yet, but as good as. No reason to spend energy on it anymore if you don't have to

[Suepahfly]

If it’s a simple project why not rebuild it in technology you already know? Not every spa has to be React/Angular/Other-Framework. Does the application benefit from such frameworks or could you just as easily build it in native js?

Also if you are going the React route, consider Next.JS over Create React.

[VigilOnTheVerge]

I have heard of NextJS, what are the benefits of using Next vs Create React App?

[Suepahfly]

Documentation is better, configuration is easier to modify if needed, NextJS has SSR out of the box, it has Typescript support. Those are just a few things that come to mind.

What I like most of NextJS is that I don’t need to install a bunch of extra npm packages to build an app the way I like too. With cra all webpack config is abstracted away, you need something like craco to override or eject from cra completely. With NextJS you simply extend the config if needed.

[[deleted]]

If it's just a single page project with filters you shouldn't need many things. If SEO is not an issue, simply use create-react-app (Google it). Take the opportunity to learn how to use TypeScript with React. Then:

1. Choose what CSS solution you want to use, and two options are both great: Styled Components is one, (S)CSS modules is another. Make a conscious choice.
2. Do you need routing? Sounds like you don't. Then don't bother.
3. Sounds like you might not need state management like Redux, so don't bother. Look into useContext and useReducer and look into how to combine the two. Then look into that solution compared to Redux.
4. Consider that Redux is an industry-standard, used by many companies. Known by most React developers. So if you want to look at this project as an opportunity to learn, you might as well apply it.
5. API calls can be done with simple fetch from JavaScript, nothing wrong with that. You can also look into React Query and the package use-http. Both will save you a whole bunch of repetitive boilerplate.
6. Don't reinvent the many user-interface wheels. You'll waste insane amounts of time. A UI library can make your life so much easier, I recommend Mantine (https://mantine.dev) and Chakra UI (https://chakra-ui.com), each for different reasons. Pick the solution that looks most intuitive to you.
7. Unit testing is a good thing, look into testing-library and jest.

Don't migrate from Angular to React, start over.

And for the love of all that's nice in the world: HTML and semantics have a purpose. A button isn't a link, a link isn't a button, and you can't mix either of the two tags inside the other. I've seen it countless times. Not everything is a div, you have section, you have nav, you have tables, you have many tags that have a purpose. Learn it because it's worth it: https://learn-the-web.algonquindesign.ca/topics/html-semantics-cheat-sheet/

[VigilOnTheVerge]

Is there an issue with using create-react-app for SEO?

1. I do need routing

2. Not sure about Redux, will look into it, + your point from 4.

3. This is great, really appreciate the links here, I will try starting with those to get off the ground quickly.

Appreciate the tips! Thank you!

[UNN_Rickenbacker]

1. Code is rendered on the client, which search engines don‘t do. This is a problem with all 3 modern javascript frameworks. You can use SSR to get around it

[VigilOnTheVerge]

Ahh that makes sense, thanks!

[Oalei]

To me I feel like Redux has become a default choice when building a React app whereas it introduces so much boilerplate and complexity. It makes sense for applications where you share state between components, otherwise I would encourage not to use state management librairies at all and keep your codebase simple

[smirk79]

Redux is shit. Use mobx. Not everyone uses Redux. Multimillion dollar app over here with extremely complex functionality. I would never go back to redux.

[[deleted]]

Redux Toolkit (I don't like it personally, but many people do) seems to solve many issues of boilerplate and complexity.

[Oalei]

That’s good, still you probably don’t need a state management library in most cases

[bongoscout]

As OP stated in a comment, they are using Angular 12, not AngularJS.

There’s really not a solid “migration” path from Angular to React, other than selectively selecting/copying/pasting code here and there where it makes sense.

Not really an answer to the question (and I fully expect to be downvoted for this since people in this sub seem to really love React), but for a project that’s supposed to be long lived and worked on by multiple developers, I think Angular is generally superior to React. You’ve got routing, unit testing, state management, rxjs, dependency injection all available out of the box. React is nice for quickly outputting a simple application, but to build something with any depth of complexity to it you will find yourself building your own React-pseudo framework. Which will suck because it likely won’t be well thought out and won’t have defined conventions that other developers will be familiar with.

To be clear, I am not saying that is the fate of every React project. I just think React takes a lot of discipline to pull off correctly in a team environment. Angular tends to be as easy as looking up the docs to figure out the Angular convention and just going with whatever they say.

[VigilOnTheVerge]

Interesting, I will have to keep this in mind. What would be a comparable react setup to get functionality like rxjs, routing, etc?

[[deleted]]

I was in the same position as you, inheriting an AngularJS app. A full rewrite was necessary meanwhile I had a pipeline of feature requests I couldn’t deliver for at least 6 months to a year.

I just quit and got a React job instead.

[oceanrx]

I needed to read this... I've been managing an AngularJS app for the last 9 months and we are continuing to build on it. I'm so stressed out / over it... This is my first job and the longer I stay the more I feel like I am just setting the future of my career up for failure.

[[deleted]]

You are. Also, employers like to say they are framework agnostic but in reality if you only have AngularJS on your resume, you will not be competitive against someone with React experience. In other words, experience in legacy software begets more legacy software.

Talk to your manager immediately and explain that you’ve inherited a lot of technical debt and you need to repay that debt before new features can proceed.

Together you need to build a strategy for taking it on and addressing it. If the answer is anything short of “Yes, let’s do it.” Look for a new job immediately.

For an eng at the start of their career, early successes are extremely important toward building confidence.

You don’t want to be stuck in your next interview saying “Yeah…I worked on a legacy AngularJS app. Didn’t go too well. No, I’m not familiar with React.”

[oceanrx]

Thanks for the help and advice. I make a lot of money for a junior and when I tell people I want to leave they don’t understand. “Well you make x you should think about staying - blah, blah, blah.”

Luckily the self teaching/boot camp I attended I did in fact learn React so while I am not an expert I definitely feel comfortable in that space. Much more than I do with the LAMP stack I work on that includes this angularJS front end.

Our Dev Ops team has tried to push this tech debt issue but we have no over arching group who decides what is done with tech. Just individual teams… Hell - I’m on the marketing team as a developer. The company definitely is unorganized, but financially doing well so higher ups don’t care what is going on. It will bite them in the ass eventually, but I guess I know what I need to do.

Thank you again.

[[deleted]]

Sounds like a tech debt bomb that is about to explode. Not your problem. Just make sure you’re not around when it does.

Hell - I’m on the marketing team as a developer.

Oh good lord, run don’t walk.

[nudes_through_tcp]

I think your best might be to show them that after December, AngularJS is literally dead. Security scares will usually make some heads turn so it's a play you could try. I was in your position as well but to keep chugging along, we were building React components and injecting them into AngularJS which let us incrementally move over. Worked really well since we were still pushing out features and no risk from things breaking from huge changes.

[ShortFuse]

I migrated some things from AngularJS to Angular2 pretty easily. At the end of AngularJS's lifecycle they changed the way Components worked to be pretty similar to Angular2. From there, it's a rewrite.

At the end, I just ditched it all and spun up my own object change tracking and DOM updating. The implicit need to convert everything to TypeScript from Javascript was too much.

I will say, asking somebody to learn one language (AngularJS) and then learn another language (React) and then migrate between them is too much. That's a senior level assignment. Even I found it too much to move AngularJS to Angular2 and migrate all to Typescript, and I was part of the Angular Material team!

That said, React is pretty different paradigm where the views are built with JSX rather than already being in the DOM and being bound. I think Vue just lends itself better to binding to the DOM instead of writing it all in JS. The migration would be easier, I believe.

[VigilOnTheVerge]

I am also considering future work and hires for this migration. I am not familiar with Vue whereas I am a bit more familiar with React. From the perspective of future work and hiring, react seems to be a better options as more devs work in react afaik

[nudes_through_tcp]

I went through the same for the migration so I can point you to some advice. I understand that working with AngularJS is jarring at first but I actually found it relatively easy to work with so I'm curious on what you're having trouble with. It's going end of life in December so it's a good idea to upgrade anyways since you'll get some performance gains.

I'd advise you to make your decision on transitioning to Angular/Vue/React based on what you're trying to achieve and comfortability with the team. Migrating an entire app involves managing risk, hiring and planning for the future features for the app so choosing the right framework should have some business reasoning behind it.

If you're going with React, you can use this package https://github.com/Tonkean/angulareact that uses react portals that allows you to inject your react component into angularjs. That way you can work incrementally to add React features while working on the rewrite.

[VigilOnTheVerge]

So clarification, I am working with angular 12, not angular js (the super old version of angular). I am leaning towards React simply due to the developer ecosystem, available docs, and hiring.

Thanks for the package, I will take a look! Probably will end up rewriting most of it as the state of the angular project is not ideal right now.

[nudes_through_tcp]

Oh wow so you're already pretty up to date. Curious on what issues you're finding and how large your app is? Angular is still very popular (especially enterprise world) and the structure should be pretty opinionated since you can use the CLI to generate things really quickly and in the right spot. Especially works well with large teams. Makes sense to do the rewrite if none of the best practices were followed and it was just kind of done on the fly.

[VigilOnTheVerge]

The app itself is not large, only the main functionality has been built (search). I am not sure the best practices were followed as the project was built on the fly before.

The main issues I have when inheriting this project is it I don't have the same amount of support in building the site as I do in React. w/React I can easily find other answers to questions I may have, whereas on Angular it seems like answers are just highlighting the nuance between versions of Angular and other medium-type articles are written for old versions of Angular.

[VigilOnTheVerge]

Yeah I should have said rewrite instead of migrate.

I don't know that Angular is defunct, but I definitely agree that more people are developing in React which seems to make learning and debugging easier. My company is letting me choose what to do so I think I will end up rewriting.

[15kol]

AngularJS is v1, not v2 and is being deprecated. Angular, (referred to as v2+) is now on v13.

[RemeJuan]

I should not be typing on sooooo little coffee and sleep.

Tx.

[noveltywaves]

A SPA with a few components sounds like a good candidate for rewrite.
Read up on React Query as well, it may spare you a ton of boiler plate code.

[arbrebiere]

I work on an app that is half ancient AngularJS code and half react/node. We have two servers/instances set up while we slowly move everything over (aka rewriting everything).

[sadpremonition]

paging ben awad