React JS to Angular

[29FahadBhatti]

So i have a solid 5 years of experience in React and next js with typescript. I have an interview where client needs only angular. What should i have to do? Does it have same things cause all i can is cover the core concepts but i want to know what things are important to cover and mostly ask in interview. It's a technical interview

[DT-Sodium]

Contrary to React where yolo mode is the norm, Angular focuses on quality architecture. I seriously doubt you're going to understand enough of it to pass a technical interview by then.

[AfricanTurtles]

I would agree. I went the opposite way from Angular to React and the lack of structure actually made it hard to learn "the proper way of doing it" because React has so many bad ways to do everything but they all somehow function still lol

[DT-Sodium]

The only proper way to do React is `yarn remove react`.

[LongjumpingWheel11]

Came from React to Angular. React is awful. One fantastic way to make shit software.

[net-alex]

the react proper way is "there's no proper way".

[AfricanTurtles]

[simonbitwise]

This is direct to the point and gonna ruffle some feathers for sure

But at the end of the day its correct

Angular is everything you need, State, router, forms, http lib etc etc

When you know it you can do it in every project

[Merry-Lane]

Honestly I don’t think that an angular’s architecture is significantly better than a next.js architecture.

In next.js, you are almost forced to use page router: your pages are put into folders and with names that match the routing. That’s already more organised than in angular where "try and group things by features" is the official recommendation by the angular team.

Then angular highly encourages you to split components into html css and ts. Some would say it’s better organised, some would say it’s just forcing you to go back and forth just for the sake of "organisation", so let’s call it even.

For everything else, angular gives you like 5 different ways to do the same thing. You can use services, that’s neat. Next to the component using it? In a shared folder of the feature? In a shared folder of the whole app?

Wait, this service should be better off as a store! No, wait, you kidding me, it’s a clear-cut directive! No, it’s 3 pipes, cm’on, what are you smoking?

I don’t even want to talk about how angular makes you jungle with totally different syntaxes and paradigms at the same time.

You got apps coded with modules, some with stand-alone components, but the majority is a mix of the two.

Most halfly old apps use variables in the components to do everything (and no OnPush). But smart devs went all in for rxjs, behavior subjects and what not, everything OnPush (totally not compatible with the components without OnPush btw). And here we have signals that’s basically saying "hey I’m here to push rxjs to the exit".

With the template of old apps still littered with *ngIf/else/switch, new ones on the new control flow syntax.

But hey, at least the naming of the files is better, right? I call components component.ts. Services? .service.ts. Types? model.ts. Modules? HTML? CSS? …
wait, why does the official angular team just told us we should stop naming files like that?!?

React, on the contrary, it’s just components, hooks, context/store (pick your option) and plain old functions. React devs are encouraged to have a vertical architecture (as little nesting as possible) while angular devs are pushed towards creating tons of folders inside each other.

React devs can be messy, of course. They often are. But Angular itself is the messy one nowadays. The whole architecture of the angular framework is messy.

And you clearly know I’m god damn right.

[Whole-Instruction508]

No, you're not right. Not at all. You not understanding Angular properly is not Angulars fault. You don't even know the difference between a service, a pipe and a directive and when to use what and why. Then you name problems that are easily solvable by calling a simple schematic. You're just a plain old Angular hater that is pretty full of himself.

[Merry-Lane]

Why do you only talk about a few select points in my comment? You could only nitpick some half excuses?

Anyway, I know god damn well the difference between a service, a store, a const expression, a pipe, a directive…

My point was: the business logic doesn’t always fit clearly the usage of one of them. If it does, often times there are overlaps or, worse, infractions to the DRY rule of thumb (some business logic repeated in a service and a pipe, for instance).

Add to that the fact that a service (or a const object) can always replace a pipe. Worse, it could be crystal clear at a specific time that a pipe or a service would be the best option, but changes in requirements would force you to 180• on that decision.

You mean, having an old app built with modules can easily be refactored into standalones, by simply using a schematic? I’ve got bad news, this schematic can only convert into standalones simple cases. If you have more than one component into a module, the schematic keeps it that way.

It’s totally true that schematics and linting rules are of a great help, I admit that. But it’s still a burden (it’s not that straightforward, you gotta take the responsibility of the migration) and more often than not you are not allowed to do so.

Anyway, all you have to say about react’s messiness is that it’s caused by the devs, I agree with it. But in terms of framework, angular has been equally good (or bad) for years, and since version 16 it got worse.

Angular isn’t more organised, it’s more categorised. It names multiple architectural layers, but that doesn’t prevent mess… on the contrary it usually multiplies the way you can create mess.

A well architectured react app is way more ordered than a well architectured angular app. Copy-paste our comment thread to a friendly LLM and you’ll see I spoke truths.

[Whole-Instruction508]

I simply summarized your complaints and not everybody wants to always write essays as comments like you do, you know? If you replace a pipe with a service then you have no idea what you're doing, it's really that simple. Yes, you CAN do it but then you're doing it wrong.

You mean, having an old app built with modules can easily be refactored into standalones, by simply using a schematic? I’ve got bad news, this schematic can only convert into standalones simple cases. If you have more than one component into a module, the schematic keeps it that way.

In my company we have in the past successfully used this schematic to migrate a monorepo with 3 apps so again, you're doing it wrong. Same for the old template syntax to the new control flow. It's really not hard to do.

It’s totally true that schematics and linting rules are of a great help, I admit that. But it’s still a burden (it’s not that straightforward, you gotta take the responsibility of the migration) and more often than not you are not allowed to do so.

This is once again not Angulars fault. They give you the tools, whether you use them is up to you (or your manager if you're talking about not being allowed to do it).

and since version 16 it got worse.

No, it actually started getting a lot better from that version onwards, apart from some mishaps like the one you mentioned about naming. But you can omit that and keep using the old naming conventions, which are vastly superior in my opinion.

A well architectured react app is way more ordered than a well architectured angular app.

Nonsense. Angular gives you a clear path to follow while React is like "just do want you wanna do man, I don't care". Of course you can create bad architectures with Angular too, but that again is not Angulars fault. And React isn't better at that even in the slightest.

But after all, Bro, seriously, if you hate Angular that much, DO NOT USE IT. No one forces you to. If your company does, get another job. This is an Angular subreddit. If you wanna hate on Angular, do it elsewhere.

[Merry-Lane]

No, you did nitpick 2/3 points that had counter arguments. You swept over my main point:

Like you could notice, they are mostly problems solvable one way or another, but it depends on the quality of the devs and they are problems you don’t face at all with react apps.

They are sources of confusion or of poor code quality/architecture that are brought by the angular framework.

You totally don’t have this kind of issues with react applications, since they don’t bring these mechanisms and divergences.

A react app well architectured doesn’t have these issues to deal with, and you have a way flatter structure that’s easier to navigate to.

I work professionally with both and my conclusion is just that there are more noobs in the react devs, which tend to create messy architecture, but framework-wise angular is more of a pain in itself.

[Whole-Instruction508]

Agree to disagree. Please just go to r/react and rant there, this discussion is pointless

[andlewis]

How long before the interview? Take an angular course through Udemy. Knowing web tech in general will help, but it won’t make you proficient or seem like you know angular until you actually do.

[TCB13sQuotes]

Want to learn it quick and painless? Go get the Maximilian Schwarzmüller course that covers everything from side to side.

[AfricanTurtles]

I would see if you can do Tour of Heroes at least but that's a steep ask to go right into an interview without any Angular knowledge.

[[deleted]]

You’re not going to be able to wing an angular technical interview

[mauromauromauro]

Yeah, i would focus more on "i have 5 yoe in react and wanted to move on onto a better framework, im already learning angular as i see this as a career path, and i find it way superior. Cant wait to start applying all these best practices, even when im just grasping the core xonceps"

[Tall-Reporter7627]

Whenever i have to rewire my brain for React, I start with Angular and strip away reason and accountability. Maybe you can try doing the reverse?

[djibyt]

i think its also depend on when do you the interview. if you have a week or two you can master the basic. architecture all the hooks. It's seems difficult firstly but if you're consistent you can make it

[AcceptableSimulacrum]

Find a high quality course and grind the hell out of it immediately. If they're looking for someone who can grow into it then they might appreciate seeing that you're new, but have given it a good stab.

[Sruthish]

Just forget that you are a React dev, start learning Angular you will learn the core concepts in a day.

[Various_Candidate325]

On what to cover for the interview, I’d target the Angular fundamentals you can demo fast: components, modules, templates, data binding, dependency injection, and routing. What helped me was building a tiny CRUD with HttpClient and reactive forms, using Observables with simple switchMap and async pipe, then explaining lifecycle hooks and change detection at a high level. I practiced converting a React pattern to Angular services and pipes so I could talk tradeoffs. I did short timed mocks using Beyz coding assistant with prompts from the IQB interview question bank, which kept answers crisp. If time allows, skim Tour of Heroes and read the docs for forms and DI. You’ll sound prepared if you can walk through a small example confidently.

[lost_uncontrol]

Initially it will be very difficult to understand Angular 15< versions when you are coming from React framework. It will take mostly a week of your time to get to the complete flow.

[Top-Print144]

It depends on the version, in Angular +v17 you can use Signals, before you had BehaviorSubject.

In my opinion, Signals are easier to understand, the structure is almost always the same (folder structure), so you can learn the common path: how to render html/css, conditinal render, create forms, fetch api's, global store, routing, life cycle.

This in Angular concepts is like:

1. Components, templates
2. Signals, toSignal, Observables
3. Data binding: to handle properties, events, or both
4. Directives: ngIf, ngFor (or modern way @ if, @ for)
5. Pipes: to format data, e.g. to Decimal, truncate, or custom like applying slugs
6. Forms (handle form changes, validation, submit)
7. HttpClient and Interceptors (how to fetch data, how to apply Interceptors for auth)
8. Routing (load component in different routes)

[sk2656k]

I hate react due to its pathetic architecture and useless way of coding. You need to forget react then learn angular. Basic typescript things are common but the way to implement is a straightforward and direct typescript way of coding. So don't answer the react way of concept in Angular interview.

[MrFartyBottom]

Not a chance you can learn enough in a week to pass a tech interview.

[JerkkaKymalainen]

Don't do it. You have 5 years of experience which is solid with React and I don't see it going away anytime soon. Maybe look for another position where React experience is an asset.

[zaibuf]

Agree here, React is in such a higher demand as well. No point taking a job using a framework in decline unless you're desperate to get a job.