The Art of Angular in 2016 - Devoxx UK 2016

The Art of in 2016
Photos by McGinity Photo

Matt Raible • @mraible

Blogger on raibledesigns.com
Founder of AppFuse
Father, Skier, Mountain
Biker, Whitewater Rafter
Web Framework Connoisseur
Who is Matt Raible?
Bus Lover

How to Become an Artist
Part 1 of 3: Learn the Basics on Your Own

Take some time and try various mediums of art

Recognize your strengths

Do your research and learn the basics

Get the supplies you will need

Observe the world around you

Make time for your art every day

Seek out the opinions of others

Develop your own style
http://www.wikihow.com/Become-an-Artist

Jobs on LinkedIn
May 2016
0
1,250
2,500
3,750
5,000
Backbone
Angular
Em
ber
Knockout
React

Job Growth
0
750
1500
2250
3000
February 2014 January 2015 September 2015 April 2016 June 2016
Ember.js AngularJS Backbone Knockout React

LinkedIn Skills
May 2016
0
75,000
150,000
225,000
300,000
Backbone
Angular
Knockout
Em
ber
React

LinkedIn Skills
May 2016
0
17,500
35,000
52,500
70,000
Backbone
Knockout
Em
ber
React

Skills Growth
0
75000
150000
225000
300000
February 2014 January 2015 September 2015 April 2016 June 2016
Ember.js AngularJS Backbone Knockout React

Hello World with AngularJS
<!doctype html>
<html ng-app>
<head>
<title>Hello World</title>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="name" placeholder="Enter a name here">
<hr>
<h1>Hello {{name}}!</h1>
</div>
<script src="http://code.angularjs.org/1.5.6/angular.min.js"></script>
</body>
</html>

Hello World with Angular 2
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">


<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
</head>
</html>

Hello World with Angular 2

<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>

<body>
<my-app>Loading...</my-app>
</body>
</html>

app/main.ts
import { bootstrap } from ‘@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

app/app.component.ts
import { Component } from ‘@angular/core’;
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

Angular 2 Choices
Choose a language

JavaScript (ES6 or ES5)

TypeScript

Dart

Anything that transpiles to JS

Setup dev environment

Install Node

Choose Package Manager

Choose Module Loader

Choose Transpiler

Choose Build Tool

ES6 vs TypeScript
https://kangax.github.io/compat-table/es6/

You still have to use a transpiler to  
get ES6 support in IE11

Babel

Traceur

Emerging Stacks
TypeScript
Package Manager: npm

Module Loader: SystemJS

Transpiler: Traceur

Build Tool: Broccoli

ES6
Package Manager: JSPM

Module Loader: SystemJS

Transpiler: Babel

Built Tool: Gulp

Getting Started
Angular 2 QuickStart

https://github.com/angular/quickstart
Angular 2 Seed

https://github.com/mgechev/angular2-seed
Angular CLI

https://github.com/angular/angular-cli

Angular 2 Demo!
Start with angular-cli

Build Search Feature

Data via HTTP

Unit Tests

Integration Tests

Built-in Components
<div *ngIf="str == 'yes'"></div>
<div [ngSwitch]="myVar">
<div *ngSwitchWhen="'A'"></div>
</div>
<div [ngStyle]="{color: colorinput.value}"></div>
<div [ngClass]="{bordered: true}"></div>
<div *ngFor="let item of items;
let num = index"></div>

Angular 2 Forms
Forms can be complex

To help, Angular provides

Controls

Validators

Observers

Control
let nameControl = new Control("Abbie");
let name = nameControl.value; // -> Abbie

// now you can query this control for certain values:
nameControl.errors // -> StringMap<string, any> of errors
nameControl.dirty // -> false
nameControl.valid // -> true
<input type="text" ngControl="name">

Control Group
let vehicleInfo = new ControlGroup({
make: new Control('VW'),
model: new Control('Deluxe Samba'),
year: new Control('1966')
});
vehicleInfo.value; // -> {
// make: "VW",
// model: "Deluxe Samba",
// year: "1966"
// }

FORM_DIRECTIVES
import { Component } from ‘@angular/core';
import { FORM_DIRECTIVES } from ‘@angular/common';

@Component({
selector: 'vehicle-form',
directives: [FORM_DIRECTIVES],

ngForm
directives: [FORM_DIRECTIVES],
template: `
<h2>Vehicle Form</h2>
<form #f="ngForm"
(ngSubmit)="onSubmit(f.value)">
<label for="name">Name</label>
<input type="text" id="name"
placeholder="Name" ngControl="name">
<button type="submit">Submit</button>
</form>`

ngSubmit
export class VehicleForm {
onSubmit(form: any): void {
console.log('form value:', form)
}
}

FormBuilder
export class VehicleFormBuilder {
myForm: ControlGroup;
constructor(fb: FormBuilder) {
this.myForm = fb.group({
'name': ['Hefe']
})
}
}

ngFormModel
<form [ngFormModel]="myForm"
(ngSubmit)="onSubmit(myForm.value)">
<input type="text" id="name" placeholder="Name"
[ngFormControl]="myForm.controls['name']">

Validation
constructor(fb: FormBuilder) {
this.myForm = fb.group({
'name': ['', Validators.required]
})
}

Validation
<div class="form-group"
[class.has-error]="!myForm.find('name').valid
&& myForm.find('name').touched">

Validation
<input type="text" id="name" placeholder="Name"
[ngFormControl]="myForm.controls['name']"
#name="ngForm">
<span *ngIf="!name.control.valid" class="help-block">
Name is invalid
</span>
<span *ngIf="name.control.hasError('required')"
class="help-block">Name is required</span>

Data Architectures
MVW / Two-way binding

Flux

Observables

Observables and RxJS
Promises emit a single value whereas streams emit many values

Imperative code “pulls” data whereas reactive streams “push” data

RxJS is functional
Streams are composable

Style Guides
John Papa’s Angular Style Guide

https://github.com/johnpapa/angular-styleguide

https://angular.io/docs/ts/latest/guide/style-guide.html

Minko Gechev’s Angular 2 Style Guide

https://github.com/mgechev/angular2-style-guide

Upgrading from Angular 1.x to 2.x
Big Bang

Incremental

ngUpgrade import {UpgradeAdapter} from ‘@angular/upgrade';
var adapter = new UpgradeAdapter();
var app = angular.module('myApp', []);
adapter.bootstrap(document.body, ['myApp']);

Cool Projects
Web Workers and Service Workers

Universal Angular 2

Electron

ng2-bootstrap and Fuel-UI

Angular watchers

JHipster, baby!

ng-book 2
A comprehensive guide to developing with
Angular 2

Sample apps: Reddit clone, Chat with RxJS
Observables, YouTube search-as-you-type,
Spotify Search

How to write components, use forms and APIs

Over 5,500+ lines of code!

Who’s using Angular?
Made with Angular

https://www.madewithangular.com

Built with Angular 2

http://builtwithangular2.com

5 things Angular

@5thingsAngular

When will Angular 2 be released?

How to Become an Artist
Part 2 of 3: Learn from Others

Enroll in local art classes

Study the masters

Go to art school

Make friends in the artist community

Visit art studios
http://www.wikihow.com/Become-an-Artist

Shortcut to becoming an Angular Artist
JUST DO IT.

Contact Me!

http://raibledesigns.com

@mraible

Presentations

http://slideshare.net/mraible

Code

http://github.com/mraible
Questions?

Scott Davis’s Angular 2 Training
http://shop.oreilly.com/category/learning-path/on-the-road-to-angular-2.do

2016 Angular 2 Tutorials
Getting Started with Angular 2

http://raibledesigns.com/rd/entry/getting_started_with_angular_2_rc1

Testing Angular 2 Applications

http://raibledesigns.com/rd/entry/testing_angular_2_0_rc1

Helpful Articles
Angular 1 to 2 Quick Reference

Scott Davis’s Getting Ready for Angular 2

Testing Angular 2 with Karma and Jasmine

Angular2 Observables, Http, and separating services and components

Managing State in Angular 2 Applications

Create a Desktop App with Angular 2 and Electron

The Art of Angular in 2016 - Devoxx UK 2016

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (15)

Similar to The Art of Angular in 2016 - Devoxx UK 2016

Similar to The Art of Angular in 2016 - Devoxx UK 2016 (20)

More from Matt Raible

More from Matt Raible (20)

Recently uploaded

Recently uploaded (20)

The Art of Angular in 2016 - Devoxx UK 2016