I love working with React... So WHY am I switching to Angular? Part 2

Previously I spoke about my history with React JS. If you missed that you can find it find it here.

Hopefully I can keep my focus today to get to the point of why I actually decided to make a switch to Angular for my next project (I might even get to the point of telling what my next project is). Before I do that though...

Ughh... you're going on a tangent again. Stick to the point you blabbering idiot

Wait... this is an important part of the story, promise.

Anyway...

Before I get to why I'm switching I want to give an overview of the differences between the two.

⚠️ Disclaimer:

This is not going to be a tutorial, nor an extensive list of differences. Instead I'm going to try and explain the overarching philosophical and design differences between React and Angular. The first and most important is why I haven't referred to them specifically as libraries or frameworks as of yet.

Library v. Framework

A software library is essentially someone else's code that they let you use in your project whereas a framework is someone else's project that let's you add your code to it in order to do what you want. A library doesn't care to much about how you structure your code, with a framework you have to do things the way it wants you to.

React is a Library

They even say so on their homepage. You structure your app the way you want to, all React does is handle the browser DOM so you can get on with writing code. This also means that you have to make all the design decisions (which libraries you want to use, how you connect to your server, which build configuration to use, etc.). You're also in charge of setting up your project, which as I've eluded to in a previous post, sometimes takes more time than you'd care to spend.

Angular is a framework

Again, just look at the homepage, it's right there. Angular is a batteries included framework which has pretty much everything you need (at least for about 85% cases). Setting up a new app is as easy as typing ng new project in a terminal. In exchange for ease of use you obviously give up the control you had with a library like React. But Angular isn't the strictest of frameworks and let's you stay out late and eat ice-cream for breakfast every now and then.

Mmmmm... Ice cream

The next big difference is the way it renders...

Angular uses templates and two-way binding

This shouldn't come as a surprise since this was their claim to fame (other than being the first browser side MVC framework). With Angular you create almost pure html templates and pure css styles. This makes it great when working in multi-discipline teams. A web-designer can create the html and css styles from his/her mocks which you very easily can convert to templates for your components by just adding the right "ng" attributes. App data is then bound to the template by black magic which results in those demonstrations you always saw when Angular just started of someone typing in a textbox and the page heading changing as they typed.

React doesn't like two way binding

And since using React for a while, I've become less of a fan myself...
With React you create components as objects that extends the library's Component class and implement a render() method. The render method should return a single virtual-DOM element. You'll hear JSX being thrown around when learning React, that is simply a shorthand way to create these virtual-DOM elements. It looks somewhat like html, but don't confuse it for being anything like a template...

...everything is javascript.

React will then call your render method every time your component's state changes, it then updates the actual DOM to look like the virtual DOM created from your app's render method. The entire virtual DOM is re-rendered for every change. Sounds slow, but works fast, trust me on this (says every swindler in history).

Because everything is javascript this makes it a very fun experience for developers, but a little more difficult for a designer to make changes to styling or structure... and really confusing for someone that hasn't seen html inline with javascript before. I remember when I first saw it I thought:

What the hell is this sorcery?

There are many other differences I could talk about, but this post is getting long winded already. And I haven't even gotten to why I've decided to make a switch yet. I'll leave that for the next post.

YOU LYING BASTARD!!! You said you would tell us why you're switching in this post...

Yes, yes, yes. I know, I'm sorry. Next time... I promise...