Angular on Mobile

MOBILE CONFERENCE 2017

about me

• 稲富 駿 (laco)
• Angular Japan User Group
• Angular Contributor

Agenda

• Angular Overview
• Mobile Web & PWA
• Angular Mobile Toolkit

Angular Overview

Angular

Framework for Web Application

• Web Standards
• Performant
• Full-stack
• Powered by

Component definition

@Component({
    selector: "app-profile",
    template: "<p>Name: {{ name }}</p>"
})
class ProfileComponent {
    @Input() name: string;
}

<div>
    <app-profile name="laco"></app-profile>
</div>

TypeScript

• Static Type
• Decorators
• Type-base Dependency Injection

Angular Platform

Framework + Tooling + Ecosystem

• フレームワークだけではない

• アプリケーション開発に必要なすべてを提供

  • フレームワークライブラリ

  • UIコンポーネントライブラリ

  • エディター支援

  • ビルドツール

  • スタイルガイド/ベストプラクティス

angular.io

• https://angular.io

• 公式ドキュメンテーションサイト

  • チュートリアル

  • 開発ガイド

  • APIリファレンス

  • 周辺リンク集

• Angularで実装されたアプリケーション

Angular Material

• https://material.angular.io

• Material Designコンポーネントライブラリ

• Angularチームの公式サポート

Angular CLI

• https://cli.angular.io

• Angularアプリケーション開発を支援するCLIツール

  • プロジェクト生成

  • ビルド

  • デバッグ

  • テスト

• 最新のベストプラクティスを元に更新される

AngularJS 2?

Angular2 ? 

"Angular" ver.4

Semantic Versioning

Angular x.y.z

• x: メジャー

  • 破壊的変更を含む可能性がある機能追加

• y: マイナー

  • 破壊的変更を含まない機能追加

• z: パッチ

  • バグ修正のみ

Time-base Release

定期アップデート

• 毎週のパッチアップデート

• 毎月のマイナーアップデート

• 6ヶ月おきのメジャーアップデート

  • 破壊的変更があってもなくてもバージョンアップ

Mobile Web & PWA

“53% of mobile site visits are abandoned if pages take longer than 3 seconds to load”

DoubleClick, “The Need for Mobile Speed”, 2016

“3 out of 4 mobile sites take longer than 10 seconds to load and the average time to load is 19 seconds”

DoubleClick, “The Need for Mobile Speed”, 2016

Latency

パフォーマンスの悪さ

=コンバージョンの低さ

RAIL

https://developers.google.com/web/fundamentals/performance/rail?hl=ja

Loading Flow

1. Render first view: Shell
2. Load scripts
3. Boot application

Shell

• アプリケーションの"殻"

• アプリケーション起動までの場繋ぎ

• 「待っている」と思わせないための工夫

First View of the application

Angular Connect 2016

App Shell

ネイティブアプリケーションのように起動するための手法

• アプリケーションをShellとContentに分ける

• Shellはキャッシュ可能な最低限のHTML/JS/CSS

• 実行時にはContentだけを読み込む

https://developers.google.com/web/fundamentals/architecture/app-shell?hl=ja

Pre-rendering

• 要求される画面をサーバー上で事前に描画する

• HTMLとしてキャッシュしておく

• 同一コードで動作する

Angular Universal

Run Angular on Server

• Node.js上でAngularアプリケーションを実行

• 実行結果をHTML文字列として取得できる

• index.htmlの代わりに配信

Angular Mobile Toolkit

Angular Mobile Toolkit

https://mobile.angular.io

• AngularでPWAを構築するためのツール群

  • @angular/app-shell

  • @angular/service-worker

@angular/app-shell

pre-rendering helper

• AppShellのレンダリングを補助するライブラリ

• AppShellに含める / 含めない要素を指定できる

  • *shellRender / *shellNoRender

@angular/service-worker

Service Worker generator

• ServiceWorkerのJSを生成するツール

• ngsw-manifest.jsonの設定を元に生成する

• Automatic PWAs

Summary

Angular ❤️ Mobile

• Small Bundle + High Performance

• App ShellとPre-rendering

• Mobile Toolkitで簡単PWA化

Thanks!