C. S.

Angular and Amsterdam NG-NL 2017

Geschrieben von Cal Shoemaker veröffentlich am in der Kategorie Allgemein
Angular & NG-NL 2017
This March the world's best experts and core contributers to Angular, a dynamic Single Page Application framework, held a two day multi-track conference in Amsterdam. NG-NL 2017  began with a training day introducing Angular v4 hosted by Gerard Sans followed by a conference day with various workshops and discussions. It was rad. In this article I will discuss the canonical technolgies, design patterns, and nomenclature that were introduced.

Welcome to Angular v4 with Gerard Sans

Gerard, a Google Developer Expert who runs AngularJS Labs London, was the host of training day. He began by setting the record straight on nomenclature: "Going forward Angular technologies version 1.X will be known as AngularJS, everything else will be simply Angular". He is refering to SEMVER, or Semantic Versioning, which is basically about adding meaning to version numbers.


With nomenclature cleared up we began by setting up our development environment with the Angular v4 Webpack Starter (angular2-webpack-starter) by @AngularClass.

What's in the Box?

The Angular v4 Webpack Starter is a seed repo that serves as an Angular v2 & v4 starter for anyone looking to rapidly deploy an environment running Angular 2 and TypeScript. Webpack 2 is a package builder used to package a solution for deployment. The Webpack Starter is a full suite of tools, however, we will focus on the core technologies of Angular and TypeScript.

Angular v2 & Angular v4
Angular is a development platform for building mobile and desktop web applications.
A command line test runner created by the AngularJS team.
An open source functional automation framework designed specifically for AngularJS web applications.
A code coverage tool for Javascript.
TypeScript 2
A typed superset of JavaScript that compiles to plain JavaScript.
A TypeScript linter which checks your TypeScript code for readability, maintainability, and functionality errors.
A set of tslint rules for static code analysis of Angular TypeScript projects.
Hot Module Replacement
A feature to inject updated modules into the active runtime.
Include external Type Definitions.
Webpack 2
Takes modules with dependencies and generates static assets representing those modules.

The Structure

webpack starter

The structure is straight forward. We have a few root config json files as well as a config and src folder. Those familiar with AngularJS and ES5 development will recognize some familiarities in the structure. Although Angular is a new framework leveraging ES6 & TypeScript, we will occasionally observe similarities in concepts from AngularJS & ES5.

Angular Components

A Component is a special kind of module that uses a simpler configuration which is suitable for a component-based application structure. This makes it easier to write an app in a way that's similar to using Web Components or using the new Angular's style of application architecture. An Angular component will always follow this structure: imports section (angular, vendors or application imports), component annotations (@Component) and the component definition (ES6 class).

import {Class} from 'sourcefile-without-extension';
@Component({ option: value })
export class ComponentName {
   constructor() { }


Bootstrap Angular with NgModule

An application starts with a call passing in the root module (AppModule) that sets the global dependencies and the root component (AppComponent). The import statement allows us to cherry-pick components instead of loading the full source into the browser.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

   bootstrap: [ AppComponent ],
   declarations: [ AppComponent, ... ],
   imports: [ BrowserModule, ...]
export class AppModule { }


AngularJS developers will identify a clear syntax deviation from ES5. Conceptually it is an intuitive component implementation similiar to dependancy injection in AngularJS with ES5. TypeScript leverages Decorators, Classes, and Modules while providing optional static type-checking to enable more explicit implementation of scripts.

Gerard walked us through three increasingly sophisticated examples using this pattern. The first was a clock implementing setInterval to udpate the time. The second was a user list implementing a service by importing the HttpModule. The third was a Wikipedia search using JSONP and leveraging Observables.

Promises Out - Observables In

An Observable is like a Stream (in many languages) and allows to pass zero or more events where the callback is called for each event.

First we imported the ReactiveFormsModule which leverages Observables.

import { ReactiveFormsModule } from '@angular/forms';


Then we wrote a component.

    <input type="text" [formControl]="search">
             <li *ngFor="let result of results | async">{{result.title}}</li>
export class WikipediaComponent {
public search = new FormControl();
public results;
constructor(private jsonp: Jsonp) { }


Finally we wrote a service.

return this.jsonp
.get(this.WIKIPEDIA_URL, searchParams(term))
.retryWhen((errors) => errors.delay(3000))


Observables also have the advantage over Promises in that they are cancelable. If the result of an HTTP request to a server or some other expensive async operation isn't needed anymore. The Subscription of an Observable allows to cancel the subscription, while a Promise will eventually call the success or failed callback even when you don't need the notification or the result it provides anymore.

Concluding the first day

After completing three examples Gerard ran into some technical difficulties which consumed the remainder of our time. He had included a fourth example implementing forms, as well as ES6 Karma tests. Gerard breifely discussed the value of staticly typed scripts in testing, then finalized with questions.

Practical Applications


The conference portion of the event consisted of options between workshops and talks. The theme was Practical Application and displayed the engineering you could do with the architecture of Angular and TypeScript integrated with supporting technologies. We attended:

Angular's Reactive Forms: the hero we need but not the one we deserve.
Breaking Bias
Demystifying Ahead-Of-Time compilation in Angular
Component based API for your Angular Components with GraphQL
AngularFire2 and You
ngRx the last piece in the Angular architecture puzzle.

The Future of Client Side Object Oriented Programming

NGNL 2017 was right on track with the status quo: a movement away from an implicit client side in lieu of a more explicit one. Modular development is great in that it allows features to be concieved, developed, and tested in a vacuum. Intelligent entities such as Observables scale down the communication between the client and server - increasing performance. Additionally the implementation of standards such as SEMVER clarifies working environment versions.

Client and Server Side developers will discover endearing features in the Angular2 TypeScript domain. Personally coming from an AngularJS background - I find myself encouraged to learn more about these 'emerging' technologies. Conferences such as NGNL 2017 are an inspiriation and I can't wait to attend next year.