Using Angular + TypeScript

I've picked up Angular as the primary framework for the frontend application, and I'm impressed. Angular2 combined with Typescript is a very sane combination of tools that has let me organize things in a clean way, and quickly build something that is customer-ready. Confusingly, they named the framework Angular instead of Angular2, and Angular1 is correctly known as AngularJS. I've been using it for about a week, and here's what I think.

Angular

I had a strong background in AngularJS, comfortable with all the features from directives using transclusion up to HTTP interceptors updating application status indicators. Angular has simplified a lot of the conventions (AngularJS "directives" are now just "components", and there are no controllers). They've also introduced a really interesting Dependency Injection Framework which uses reflection and decorators to make everything work.

@NgModule({
  declarations: [
    SomeComponent,
  ],
})
export class SomeModule { }  

The @NgModule decorator defines SomeModule as a module in the framework, which can then be included into other modules. You may also define what this module imports and exports (in addition to some other features like registering a provider). This module thing is probably the hardest part of the framework to get your head around, and it really doesn't take too long to grasp once you write a module.

The framework also provides some straight-forward features like using a resolver around a service to load data from an API endpoint and inject it directly into your component when changing routes.

It also heavily encourages the use of Observables through Rx.js. They offer a few advantages over using a promise, but I've yet to see something at a large enough scale with them to really feel like I'm using them to their full advantage yet.

TypeScript

When I first heard of the language my initial thought was "wow, this is going to be a headache", but actually, this has been a lot of fun.

Sure, the types are cool. I like that I can define my own types and even make type guards that let me define bool | string | User as a single type. However, there's two other killer features that won me over.

First, the constructor:

class SomeComponent() {  
  constructor(
    private route: ActivatedRoute,
  ) { }
}

When you pass an instance of an ActivatedRoute to a new SomeComponent it sets up a private on the instance (Oh, did I mention this language features visability? No more __pelase_dont_access prefixing!). And if you're using Angular's DI Framework, the injection of the router is already done for you.

The second big feature is the decorators. You've already seen that classes can be decorated, but so can functions. If you've used python I'm sure you think that's cute. But wait. Look at this:

export class SomeComponent {  
  @Input() tactic: Tactic;
}

You can decorate a property to extend some behavior. Angular uses this to define what properties are updated, and which ones are emitting values.

But wait that's not all!

class Example {  
    getUserEmail(@UserLookup user string) { }
}

That's right, you can decorate parameters.

Training

If you're an experienced developer I'd say skip the Hero tutorial and flip through these amazing training slides.

Then pick up a seed project such as https://github.com/mgechev/angular-seed which is fairly robust and has a lot of features that you'll want eventually anyway.

Awkward stuff

I've noticed a few rough spots as a developer with this choice. I want to use material design, however, the material2 project is still a work in progress and some previous features in AngularJS are not being 1:1 ported over, so some re-education and discovery of flex-layout will go far.

I've also had some issues getting a number of traditional JS libraries integrated, you may find you have to explore how the build system for your project works. There is a concept of "typings" to port in libraries, but I've also run into other strange edge-cases I'm haven't started looking into the cause of just yet (for instance, when I import a markdown parsing library with typings and UMD, it refuses to import index.js as a default). I've also found the transpiler target needs to be ES2015 or otherwise the transpiler will start trying to incorrectly parse template strings. Lastly, I've had one more annoying issue with my tests using async functions and targeting ES2015 at the same time.

But overall, this has been a really good development experience and I'd encourage you to give it a shot if you're curious.

Special note about immutability/redux/state

Because everyone's really psyched about state these days in JS, go look at https://github.com/angular-redux before you tell yourself "no I don't want to deal with all that mutated state" :)