So…my plan for these couple of weeks was to start learning NativeScript or ReactNative. Well, it turns out that neither one of those options work for me.

For one, ReactNative seems to work solely on OSX. I only have a Windows machine and a low-power Arch machine. So that’s out of the question.

Second, I tried to work with NativeScript. It was a lengthy installation process (mainly due to Android’s lengthy installation process); however, what made me stop considering it had nothing to do with NS and all to do with Android. Apparently, the newest Android versions use emulator images that require Intel CPUs. I’m sporting an 8-core AMD which means no emulation via AVD. I tried Genymotion (an emulator alternative) but got stuck trying to workout its kinks.

My solution is to skip it until I’m a little more patient (which won’t happen).

Let’s move onto Typescript first and then we can discuss Angular 2.0 🙂

TypeScript

Motivation

Why TS? It’s fun to learn new languages that compile into JS (I’m looking at you Elm!) especially ones like TS which builds on top of existing JS principles. TS is also the main language for Angular 2.0 and NativeScript as well as other platforms.

It’s typed which is awesome!

Initial thoughts

First of all, I don’t know much about TS. I’ve used ES6 for most of the year this year and am loving it. There are some challenges in trying to use it (having to install Browserify, making it work with Babel, and a separate back-end implementation) so I wonder how TS will tackle these issues.

Luckily, before I get into the nitty gritty of production TS, there’s a playground!

First impressions

TS is actually pretty cool. Just after learning some basics, it seems very ES6-like with the addition of type-checking and a few class-oriented features (like interface, which is awesome). It also provides some helpful methods like setting public variables in a class:

class SomeClass {
    constructor(public myPubVar1, public myPubVar2) {

    }
}

This way, you don’t have to go through each argument and manually write these out.

Next, the compilation. A lot of the code that you write in TS gets removed. JS has no type-checking, it has no interfaces, etc. which is great because you get to see what happens behind the scenes and TS does its job as long as it needs to (which is not at runtime).

Which brought me to a new point, is TypeScript based off ES6 or ES5? Does it provide its own way of dealing with classes but ignores other ES6 features (like the fat arrow)?

I decided to investigate into this.

Tooling

TypeScript comes with a CLI and I quickly found an interesting tool called tsd, TSD is a CLI tool that pulls from a site called DefinitelyTyped. This site houses interfaces for popular libraries. Checkout the typedef file for jQuery. In a weird way, TSD is its own package manager as it’ll keep a list of type dependencies. So now you’ll be installing jquery with bower and tsd alike.

Overall impression

There were a few things that I learned along the way that I think are worth mentioning:

  1. typescript is not ES6. It has some ES6 and ES6-like features.
  2. the type system, interfaces, etc. are not compiled into the code. There is no runtime type-checking
  3. TS does include some utility functions but those are compiled into the code only if they’re used. This is pretty cool. And they’re compiled only once into the code.
  4. TS seems to try to prefer using native methods vs. anything TS-specific. In the case of decorators, the utility function checks if JS Reflection is available.

Angular 2

Motivation

I’m an Angular dev first and foremost. I wanted to do an article solely on TypeScript but after spending a few days with it, it was apparent that Angular is the best way to pick it up.

First impression

Angular 2.0 seems to be pretty neat. There are a few big changes from Angular 1.X iterations:

  1. there are no factories, providers, etc. Everything is now bundled under services or just plain modules
  2. there are no controllers or directives. Only “components” which work like a hybrid of the two.
  3. no $scope or $digest. Watching properties and two-way binding is handled completely differently now.
  4. The integration of Angular 2 and TypeScript is amazing and Angular takes full advantage of it.
  5. Dependency injection is wholly revamped. However, my biggest surprise was seeing that basic directives like NgIf and NgFor require being separately injected into the view part of the component.

When you dig into Angular 2, you’ll start to feel like Angular 1.X is wholly obsolete. Angular 2 is component based. What this means is that your application will look a lot more like ReactJS. You’re no longer binding controllers straight onto html like so: <div ng-controller="myController as ctrl">, nor are you using a controller to do that job. You simply create a component like <my-app></my-app> and your component class associated with that tag will load.

Read Daniel Brian’s Sane, scalable Angular apps… article. One of the first things it suggests is to “Make everything a directive”. This is pretty much how Angular 2 works.

The syntax is really dead-simple as well:

@Component({
    selector: 'my-app'
})
@View({
    template: '<h1>Html goes here {{ someVar }}</h1>'
})

class MyAppComponent {
    name: string
}

Since there is no scope, there is no confusion between properties in HTML that come from a controller or scope. Anything that’s public on your component class is available straight in the template, like name in the example above.

Also, did you know that Angular suggests using JSPM? You know what’s JSPM? A polyfill for a future ES feature for dynamic module loading! Which is great news.

Overall impression

It’s definitely not production-ready. The docs are incomplete, and it’s difficult to find answers for your questions.

For instance, it took me good 30 minutes to figure out how to bind raw HTML. The docs didn’t say, searches came up with nothing but finally, in the end, I found a small snippet:

<div [inner-html]="{{ rawHtml }}"></div>

The framework feels more javascripty and HTMLy than before where it did a lot of its own stuff. It uses modules AND dependency injection so you can either roll your own system for introducing external modules (such as by using import) or you can use DI. The DI is great for configurable modules that you might want to declare in your initial bootstrapping process and then have the rest of application hook into that module.

And while there is ngModel directive you can use, you can also hook into local variables which are really badass.

Check this out:

<textarea #my-md></textarea>

The pound sign declaration creates a local variable. You know what’s in that variable? The element great post to read. You can use #my-md to access any part of the textarea element. So, doing {{ myMd.value }} will show you that textarea’s value. However, it’s not that simple, the local variable is not two-way bound so you’ll have to figure out your own logic to update it.

I think Angular 2 is a huge step-up from Angular 1 and while it does share some ideas with React, it feels like an awesome standalone MVC framework for the front-end.