React & Angular — the battle of the framework and library

What I learned from learning React in 2 nights after years of working with Angular

And I think I’m ready to make something

It’s kind of awkward when you make a public announcement to commit yourself to becoming an Angular god and the only jobs available in your area requires React — with little or no mention of Angular at all. So after much thought and contemplation (and mostly for physical survival reasons), I decided to jump off the Angular gangplank and deep dive into the big blue ocean waters of React.js.

It turns out, if you’ve been around for a while, all code is the same — just written differently. The basic and core knowledge of JavaScript and building blocks logic was not much of a leap when I tried out React — just rearranged differently and with a few new (but not new) ideas. I think having a good understanding of Angular also helped.

Here are the things I learned from learning React in 2 days.

It’s all JavaScript

React is like a slimmed down, essentials only library that can plop into an existing project without the need to do a complicated setup. Angular 1 used to be like that. Angular 2+ requires more leg work and it’s easier to have a fully Angular 2+ project than a hybrid one.

React is very portable — which explains why its popularity grew so quickly. I could, in theory, put React code anywhere without causing many issues or require a massive setup. The fact it resembles vanilla JavaScript in parts makes it easier to understand for pure front end developers. Angular 2+, however, is more geared towards convincing back end developers to move into front end.

No implicit state changes

From what I understand so far, what you give to React is what React renders. Unlike Angular, if you give it a checkbox, that checkbox will work as expected (i.e. you click on it and it checks/unchecks). With React, you have to explicitly track the state change in order for it to have a reaction of sorts to your events.

This is because React ‘paints’ an immutable state on the DOM, which means no one can change it unless you tell it to.

Props

Similar concept as Angular but less code required to access it — it’s already there and imported for you by React. All you need to do is use props.whateverYourPropertyNameIs to access it in functional components, or this.props.whateverYourPropertyNameIs for class based components.

You’re going to need a design doc

You’re going to need a design doc anyway for any project. But for React, you’re definitely going to need it more than ever. A design doc is basically a document that gives you an overview of the functions you need, how the logic connects to together and all the notes you’ll need to structure your code. It’ll prevent your code from turning into a bowl of spaghetti.

The library looks easy to implement — which can give rise to lazy coding. Lazy coding creates technical debt. Plan your logic. It’ll help you code faster and better.

Everything is in one space

CSS, HTML, functions, classes, vanilla JavaScript and a sprinkle of React is mushed together into one document. You can technically do this in Angular 2+ if you tried hard enough but it’s not advocated or taught anywhere.

React encourages it.

This can be a bit weird if you’re used to building apps in an MVC kind of structure where everything needs to be separated or special functions and parsings are required to make it work. With React, you code with the end HTML output in mind — and react puts it all together for you. With Angular, you create your view and sort out your logic in your components.

Slower speed of change

Versioning numbers and updates aren’t as scary as Angular. Or perhaps, a lot of developers are still scared from the massive learning curve jumps between Angular 1 and Angular 2.

React seems to only update their major release number every other year with changes pushed out slower than Angular. This makes learning new things possible and not as scary as Angular 2+.

Angular 2+ has a major release every 6 months — which can be quite overwhelming for new and even seasoned developers who just want to build things rather than worry about backward compatibility.

When React changes, it’s only a few little things at a time.

It seems too easy

Over the past 2 nights, I found React stupidly simple. In fact, it’s too stupidly simple. So it makes me question, what’s the catch?

It turns out that there is a thing called Redux which comes into play at some point. React and Redux works as a pair for some reason and I’m going to find out why.

With Angular 2+, you know it’s going to be a learning curve and that the tutorials only cover the tip of the surface. But with React, it seems like what you see in the beginner’s tutorials all basically all you need, plus a few other things like protected routing and authentication implementation. No one really hints at anything beyond that. The Angular community however lets you know that there’s a lot more to come right away.

But React’s official docs is also significantly smaller than Angular’s.

I’m now waiting for that aha! moment where I uncover React’s dirty little secrets — if there are any. Maybe the React and Redux pairing will enlighten me.

Final Words

So I’ve learned the basics. Or rather, I sat through 2 nights of YouTube and Google starter React articles. During that time, I often compared it to Angular — simply because it’s easier for me to learn the library by comparing it to what I already know.

Despite my vows to become an Angular god, I still stand by my words that all tech is the same — there are still loops, functions and other building blocks of logic — and only syntax and structure is different. It’s just how the library requires you to write your code and how to interact with what you need that makes it different.

Obviously, React and Angular are very different in structure but at the end of the day, it’s still just JavaScript. React takes it even further by encouraging vanilla JavaScript. They’re really taking it back to the OG days of vanilla front end coding but with a bit more personality and ease of use.

So far, I’m liking it but its simplicity makes me suspicious.

Which brings me to my final conclusion that I just need to build something. The features will need to include CRUD, authentication and route protection — which is basically 95% of the Internet. If I can figure this out, then I’m sorted to build future apps without much of a hitch.

Give me a few days to see what I can make — then maybe a fully nerded out series of lessons learned/technical posts will follow.


I am taking a personal depth year — the quest to master the things I care about. Thank you for reading.

Aphinya