Intro - I'm an Angular developer and the title is not click-bait.
I've been working with Angular (From V4 to V9) for at least 1.5 years now and I've been enjoying every bit of it.
In this post I'll try to explain my reasons behind moving from Angular to React, and why I'll probably come back, in certain cases.
From routing to dependency injection, from TypeScript support to services, I worked in both big and small projects and always felt empowered by the awesome toolkit provided by Angular.
I had also a chance to look at state management via NgRx and NgXs and enjoyed them also.
I feel like I'm not an Angular expert, but I can surely bring a nice project from idea to deployment with confidence.
Choosing React.
One day a call arrived and I decided to move.
I'll start a new job at a new office in January and had a chance to choose my front-end stack as I'll be responsible for creating and training a new team for some new big projects to be developed during the next year, and felt like I could give another framework a try as I saw 99% of what I could see in Angular and wanted to learn something different.
I had a look at Vue, as I've been working a little with it in 2018, but felt like, if I had to move, better do it for the most popular one, so I went for React.
P.S. I didn't decide to try React because it was simply the most popular, but because being such allows me to have a wider developer audience to get information and tools from. It's the first time for me as a team leader, so I felt having a little more help from the community could only help.
The problem.
When I started studying Angular, coming from a vanilla JS - Vue.js background, I clearly felt overwhelmed by the steep learning curve everyone mentions when talking about this framework, and I needed ~3 months of studying in my free time to grab the fundamentals and start doing something good (P.S. Thank you Mosh Hamedani for your incredible course).
As someone who never looked at a single React snippet, I thought it could be equally hard to grasp and master this framework and started to feel a little doubtful about my decision.
But, nonetheless, I decided I could give it a try.
First steps with React
As soon as I started my new course on React (Thank you Mosh, again!) I realized the length was different (We are talking about ~75% length reduction in the course) and thought
Well, I guess I could give it a try, see what it's all about, and then decide if I want to move to React or stick with Angular
I started as everyone else did, I guess.
Reactivity in React, a simple counter, child components, props, prop drilling, class vs function component, state management, hooks, and.. stop.
Yes, you read that right, STOP! That's React.
Of course, I know React has thousands of features coming from official and unofficial libraries, routing systems, global state managers, GraphQL clients, etc., but nonetheless React is just that, and if you want to start with some simple stuff, that's all it takes.
So, Michael, how much time did it take for you to learn this stuff?
As I was running like Flash through the course, I realized one thing: Every framework shares a fair 50-60% of fundamentals with every other, so if you grasp them in Angular, you can reuse the same mental model for React. So what's my answer? 3 hours.
Yes, I'm not joking, I just needed 3 hours to learn it. And wanna know the most incredible thing?
I took the best from Angular and brought it with me into React with no hassle.
I don't wanna bother you with code snippets and long discussions about which one is better. Angular and React solve different problems in different ways. But, to provide an understandable example, everyone who has ever worked with Angular knows the intrinsic problem-solving power of services, so bringing them with me in React was an easy and powerful way to solve some of the problems I was facing in my sample apps.
But React is awesome by itself too.
Yeah, I know, React purists are already taking the pitchforks so let me clear out one thing: React is awesome by itself, even without things taken from Angular. Of course, I'm really enjoying the simplicity of React compared to the structured, more secure but clearly more verbose and harder way of thinking and working in Angular. React is simply javascript with a small but clearly understandable pinch of magic.
Ok Michael, so the question is: Will you move to React?
Yes and no.
I feel really good when I work with React, as it's easy, fast, reactive and does everything I want it to do letting me understand every bit of what I'm doing, instead of the fog you have in Angular in certain situations (Of course, there are many world-class Angular experts here on dev.to, but that's not the case for 90+% of front-end developers who approach Angular on a daily basis and can't easily grasp the inner bits and parts of Dependency Injection and Lazy Routing, for example).
But at the same time, Angular solves different problems, hardly solvable by React without a good dose of patience and self-control, so I guess I'll use both, depending on the occasion.
We are reaching a point where front-end developers are not expected to know just vanilla js and a framework, but to grasp the fundamentals of the whole industry, and I guess having two frameworks in my toolkit could solve me many issues in the future.
What do you think?
If you follow me, you know I always ask people to comment and provide their opinions, so feel free to share yours and let's discuss them together!
Top comments (32)
Nice 😄,
I think
Angularis for large projects.Reactfor mid size projects.Is
Reactmaintainable for large projects ?Hi SaijuT, I've been working with React for 5 years now on projects of every size.
In my opinion, it is possible to have a large maintainable React project, but you really need a strong architectural design at the root to create the perfect folder/code structure for that project.
The biggest issues in React are component responsibility, communication and state-management. If every component is in the right place in the architecture and everything is done perfectly, then you're good.
Also, it's really important to think in React. Sometimes I see projects with a mix of React-style functional code, javascript classes (OOP stuff in general), hoc and other patterns.
Mixing is not good for maintainability. Which brings us to have a team that writes the same code (eslint helps with that). If not, it's just a nightmare.
Using a framework like Next.js or a state-management library like Redux helps less-experienced devs to have a forced structure which improves maintainability. Typescript and tests are also a must.
At the end of the day, maintainability is a matter of best practices and well-designed software. Sometimes we, as developers, prefer spending more time on coding than on planning stuff on a piece of paper.
This is just my opinion and experience so far. What do you think? :)
Appreciate 😄, for taking time to write. Actually as of today I have just learned
Angularbasics. Right now I am not in right position to compare both. But i asked the question with intention of just knowing what others think.Few more questions:
Angularis it more maintainable with build inTypescriptsupport or is it up to the developer to make the project maintainable ?Typescriptto buildReactapps or Just vanillaJavascript?I've used React with both vanilla Javascript and Typescript. My opinion on that is that with Typescript you don't have to worry about static type errors. It's just another thing off your mind. And kind of forces you to design more because you have to think in advance what kind of data you have/receive. So yes, it really helps with maintainability. Also, it's easier for other people to read through your code and know instantly if that prop is supposed to be a string, a number or both.
I don't know much about Angular, but what I know is that it has more of a horizontal structure, compared to the tree-like structure of React. This means that in Angular you have a few folders with many files, while in React is easier to work with many folders (one per component) with usually a lot of files within (js, styles, tests, reducers for state-management, schemas and types, API calls and so on).
Of course, in either of them, you can structure the folders as you most like them. But usually, you wouldn't want to go against the way the library thinks.
I hope that makes sense! :D
I'll give my two cents on the thread: React is more "free" and, in my opinion, is less feasible for junior developers. Even if angular has a steeper learning curve, it provides structure, rules and linting, something you have to do yourself in React. That's the point of this topic: React is empowered by Angular, in some ways.
Absolutely agree. Many things done by create-react-app (mostly linting and structure rules) have probably been taken from Angular and frameworks from every language. I believe we could gain experience from every library/framework we learn and use it with the most appropriate for the project (or simply our favourite, in simpler cases :) )
I completely agree with you. As soon as I started working with React I realized I could easily lose the point where some data is populated and passed in other parts of my application, nonetheless a nice architecture is built project after project and I'm pretty sure React can be used for big projects too. Thank you for sharing your experience Giovanni, and of course thanks SaijuT for the good question!
No only small websites like facebook can use it.
Eheh as said in other comments, React CAN be used for big projects, of course, but still isn't created to do so. And, by the way, Facebook's UI is nothing too fancy or special and React is a perfect suite for it. You can tell me Facebook has an incredible top-notch back-end, but UI and front-end in general is not in the "Top 10 hardest websites to build" IMO.
Then you have not updated to the new Facebook UI on desktop and React is 100% created for big projects what are you talking about? the component model is the only way different teams can work on different parts in the UI the best. Facebook has a new website now, and it is not simple and one of the most advanced UIs out there. And Twitter, Binance trading market, Tweetdeck (WebApp), Reddit, Techcrunch, and many more disagree with you.
I don't agree with the new Facebook being "one of the most advanced UIs" in the web world, but it's an opinion and I can accept it. I never said it doesn't work in big projects, I'm just saying it works in medium-small ones in its simplest form and has to be mastered before you can use it in big projects.
You think and you are wrong. Don't think and you can't be wrong again.
React is infinitely scalable and used everywhere, but on the other hand, angular is useless like any previous attempt to bring java to the browser.
Friend, Different tool is used for different purpose. We as developers should use best tool for the Job. Angular is Google backed, they made it with a purpose. Many companies are successfully using it.
In Angular you have all in one solution on other hand in react you have to plugin maybe 3rd party libraries to get the job done.
Thanks.
"In Angular you have all in one solution"
That's more a disadvantage than an advantage.
It's not a problem setup react environment but is a problem to develop complex UI with outdated tools like angular, jquery, twig, pug... And yes, I mix them together intentionally because I believe they all got it wrong.
How can having the same team work in different aspect of the same project be a disadvantage?
None of the mentioned tools are outdated in any possible metric or statistic. Of course jQuery was created to solve problems we don't have anymore, but it doesn't meen it's outdated at all :) I stopped using it 5 years ago, but many people still do and will do for many years and the community is still vibrant. Same for Twig and Pug which are supported by many frameworks from different languages. As per Angular, the roadmap is clear and the community is huge, so I guess your comment is just not fact-based.
Thinking they got it wrong doesn't mean they are outdated. The first is an opinion, the latter is a fact. You can't mix those two things.
Krystof, yours is not an opinion but a creed.
React is surely scalable if you know how to do it, but nonetheless Angular gives you a better starter kit for it. You can't deny that.
Actually, I can. I'm a unix guy and I believe in modularity. One tool should do exactly one thing and be able to communicate with others.
It depends on what's the "thing" it has to do. Modularity makes sense if you need it, but if you need an app which needs exactly what Angular provides you, it could be feasible and easier to use it than searching and looking for packages in the React ecosystem.
In a way, I agree with the title in the sense of "know Angular beforehand to see how much better you could be doing things with React".
After having to learn both to work with on enterprise projects, I prefer React hands down. I feel Angular is too cumbersome and one needs like a lot of boilerplate to get started (I know it's useful to have an opinionated way to do things and to scale better but still...)
Still, I don't really like either of them as much as plain JS but they're the most popular and the ones that have given me work for the last 2.5 years so yeah...
I agree with most of your comment. You HAVE to learn one of those two to get a nice job but still, vanila JS gives you that bit of "Hey man, I'll take care of it" vibe on your projects ahah
Still, I guess React is more vanillajs*ish*, so maybe that's why many experienced developers choose it. Don't you agree?
I think that makes sense. Taking out JSX, React is pretty much a more organized way of writing vanilla JS.
And I can see how if someone is already very used to writing JS, putting the markup and the styling inside .js files will make them feel "at home".
Especially with hooks, nowadays React looks like your writing "just javascript"
This summed my experience with it as well. Coming from Angular and moving to React, you can appreciate the training wheels you get with Angular while bringing what you've learned to React. What causes me to stick with React is perhaps the level of flexibility and state-awareness. Angular requires you to pipe async traffic through god-knows how many observables and chains, while in React, all components receive the state snapshots. If you hide rxjs behind a layer of abstraction, I'm sure you can eventually achieve a similar experience with Angular, but the default change detection will probably destroy your app in the meantime.
The issue with Angular vs React is that it's not a "this one is better for x size app" problem, it's a "React is a toolbelt and Angular is a prebuilt template with strict rules" problem. You can use React the same way you do Angular, or you can use React for different things. A software engineer should be aware of the differences and should not expect the same things from each technology.
I completely agree with that. In my conclusion, in fact, I say exactly that. Having both in my tool belt allows me to essentially get the best of both words.
Yes agree. Thanks. :)
I actually tried to learn angular back in 2017 but couldn't wrap my head around it at first. Eventually I ended up on a team that was doing react and it all started to make sense.
You mention taking the services concept from angular and using it in react, i'm curious about that do you have any code examples you could point to?
Hi Omar, I'm sorry I can't as I'm answering from a PC without the source code, but simple enough, I just used the "http service rule" from Angular, which allows you to build services around HTTP Requests, and brought it inside utility files which I import and use whenever I need those. The concept of singletons, also, is widely popular and used in Angular and using it in React gives a lot of flexibility if you know how to deal with it.
Once I first introduced with react, I didn't really understood it, then shifted to node then to nestjs coming to nestjs made me come to angular, despite it's being difficult I actually grasped it pretty quickly, even quicker than I did for react, maybe having all the stuff in one file wasn't for me, I really liked architecture you get out of the box with angular and having separation of concerns. And currently I'm doing my project in angular which I originally planned to do it with react, nestjs saved me.
I bet learning vuejs for you took 3 minutes only.
I guess you were being sarcastic, but still I'll answer: It took me a couple of weeks to grasp some benefits from the framework and, during that period, I just used the runtime version and never had the chance to look at components in Vue, so I guess I still had a long journey to master it.
No. I mean Vuejs is easier than Reactjs TBH.
Oh ok, sorry for the misunderstanding then :)
As said, it took me much more time for less gains as I was pretty much a javascript newbie and many things weren't easy for me to understand.
Of course there are many people starting from Vue and switching to React for many reasons and it could suite too, mine was just a "Here's how it worked for me" kind of post :)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.