Why React? Why not Angular 2?

By Dave Ceddia

As Angular 1.x gets older and Angular 2 picks up steam, many 1.x developers are wondering what to do next. Should you pick Angular 2? Maybe React? Something else?

I’ve also gotten some questions from readers recently about why I’ve been starting to write about React instead of Angular 2.

Why React over Angular 2? Well, I started off with Angular 2 as it seemed like the logical progression from 1.x.

Imports and Dependency Injection

Right away it seemed very complicated to write. There’s a lot of ceremony: import the module, then put it in the providers array, then inject it into the constructor, then assign it to an instance variable.

That’s 4 times typing the same name before I can even use it for anything.

YO DAWG

Oh and one more place: when you bootstrap the app, you have to give it a list of providers for things you’ll want to inject later. It’s one more thing to remember, and one more thing that can cause your app to error out.

The reason for all this is to wire up the dependency injection system.

With Angular 1, we needed that DI system because it also doubled as a module system. But now that modules have come along, and transpilers that enable us to use those import and/or require statements, I don’t see a whole lot of benefit to dependency injection. Just import what you need, and use it.

Testing gets a little harder without framework-level dependency injection, but there are some solutions out there.

Angular-specific Syntax

One of the oft-cited benefits to Angular is that it’s more approachable for our non-coding brethren. “Designers can go in and just change the HTML, without knowing anything about JS,” the story goes. Now, I’ve never been in a position with a workflow like this, so I can’t really speak to how well it works (if you have, leave a comment below).

So Angular 2 carries this benefit as well, sticking with the philosophy of putting “JS into HTML” instead of “HTML into JS.”

Except the stuff Angular understands in its HTML is not quite real JS. It’s a subset. And that abstraction is leaky. It works great, until it doesn’t. You end up second-guessing the code you’re typing into those strings.

On top of the JS-like syntax, there’s the stuff that isn’t JS at all. Angular 1 had things like ng-repeat="item in items" and ng-click="doStuff()". Angular 2 switched it up a bit because people found the Angular directives confusing, so now it’s *ngFor="let item of items". There are also 2 other ways to write it, and some more variables it can inject too.

Angular Dev Cycle

Or, in React, you can write this:

let List = function({ items }) {
	return (
		<ul>
			{items.map(item => 
				<li key={item.id}>{item.name}</li>
			)}
		</ul>
	);
}

The code inside the braces is real, actual JavaScript (plus the JSX li). It has access to everything in the current scope as you’d expect, and it probably does what you think it does :)

TypeScript

I’m not a huge fan of TypeScript and static typing generally. It has some benefits, sure – better IDE integration, better autocomplete, and better assurance you didn’t make any typos…

But I don’t want to wrap every class in an interface so that I can subclass that interface with a mock instance so that I can write my unit tests. I don’t think that leads to better design or more maintainable code, just more code.

Part of the power of JS is the loose nature of it, and I actually enjoy that part of it :) I know the community is divided on this point: half of the people reading this are probably nodding along, and the other half probably think I’m insane (“JS is awful! TypeScript turns it into a proper language!”).

Officially, you can write Angular 2 in JS, and it works, but there’s not much support yet. I think most people will go with TypeScript, and writing in JS will be an uphill battle every time something breaks, because there won’t be many Stack Overflow questions or other community support.

React

So if you put a gun to my head and made me choose right now… my preference right now is for React. It’s simpler to write (at least, plain React), and easier to figure out what your code is going to do when you write it. You need to learn JSX, but after that, it’s basically just JavaScript.

Redux adds quite a bit more complexity, more to learn, and more decisions to make. But even still, it’s possible to understand what the library is doing behind the scenes, once you understand the concepts.

With Angular 1, it felt like the rabbit hole always went deeper. The more I learned, the more there was to learn. Compiling elements by hand, intercepting the digest cycle, and learning all these Angular internals… React doesn’t feel that way – the abstractions are much cleaner.

With Angular 2, I’m a bit worried that there’ll be even more (and more complicated) internals to learn. Or at least, relearn.

In any case, that’s where my head is at right now. What do you think? Which would you choose for a new project?

Leave a comment! Send an email! Let’s have a discussion about it.