The Art of Angular in 2016 - vJUG24

The Art of in 2016
Photos by McGinity Photo

Matt Raible • @mraible

Developer Evangelist at Stormpath
Java Champion
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 (US)
September 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 September 2016
Ember.js AngularJS Backbone Knockout React

LinkedIn Skills
September 2016
0
100,000
200,000
300,000
400,000
Backbone
Angular
Knockout
Em
ber
React

LinkedIn Skills
September 2016
0
20,000
40,000
60,000
80,000
Backbone
Knockout
Em
ber
React

Skills Growth
0
100000
200000
300000
400000
February 2014 January 2015 September 2015 April 2016 June 2016 September 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.8/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 { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
platformBrowserDynamic().bootstrapModule(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

Easiest ways to get 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

Angular 2 Performance Checklist
Network performance

Bundling

Miniﬁcation and Dead code
elimination

Ahead-of-Time (AoT)
Compilation

Compression

Pre-fetching Resources

Lazy-Loading of Resources

Caching
https://github.com/mgechev/angular-performance-checklist

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.

https://github.com/mraible/ng2-demo

http://gist.asciidoctor.org/?github-mraible
%2Fng2-demo%2F%2FREADME.adoc

Shows what we did today, + unit tests,
integration tests and continuous
integration!
Angular 2 and Angular CLI Demo

Open Source Angular 2 Projects
 
AngularJS SDK

Angular 2 SDK (in-progress)

Angular 2 Tasks (in-progress)

Contact Me!

http://raibledesigns.com

@mraible

Presentations

http://slideshare.net/mraible

Code

http://github.com/mraible
Questions?

The Art of Angular in 2016 - vJUG24

More Related Content

What's hot

Viewers also liked

Similar to The Art of Angular in 2016 - vJUG24

More from Matt Raible

Recently uploaded

The Art of Angular in 2016 - vJUG24