Cal Shoemaker
Software Engineer

Angular and Amsterdam - NG-NL 2017


NG-NL 2017 Todd Motto


This March the world's best experts and core contributors 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 technologies, 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 referring to SEMVER, or Semantic Versioning, which is basically about adding meaning to version numbers.


NG-NL 2017 2


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 & TypeScript.

Angular v2 & Angular v4
Angular is a development platform for building mobile and desktop web applications.
Karma
A command line test runner created by the AngularJS team.
Protractor
An open source functional automation framework designed specifically for AngularJS web applications.
Istanbul
A code coverage tool for Javascript.
TypeScript 2
A typed superset of JavaScript that compiles to plain JavaScript.
TsLint
A TypeScript linter which checks your TypeScript code for readability, maintainability, and functionality errors.
Codelyzer
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.
@types
Include external Type Definitions.
Webpack 2
Takes modules with dependencies and generates static assets representing those modules.


The Structure


NG-NL 2017 Structure

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';

@NgModule({
   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 similar to dependency 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 update 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.

NG-NL 2017 Code Example

		

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 briefly discussed the value of statically typed scripts in testing, then finalized with questions.


Practical Applications

NG-NL 2017 Unicorn

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:

TODD MOTTO
Angular's Reactive Forms: the hero we need but not the one we deserve.
JOE EAMES
Breaking Bias
WASSIM CHEGHAM
Demystifying Ahead-Of-Time compilation in Angular
URI GOLDSHTEIN
Component based API for your Angular Components with GraphQL
ERIK HADDAD
AngularFire2 and You
ASIM HUSSAIN
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 conceived, 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 inspiration and I can't wait to attend next year.

Kommentare
Es wurden noch keine Kommentare zu diesem Eintrag geschrieben.
Kommentar hinzufügen
Vor und Zuname
E-Mail
E-Mail bei weiteren Kommentaren
Mein Kommentar