DEV Community

Cover image for What I learned in 40 hours switching from Angular to React!

What I learned in 40 hours switching from Angular to React!

Hatem Hassan 👨‍💻☕️💻🌺😎 on October 12, 2019

Originally posted on my personal blog I’ve been building webapps with Angular 2+ and Ember.js since 2016 but I never got the chance to start a Rea...
Collapse
 
thorstenhirsch profile image
Thorsten Hirsch

Thank you for writing this article, Hatem. I've always wondered what an experienced Angular developer thinks of React, because ...well, I also switched between these technologies - not once, but twice actually. My first contact was with React. I tried to introduce it in a RoR project using Coffeescript instead of JS. I've read that React was a library only, so I was pretty sure it was possible to integrate it in the V of my RoR project. But using Coffeescript in JSX files (being CSX?) did not work out well. The result was so-so. I was glad to abandon this patchy tech stack recently.

Some years after this React encounter I suddenly had to learn a bit of Angular 2.x in one of my projects. Though I was overwhelmed by JS I somehow felt Angular being a nice and complete framework. The same feeling I had many years ago, when I learned RoR. So with Angular I somehow felt "home". Sure, the learning curve was steep, especially all the ES2015/2016/... stuff, but in Angular I could just follow the documentation in order to know where to go.

Then I switched again to a real React project (with a new backend). Suddenly I felt lost. Even though I knew why e.g. react-router and axios were not part of React, I could not appreciate this freedom. Instead I wished I had a complete framework that gives me the complete technology stack for the frontend.

Yes, a library gives you more freedom than a framework. But it's a 2-sided medal with incompleteness on the other side. It took me quite some time to appreciate React after my encounter with Angular.

Collapse
 
antonrusak profile image
Anton Rusak

What made you finally appreciate the lib?

Collapse
 
thorstenhirsch profile image
Thorsten Hirsch

JSX. I think it's a brilliant concept to build HTML in JS with syntactic sugar that looks like HTML. It's so powerful and yet so simple compared to building HTML in HTML with a special templating language on top or additional HTML tags that you must learn specifically for your framework.

Collapse
 
jianwu profile image
jianwu • Edited

Angular architecture is kinda influenced by backend Java frameworks. ... Otherwise, you have to understand what is dependency injection ...

it's true. Dependency injection just introduces unnecessary complexity. It's killing angular.

By the way, I would also suggest you take a look at VueJS. It's nicely designed focused on developler simplicity.

Collapse
 
johncarroll profile image
John Carroll • Edited

Funny. If I had to point to one major failing of Angular, I'd say it's the structural directive syntax, which leads to ngIf and ngFor being much less ergonomic than the vuejs equivalents. The whole concept of a structural directive, with * being syntax suger around <ng-template> is confusing. I find this to be a big deal, because structural directives are very common / a fundamental building block of the framework. In general, I think structural directives incorrectly push too much logic into the view template (logic which would be better handled in javascript).

Conversely, I find dependency injection to be the single best feature of Angular. But this is why multiple frameworks exist: so some people can choose Vuejs or React, and others can choose Angular.

Collapse
 
iammowgoud profile image
Hatem Hassan 👨‍💻☕️💻🌺😎

Yes I totally agree. I was writing the part about UI and logic seperation with a grain of salt because we still *ngIf and *ngFor in the template.

But yeah at the end of the day if your project doesn't have any extra special requirments, any framework will do. And it becomes a matter of which framework your engineers are comfortable with.

Collapse
 
sonicoder profile image
Gábor Soós

Dependency injection is a good thing. With it you can decouple the creation of a dependency from its usage. It comes very handy at unit testing also.

Collapse
 
antonrusak profile image
Anton Rusak

Agreed. It's just unusual for frontend developers. As Hatem said, backend background helps in understanding this amazing tool. It's pretty complex but is able to improve your app's modular achitecture drastically.

For instance I've used it to create a web analytics reporter. Its logic had to be different depending on from what URL user opened it. So I created an abstract class and injected it to components and services. When the app started, a factory function detected which implementation to use. That's it. Very clear architecture.

Thread Thread
 
jianwu profile image
jianwu

I mainly work on the back end. I understand DI has become a defacto standard in statically typed languages. However, I suffered from DI framework deeply after intensively writing and reviewing Spring or Guice based applications for many years. I saw how productivity gets impacted by overusing DI in many organizations. I'm not against DI pattern, but against the DI framework that brings complexity, magics, ceremonies, and bad practices. I even come out with an alternative solution regarding decoupling, customization, and testing. I call it Injectable Factory. You can take a look if you're interested.

Collapse
 
antonrusak profile image
Anton Rusak

Hatem, will you please tell us: what was the hardest thing for you while switching from Angular to React? I've been using ng for 3 years and interested in trying React. But I have some fear of its complexity. When I see articles about hooks, JSX, all that stuff... Was is that hard?

Collapse
 
iammowgoud profile image
Hatem Hassan 👨‍💻☕️💻🌺😎

I was doing a simple application so nothing was really hard other than getting used to the structure of the project and writing jsx. React has great documentation, you can start from there.

Collapse
 
monfernape profile image
Usman Khalil

That's some note worthy reading.