Seit etwas mehr als 20 Jahren ist JavaScript ein fester Bestandteil der Webtechnologien um clientseitig-dynamisch Seiten zu realisieren.
Auch wenn über die Jahre immer mehr Bibliotheken die Funktionalität erweiterten und Javascript 2004 mit AJAX eine Frischzellekur bekam, so fehlte noch ein Kozept für eine einfache Präsentationslogik, die es dem Entwickler erlaubt sich auf die Businesslogik zu konzentrieren.
Diese Lücke versuchen Angular und Material zu schließen.

Da Material für Agular 2 wohl noch einige Reifezeit benötigt, können wir produktive Anwendungen vorerst nur mit Angular 1.x und dem dazugehörigen stabilen Material-Modul umsetzen. Trotzdem wollen wir den Migrationspfad zu Angular 2 offen halten und schon jetzt TypeScript einsetzen.

Die gute Nachricht: Hierfür gibt es bereits TypeScript Definitionen und man kann jetzt schon den Code für die Zukunft rüsten. Zudem ist TypeScript deutlich Ausdrucksvoller als Vanilla-JavaScript, was die Lesbarkeit ebenfalls deutlich erhöht.

Der Code für eine Komponente könnte dann etwa so aussehen:

import * as ng from 'angular';

/** Component name and selector */
export const COMPONENT_NAME: string = 'myApp';

/**
 * The application component controller
 *
 * In Angular2 components are classes, in Angular1 they are
 * definitions and the controller is in fact the component 
 * implementation
 *
 * This implementation reflects the way it is done in angular 2
 */
export class ApplicationComponent
{
 /** ng1 injector definition */
 static $inject: string[] = [ '$scope' ];

 /** The current scope */
 private scope: ng.IScope;

 /** property bound by the template directive */
 public myInputProperty: string;

 /** Constructor */
 constructor(scope: ng.IScope)
 {
 this.scope = scope;
 }
}

/** Define the component for Angular1 */
export const Ng1AppComponent: ng.IComponentOptions = {
 controller: ApplicationComponent,
 templateUrl: 'assets/templates/app.html',
 bindings: {
 myInputProperty: '<'
 }
};

Selbstverständlich gibt es hier noch Optimierungspotential und der Code kann mit TypeScript/ES6 Decorators noch näher an den Stil von Angular2 angelehnt werden, was den Migrationsaufwand wieder deutlich verringert.

Wie bekommen wir diese Komponenten aber nun performant im Browser lauffähig? Auch hierfür gibt es hervorragende Tools. Wir haben uns für Browserify und Gulp entschieden. Diese beiden Tools sind sehr mächtig und flexibel, verursachen dadurch viel zusätzlichen Code zum bauen eines Projekts (Boilerplate-Code). Da unsere Entwicklungsprozesse standardisiert sind, haben wir diesen in eine Bibliothek ausgelagert und können das Buildfile nun auf ein Minimum reduzieren:

var GulpTools = require('luka-gulp-tools');
var build = new GulpTools(__dirname);

build.sass() // Build sass files
 .ts('app') // Build the 'app.js' bundle from TypeScript
 .build(); // Create the build configuration

Dieses kleine Tool konfiguriert die Gulp Instanz für produktive und Entwicklungsbuilds. Im hintergrund passiert folgendes:

• CSS wird aus den SCSS Quellen in src/scss/ gebaut und unter assets/css/ abgelegt.
• Eine JavaScript-Datei wird für den Einsatz im Browser aus den TypeScript Quellen in src/ts/ gebaut und unter assets/js/ abgelegt.

Es werden dafür zwei Haupt-Tasks in Gulp definiert:

• „build“ Für den produktiven Einsatz
• „watch“ Für die entwicklungszeit

In Zukunft für Angular 2 könnte Rollup Browserify ablösen um noch bessere Code-Optimierungen zu erzielen. Dank Gulp völlig transparent für den Entwicklungsprozess.