1 of 101

Rob Wormald

Angular Everywhere

@robwormald

2 of 101

Rob Wormald

Developer Advocate @ Google

@robwormald

github.com/robwormald

3 of 101

Angular Everywhere

4 of 101

Unified Development

5 of 101

So I should build a mobile web app, right?

6 of 101

Most of the mobile web today is terrible.

7 of 101

https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/

8 of 101

https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/

9 of 101

https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/

10 of 101

So I should build a native mobile app, right?

11 of 101

Now you have three problems...

12 of 101

Android App

Mobile Web

¥ 433 / $3.75

¥ 8 / $0.07

Housing.com: User Acquisition Costs

13 of 101

So I should build a web app, right?

14 of 101

Native APIs?

USB?

things-chrome-apps-did-but-can’t-anymore? (Serial)

Windows Universal APIs?

15 of 101

So I should build a web app, right?

native

desktop

mobile web

16 of 101

You should just build an app

(we’ll handle the rest)

17 of 101

Angular Everywhere

18 of 101

Server

Browser

Web 1.0

Web Server

Initial Request

HTML Document

Form POST

HTML Document

19 of 101

Server

Browser

Web 2.0 - Single Page Apps

Web Server

Initial Request

Document

AJAX

JSON

AJAX

JSON

20 of 101

NG1 architecture

Application

DOM

21 of 101

Angular

Angular Renderer architecture

Application

DOM

Server

App Shell

...

Renderer

22 of 101

Where to do the work?

100% Client Side

100% Server Side

23 of 101

Where to do the work?

100% Client Side

100% Server Side

Angular 1

PHP

24 of 101

Angular

100% Client Side

100% Server Side

Angular 2

25 of 101

Progressive Web Apps

26 of 101

A Progressive Web App uses modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, leveraging the web's low friction.

https://developers.google.com/web/progressive-web-apps

27 of 101

app-like user experience.

28 of 101

@robwormald

29 of 101

@robwormald

30 of 101

First experience

31 of 101

Single Page Apps today

�<script src="app/init.js">

32 of 101

Empty Window

<html>

<head>

</head>

<body>

</body>

</html>

33 of 101

34 of 101

35 of 101

@robwormald

36 of 101

Empty Window

<html>

<head>

</head>

<body>

</body>

</html>

37 of 101

Application Shell

38 of 101

App Shell

100% Client Side

100% Server Side

App Shell

39 of 101

Application shell

<html>

<head>

</head>

<body>

<issue-cli-app>

<md-sidenav-layout>

…

</md-sidenav-layout>

</issue-cli-app>

</body>

</html>

40 of 101

Dynamic content loaded

<html>

<head>

</head>

<body>

<issue-cli-app>

<md-sidenav-layout>

…

</md-sidenav-layout>

</issue-cli-app>

</body>

</html>

41 of 101

Declarative application shell

<md-sidenav-layout>

Loading...

</div>

<router-outlet *shellNoRender></router-outlet>

</md-sidenav-layout>

42 of 101

App Shell - gulp

import {AppComponent} from "./app”

import * as gulp from "gulp”

import {gulpPrerender} from "@angular/universal”

gulp.task("prerender”, () => {

return gulp.src(["index.html”])

.pipe(gulpPrerender({

directives: [ AppComponent ]

}));

});

43 of 101

Angular Universal

44 of 101

Universal

100% Client Side

100% Server Side

Universal

45 of 101

Angular Universal - express

import {AppComponent} from "./app”

import {expressEngine} from "@angular/universal”

import * as express from "express”

let server = express();

server.engine(".html”, expressEngine);

server.get("/”, (req, res) => {

res.render("index”, { directives: [ AppComponent ] });

});

server.listen(8080);

46 of 101

Server rendering benefits

Performance

SEO

Shareability

47 of 101

Server Rendering: Universal

Node.js

ASP.NET

Others...

48 of 101

Angular Universal

Today:

Experimental

Community Driven

Soon:

Angular Core (@angular/platform-universal)

Core maintained

Community supported

49 of 101

WARNING! Experimental!

@robwormald

50 of 101

AMP Pages

51 of 101

AMP Pages

100% Client Side

100% Server Side

AMP

52 of 101

AMP Pages

NO JS?! wat?

53 of 101

AMP Pages (No JS!)

NO JS?! wat?

wat

54 of 101

PWAMP (AMP + PWA)

55 of 101

Service worker enhancement

Serve AMP Page

User Navigates

Install Service Worker

PWA!

Download PWA

SW Intercept Request

56 of 101

Progressive Web Apps

57 of 101

PWA

What else do users care about?

Icon on the Home Screen (Icon = “App”)
Notifications
Offline

@robwormald

58 of 101

PWA - Install Banner

@robwormald

59 of 101

@robwormald

60 of 101

PWA - Already Everywhere

chrome://serviceworker-internals/

@robwormald

61 of 101

PWA - Already Everywhere

appear.in
twitter.com
weather.com
duolingo.com
etc

@robwormald

62 of 101

Time check?

@robwormald

63 of 101

Cordova

@robwormald

64 of 101

Cordova

Web applications + Native Mobile APIs

@robwormald

65 of 101

Cordova - Javascript APIs

Camera

Filesystem

DB

Many more

@robwormald

66 of 101

Cordova - Mix and Match

Native Application

Authentication & Login

Settings

Cordova & Webviews

@robwormald

67 of 101

Cordova - Getting Started

npm i -g cordova

cordova create app-name

@robwormald

68 of 101

Cordova

Angular applications are inherently architected in a way that matches mobile.

@robwormald

69 of 101

Ionic Framework

@robwormald

70 of 101

Ionic

A full powerful CLI, build environment
Ionic abstracts Cordova’s messiness
Ionic was built for Angular

@robwormald

71 of 101

Ionic Components

<ion-list radio-group>� <ion-list-header>� Language� </ion-list-header>�� <ion-item>� <ion-label>Go</ion-label>� <ion-radio value="go"></ion-radio>� </ion-item>

...

@robwormald

72 of 101

Ionic

Ionic was designed for mobile experience, built from the ground up using Angular

@robwormald

73 of 101

NativeScript

@robwormald

74 of 101

NativeScript

Angular Platform, Native Rendering

@robwormald

75 of 101

NativeScript - Getting Started

npm install -g nativescript

tns create my-app-name --ng

@robwormald

76 of 101

NativeScript - Example Template

@Component({� selector: "my-app",� template: `� <TextField hint="Email Address" keyboardType="email"� autocorrect="false" autocapitalizationType="none"></TextField>� <TextField hint="Password" secure="true"></TextField>�� <Button text="Sign in"></Button>� <Button text="Sign up for Groceries"></Button>� `�})�export class AppComponent {}

@robwormald

77 of 101

NativeScript

Angular makes NativeScript awesome by letting you build Angular apps that render to Native UI Elements.

@robwormald

78 of 101

Electron

@robwormald

79 of 101

Electron

Web applications + Native Desktop APIs

@robwormald

80 of 101

Electron

@robwormald

81 of 101

Windows Apps

@robwormald

82 of 101

UWP Apps

Web applications + Native Desktop APIs

@robwormald

83 of 101

Electron

@robwormald

84 of 101

/code

85 of 101

Angular Release Cycle

86 of 101

Angular release cycle

Semantic Versioning (semver)

http://semver.org/lang/ja/

87 of 101

Semantic versioning - Patch Release

2.0.X

Weekly
NO breaking changes
Bugfixes, regressions

88 of 101

Semantic versioning - Minor Release

2.X.0

Monthly*
NO breaking changes
Backwards compatible new features

89 of 101

Semantic versioning - Major Release

X.0.0

Bi-annual (every 6 months)
Possible breaking changes
Deprecation policy applies

90 of 101

BREAKING CHANGES

91 of 101

Angular team will announce deprecations ahead of time.
N + 1 removal of deprecated APIs
Warnings when using deprecated APIs

Semantic versioning - Deprecation Policy

92 of 101

Semantic versioning - Deprecation Policy example

2.3.0 - API introduced

magicBox.doSomethingAmazing()

4.1.0 - API deprecated

4.2.0 - OK!

4.3.x - OK!

5.x.x - Warning (but OK!)

6.x.x - Removal

93 of 101

Problem - this is confusing

Angular 3.0.0 + Router 4.0.0?

94 of 101

Problem - this is confusing

Angular 3.0.0 + Router 4.0.0

Angular 4.0.0 + Router 5.0.0

Angular 5.0.0 + Router 6.0.0

Angular 6.0.0 + Router 7.0.0

95 of 101

Problem - this is confusing

Angular 3.0.0 + Router 4.0.0

96 of 101

Breaking News!

Angular 3.0.0 + Router 4.0.0

97 of 101

Breaking News!

Angular 4.0.0 - 2017年3月

98 of 101

Major Release schedule

2016年9月

2017年3月

2017年8月

2.x.x	4.x.x

99 of 101

Major Release schedule

2016年9月

2017年3月

2.x.x

2.0.x	2.1.x	2.2.x

2.3.x

Stable Phase - 安定

Creative Phase 創造性

100 of 101

Major Release schedule

2017年3月

2017年9月

4.x.x

4.0.x	4.1.x	4.2.x

4.3.x

Stable Phase - 安定

Creative Phase 創造性

101 of 101

Major Release schedule - prerelease

2017年3月

2017年9月

4.x.x

4.0.x	4.1.x	4.2.x

4.3.x

Stable Phase - 安定

Creative Phase 創造性

5.0 β.1	5.0 β.2	5.0 β.3

4.1 β	4.2 β	4.3 β