React vs. Angular 2 — Initial Thoughts

I’ve been digging into Angular 2 after spending the better part of 2016 on a React project, and I wanted to write down my initial reactions in order to revisit them in the future and see how, and if, they change.

Bundle Size

A common complaint made about Angular 2 is that the dependencies required to get going are huge compared to React (something like 4x the size I think I read). In practice, I’m not sure that I care about this at all. After a few months of working in React I’ve imported 6,000 different libraries to do 6,000 different things, so I’ve got some suspicions that the final compiled project size would be that much smaller in React.

Verdict: Probably React, but likely a draw

TypeScript

My wife is in the Army, and doing anything in the Army (like taking leave) requires filling out six different forms and having them signed off on by six different bosses. Two weeks into learning TypeScript and it feels exactly like what that looks like. It feels over-engineered, littered with apparent redundancies, and the logic of what exactly is happening is really, really opaque at times.

That said, once you get going the associated tooling is pretty amazing. It feels like my editor knows more about my project than I do at times. I can see how this would be really, really helpful if working on a project at scale with lots of contributors. For projects that only have a handful of people, I think it’s probably overkill.

React is just Javascript.

Verdict: React for most things, Angular 2 at scale

Other Libraries

I’m going to go ahead and call this a draw as well. Learning Typescript is at least as much of a pain as trying to learn Immutable (and you’ll be a lot better off trying to learn Immutable after learning Typescript because the docs are all written in Typescript). I haven’t gotten into ngRx enough to compare it will Redux, but based on how tightly lots of Angular 2 functionality and structure maps to React concepts I bet it’s probably equivalent.

Verdict: Draw

Syntax

Angular 2 syntax compared to React seems ugly too. In React, to pass data to a child component can be as simple as dumping it in via the parent component’s render function:

import { ChildComponent } from ...
...
render() {
  const msg = 'Display me!'
  return (
    <ChildComponent message={msg} />
  )
}

Accessing this data in the child component is easy too:

const ChildComponent = ({ message }) => (
  <div>{message}</div>
)

Want to do some type-checking on the data? Not a problem.

import React, { PropTypes } from 'react'
const ChildComponent = ({ message }) => (
  <div>{message}</div>
)
ChildComponent.propTypes = {
  message: PropTypes.string.isRequired
}

Doing the same thing in Angular 2 is way, way more complicated. Here’s the parent component:

import { Component } from '@angular/core'
@Component({
  selector: 'parent-component',
  template: `
    <div>
      <child [message]="message"></child>
    </div>
  `
})
export class ParentComponent {
  constructor() {}
  message: string = 'Display Me';
}

And the child:

import { Component, Input } from '@angular/core'
@Component({
  selector: 'child',
  template: `<div>{{message}}</div>`
})
export class ChildComponent {
  constructor() {}
  @Input() message: string = 'Default Message';
}

But displaying the child within the parent isn’t as easy as just importing the child component into the module where the parent component is declared. They both have to be imported and declared up in the Angular module (which is a specific Angular thing, not just an ES6 module) which contains them.

As I currently understand it, this probably has some advantages in the long-term, as you can freely mix any component declared in the containing module in with any other contained component without explicitly importing it all over the place. I also like how Typescript moves the type-checking to the point at which it’s declared, but this <child [message]="message"></child> is just gross.

Verdict: React

JSX vs. Templates

I can go either way on this. Moving everything into a single file with JSX is great for simple components (no toggling back and forth between tabs with templates, tabs with styles, tabs with JS) and debugging (console.log right in the “template”), but I did find that the files tended to get 3x-5x the height of my screen on occasion, especially if you’re using something like Radium to do the styling in JS as well. Breaking things out into separate CSS / TS(JS)/ HTML files in Angular 2 is a pain, but the benefits of editor tooling for each specific file type seems to outweigh the cost of switching back and forth.

Verdict: Angular 2

I’ll might add to this post as I get deeper into Angular 2.