After two years working with Angular I was assigned to a project where the frontend stack was React, Next.js and Chakra UI. I started without any prior React experience nor knowledge. After three months in this project I’ve decided to put my thoughts of this technology change into a post.
Disclaimer: this won’t be a full Angular vs React post, but my thoughts about what I like and don’t like about React, what I miss from Angular, etc. Also take into consideration that I’ve only been working with React for 3 months.
From a Framework (Angular) to a Library (React)
This was one of the biggest changes for me, Angular already provides you a way to do things, elements to help with authentication (Guards), endpoints handling (Interceptors), Routing, Pipes, tools (such as the beloved Angular CLI), etc.
As React is just a library, it’s on you to generate all those things, or to search another external tool or library.
In React most features must be created from scratch
Let’s suppose that we need to show an alert on our application every time an endpoint returns an error.
In Angular we can just go to the CLI, create a new Interceptor with the logic of reading the error and calling an alert, then use the interceptor from the app.module and we are ready to go.
On the other hand, React doesn't provide us with built-in magic to do this. We could use Redux-Saga, create an architecture for it to be reusable, in conclusion: think everything from scratch.
Routing
Since I haven’t worked with pure React, but with Next.js, I’m going to compare its routing system to the Angular Router.
Nextjs handles routing based on the folder structure inside the pages/ directory, this is very easy to learn and doesn't need any configuration at all. For simple projects I look at it as a great advantage.
I consider that the Angular Router is a much more powerful and versatile tool, with it you can handle Lazy Loading as you need, and redirection is much easier than in Nextjs.
Architecture
In my case, I don’t have a lot of experience in development and even though I was able to start several Angular projects by myself and not die trying since it provides you a way to organize directories (even though you can customize it based on your needs).
Oppositely, if I had to create a relatively big application by myself with React in this moment of my career, it would be very painful for me to create something well organized and scalable (now that I’ve worked on a project with a lovely architecture created by very experienced React developers it would be easier for sure).
Javascript after Typescript
Before I started working with React, I loved TS and I thought that it was a must to have within any application. I learned that it isn’t correct, you can work in a very well organized way by using only javascript and a good Text editor or IDE. Also, if you don’t use Typescript well, it can become a real pain in the neck.
I don’t think Typescript is useless, I still believe that there are many scenarios in which TS can be a real lifesaver (really big projects, or projects with a lot of different entities).
Another thing that I’ve noticed when using React is that I had to learn much more about javascript, ES6 syntax is a must, also I wasn’t used to work with .map or generator functions. (This can be also because in this project I’ve worked with real javascript lovers)
I really miss the Angular CLI
The ability to create any element you need (Module, Component, Service, you name it) in a single prompt command without having misspelling errors in the code is a real time saver, also by using it, you don’t have to worry about the file structure, which imports you need, etc.
Simpler files
If you create a new component in Angular, by default it creates three files (and a fourth one if it`s a module) one for the template (HTML), one for styles and the other one to handle all the logic. You can reduce it into one sometimes, but I think that React, by using JSX, handles this in a much more efficient and cleaner way.
Also, by having less files, the project is more maintainable, cleaner and less intimidating to new developers.
Learning curve
I had heard that React’s learning curve was smaller than Angular’s, but I didn’t understand why until I started with React. If you had to create a simple website with few pages, with React it would be very easy and simple as you don’t need to know a lot of stuff. On the other hand, to do that on angular you’ll have to learn first: Typescript, Routing, Modules, Services, Interceptors, Guards, Pipes, among others things you may require based on your needs.
Conclusion
I still have a lot to learn about both technologies, but now I know that both have pros and cons, different use cases and it is not one or the other. The next time I have to create a new project I’ll surely be doing a deep research and evaluation before choosing between Angular or React (or other frameworks or libraries that I haven’t tested yet).
I hope this has been in some way helpful for you. May the force be with you.
Top comments (24)
I know that feel!! I’m transitioning to React
After 6 years with Angular, the interesting part about React is the flexibility to try a concept without all of the dependencies in modules, providers and Entry components
Great post
Man a lot of people are making this transition, at the same time there are also many companies here in south Africa that are moving the opposite direction, or even starting to build their products with TS and React.
Thanks for your contribution @feralvarz !
I'm also a relatively junior developer who was taught with Angular, and indeed a lot of what you mention about React frustrates me enough that I've put off learning it until I'm forced to do so.
With that said there's only one place I really disagree with you:
I don't understand why anyone would want to program in raw JS and every time I'm forced to do so I'm constantly frustrated by the lack of everything from predictive input to typo protection. I suppose that TS is a bit of a hill for people who aren't used to it but it's so very worth it. In fact, understanding it (and Angular architecture generally) has enabled me move into other object oriented languages much more easily (C# in my case, as my employer works in a .net stack with Angular frontend).
To my eye TS makes javascript into a normal programming language with mostly expected behaviors (though you can still avail yourself of truthy/falsy checking whether a variable is defined or undefined).
The only reason in my experience to write raw JS are libraries that mostly force you to do so. Even then in my experience just copy/pasting it all into a TS file is extremely efficient in catching a variety of bugs
Ive usually noticed 2 kinds of people who run from TS:
Programmer who got traumas from old Java days. They fear the types will hinder the development too much and usually fail to grasp that TS is nothing like java/C# because its is a lot more flexible.
Programmers who started at JS/python and never effectively got to work with static typing
I understand it seems like extra work starting out, but man the amount of time and energy you save is really unparalleled and it's no great question why modern languages pretty much always incorporate these features
I've actually wondered why no one has ever attempted a TS/C# equivalent for Python. I know it's used for some different applications than C/JS but you'd think the benefits exist
For me, understanding how TS was created and structured to let C# developers apply familiar programming principles to JS enabled me to follow that path backwards and use my understanding of what TS did to understand how C# was intended to operate.
Working in React, or raw JS in general feels like a concession to today: a necessity because it's what we're already using, because its faster for a simple implementation, and so on. Working with TS and Angular makes me feel like I am also developing skills that are transferrable to other languages and applications. I am a junior full stack dev, so that kind of transferability is important to me.
I think a lot of TS-skeptics probably don't know or haven't really stopped to absorb the fact that TS is set up to allow any valid JS code to work: if there's something you want to write w/o using TS's features, it's guaranteed to work. So it really doesn't have a downside: You can take what benefits you want, even if that's just defining object interfaces so that your IDE knows what your object keys are, and still write any code you don't want to use those features with without modification.
there IS a "TS for python", but its still growing. It didnt have the explosive growth of TS.
The guys at dropbox (which had Guido Van Rossum) pionereed mypy. From the mypy experience they incorporated PEPs on what python type checkers should agree.
mypy has a bit of a lackluster editor experience, so MS is pushing their own python type checker, PyRight, which is more IDE-friendly. Yeah, and they hired Guido. I frown that pyright is written in javascript (not even typescript... probably for easier VSCode integration).
Havent used pycharm lately but they probably also implement their own type-checking instead of relying on mypy.
I am the second kind but after working with TS on a react project, I found it kinda interesting.
I feel angular has less pitfalls, and feels closer to the web. The boilerplate is a bit uglier, but then state management, styles and other aspects feel more natural. And STABLE. On a previous company I have worked, the junior devs got on with relative ease.
On the other hand React has so many ways to shoot yourself in the foot. Even experienced React devs may commit basic mistakes, (imagine the juniors!), because the framework and the community overall are so loose.
One thing I dislike from Angular is that the template intellisense is (or used to be) quite bad. Things like: if you F2 a variable on a controller, the language service doesnt apply the change on templates. On the other hand the JSX integration with typescript and language services are excellent since its just javascript.
DI is also a lot more confortable than contexts and redux, tough it shares potential performance issues (lots of re-renders). Angular runs its "check" so frequently, but I'm not sure if that check can be considered more lightweight than a React render.
Hi @wkrueger , thanks for your contribution! I agree with you in almost everything.
I wouldn't use the word "loose", I think the React community is huge and as React gives you so much freedom, there are a thousand ways to do different things and that can be really confusing and overwhelming, specially to junior devs.
yash loose wasnt the best word
Great article ! Thanks!
I have invested more than 6 years of active angular development until i saw that it is a Trend for marketing to release features that where highly needed but they where delayed like 1 or 2 years. This was really frustrating for me and i needed to fork angular repository and reverse engineer some of the bugs that i got. One day i decided that i will create my own Dependency Injection and i have come up with github.com/rxdi/core @rxdi/core, later on i was researching for Web Components and i found LitHTML i love it from the first second that i saw it since it was a perfect fit for my understanding of writing components and i have combined them with rxdi/core so @rxdi/lit-html was born. github.com/rxdi/starter-client-sid... here you can check starter application with all schematics that angular has for creating Component, Service, Provider, Guards, etc.
Later on i found that i can create really complex logic only with html web components so i invented @rhtml github.com/r-html/rhtml relaying only of writing web components which can be declaratively written and then hydrated from javascript code this way there is no bundle only html files. I will explain more further in some blog post.
As a conclusion i decided to invest some time to create my own stack in order to move fast and to know where the things break or how to change the system without any effort.
One more thing to put here is that @rxdi Dependency Injection is used also to create highly complex Graphql Framework for building API's github.com/Stradivario/gapi
Angular inspires me to build these things so thank you ! :))
Regards,
Kristiyan Tachev
@stradivario wow! That's really impressive, thanks for sharing all your work! I'm willing to see a post from you explaining all this in a more detailed way, it would be helpful to see some examples and comparison as well.
Wao! Well, in comparison you cleared all my doubts. I am angular dev. i want to learn React, your post cleared roadmap for me :-) thanks
I'm very glad to hear that! In case you have any concern, just ask! I'll do my best to help.
Sure, thanks :-)
i was hoping that instead of just giving a general account of your experience with the technologies, you would also give a very biased and personal opinion on the matter. a lot of people (including me) were interested in get to the end and finding out which you regard as better.
Hi @r_lefela , thanks for your comment!
I think that there isn't a "best frontend framework", "best backend language ever", "best database", etc. It always depends on your needs and project requirements and context. I will give you some examples based on my personal opinion:
What I mean is that there isn't a magic general answer for everything in my opinion, you as a developer have to find the best tool for the job.
I hope this was useful for you!
Personally, I have never tried Angular, but I went into React because of the flexibility...having to build from scratch gives some level of flexibility in development..and sure tye learning curve
ES6 makes all things easier in React 😉
I agree with you, Angular can be really intimitading to new devs. I lived that haha.
Great post my friend!
so what do you say @simonramosb ? do you think that new devs will eventually gravitate to angular as they gain experience?
I just did a project in React, and I used exclusively Typescript (.ts, .tsx). So, I do not get your only Javascript quip? Mostnpm libraries have typescript typing whether they are implemented in Typescript or not.
Hi @polar , yes, you are right, I didn't consider that. My experience with React so far has been using only Js, for that reason I've made that "comparison".
All my thoughts writing in this post...great!!!