フレームワークとしてのAngular

• コンポーネント志向のビューエンジン

• HTMLテンプレートとデータバインディング

• 依存性の注入システム

• Ahead-of-Time (AoT) コンパイラ

• ユニットテスト支援

• etc...

Angularフレームワークの特徴

フルスタックな機能群

公式パッケージ

• @angular/core

• @angular/core/testing

• @angular/common

• @angular/forms

• @angular/http

• @angular/router

• @angular/platform-browser

• @angular/platform-server

• ...

angular.io/api

• すぐに動かせる

  • サードパーティライブラリを選ぶ時間が不要

• 学びやすい

  • 整備された公式ドキュメンテーション

  • フレームワークの知見を共有できる

• 高品質

  • 常にメンテナンスされ、最新に保たれている

利点(フレームワーク)

プラットフォームとしてのAngular

• Angularプラットフォームが目指すもの

  • ​作りたくなるアプリケーション

  • 使いたくなるアプリケーション

Angularプラットフォーム

• Angularチームのベストプラクティスを利用できる

• チームのスケーラビリティを上げる

• 初心者から上級者まで満足できる

作りたくなるアプリケーション

Angular CLI

アプリケーション開発を支援する

Language Service

エディター支援ツール

codelyzer

AngularのためのLintルール集

Stackblitz

https://stackblitz.com/fork/angular

• UXとしての速度

  • バンドルサイズの削減

  • オフラインキャッシュ: PWA

  • 遅延読み込み

  • サーバーサイドレンダリング

使いたくなるアプリケーション

バンドルサイズの削減

ng-conf 2018 keynote

• Angularの3世代目ビューエンジン

• HTMLテンプレートからDOMを生成するまでの過程

• 使っているAngularの機能だけをバンドルする仕組み

  • "従量課金"型

Angular Ivy

Angular PWA

https://pwa.ng

Angular Universal

サーバーサイドAngular

• Node.jsでAngularを実行する

• 公式パッケージ

  • @angular/platform-server

• サードパーティパッケージ

  • @nguniversal/express-engine

  • @nguniversal/hapi-engine

  • @nguniversal/aspnetcore-engine

  • ...

• 現在モバイルのほうが多数派である

• しかしモバイルWebには課題がある
  • 弱いCPU能力
  • 不安定なネットワーク

Webとモバイル環境

Angularなら大丈夫

• Progressive Web Apps開発

  • Angular Service Worker (NGSW)

    • 自動オフラインキャッシュ

• Ionic

  • AngularとCordovaを使ったネイティブアプリ

• NativeScript

  • AngularアプリをネイティブUIアプリに変換する

Angular for Mobile

Ionic

AngularとWebViewによるネイティブアプリ

NativeScript

AngularコンポーネントをネイティブUIに変換

• 開発者体験

  • ベストプラクティス
    • 頻出の問題解決をアウトソーシングできる

  • スケーラビリティ: チーム開発を支援

• ユーザー体験

  • 速さ: すばやく起動できるアプリケーション

  • モバイルサポートの選択肢

    • PWA / Web View / NativeUI

利点(プラットフォーム)

エコシステムとしての

Angular

• パッケージエコシステム
  • バージョニング・リリースサイクル
  • 公式パッケージ / サードパーティパッケージ
  • コンポーネントライブラリ
• Webエコシステムとの相互運用性
• ユーザーコミュニティ

Angularエコシステム

• Semantic Versioning

  • メジャー.マイナー.パッチ

• 定期リリースポリシー

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

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

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

• Googleによるリリースチェック

  • Googleは常にリリース前の最新バージョンを使用

Angularリリースサイクル

• すべてのメジャーバージョンを1年間長期サポート

• 致命的なバグ修正やセキュリティパッチのみ

長期サポートバージョン

• Angular (Angular 2+)が多数派になった

• AngularJS (Angular 1.x)は終了（間近）

  • v1.7.x (June): 最終リリース

  • 3年間のLTS: 2018-07-01 =>  2021-06-30

• 今AngularJSを選択する理由は無し

Angular / AngularJS

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

Angular Material

公式のMaterial Designコンポーネントライブラリ

Clarity

VMware製のコンポーネントライブラリ

Ignite-UI

Infragistics製のコンポーネントライブラリ

Component Dev Kit

コンポーネントライブラリ開発を支援

The Angular CDK gives developers solid, well-tested tools

to add common interaction patterns with minimal effort.

Webエコシステム

Angular Elements

AngularコンポーネントをCustom Elementsに

• マイクロアプリケーション・ウィジェットとして

  • 静的コンテンツページへの埋め込み

  • React, Vueその他ライブラリからの利用

Angular for WWW

Angularコミュニティ

世界のAngular開発者: 140万人 

ng-japan 2018 keynote

ローカルコミュニティ: 790+

ng-japan 2018 keynote

ng-japan 2018: 参加者300+

https://ngjapan.org

Angular利用企業（海外）

ng-conf 2017 keynote

日本のAngular利用企業

• ng-japan/who-use-angular-in-japan
• 現在 28 社が登録済み
  • みなさんの会社もぜひ追加してください！

• 安定したリリースサイクル

  • パッケージエコシステムの醸成

• さまざまなコンポーネントライブラリ

• 多くのユーザー、ローカルコミュニティ

  • 開発者間での活発な互助文化

利点(エコシステム)

なぜフレームワークが
必要なのか

• コモディティ化したSingle Page Application

• プロダクトの価値を追求する段階

"SPA"はもう特別じゃない

"モダンWeb"は目的から手段へ

• 加速するモバイルファーストの流れ

  • PWAムーブメント

  • デバイス機能との連携

• SEO

• コンポーネント志向デザイン

• 新しいWeb標準への追従

Webフロントエンド開発の複雑化

• もっと信頼できて

• もっと多機能で

• もっとパフォーマンスが良く

• もっとメンテナンス性が高く

• もっとスケールする

"Web"へのニーズ

フレームワークを使おう

アウトソースとしてのフレームワーク

• フレームワークに頼ること

  • DOM操作

  • パフォーマンス

  • Web標準との相互運用

  • 基本的なアプリケーション構成

  • 一般的なプラクティスの適用

意思決定を外部化して
プロダクトの価値に集中する

なぜAngularは
優れたフレームワークなのか

"Google"の品質

• 600を超えるAngularアプリ
  • 自分たちのためにメンテナンスされる

• 30人を超えるGoogleのAngularチーム

• Chrome開発の資産: Webのベストプラクティス

  • V8フレンドリーなJavaScriptコード

  • フレームワークのセキュリティレビュー

Googleによって品質が担保されている

強いオピニオン

• ハイクオリティなデフォルトセット
• CLIを前提とした開発者体験の向上

• Angularチームのベストプラクティスに従うことで
  意思決定のコストを削減

• 共通の知見をコミュニティでシェアできる

信頼性

• 定期的なリリースサイクル
• LTSバージョンの提供
• 破壊的変更に関するポリシー
  • 非推奨期間の設置
  • アップグレードガイドの提供
• v2からv6まで積み上げた1年半の実績
• 予期せぬ変更はGoogle社内のアプリも破壊する

親しみやすさ

• HTML/CSSベースのコンポーネント
• TypeScriptとクラスベースのAPI
• npmエコシステムとの親和性
  • 共通のモジュールシステム(commonjs, ESModule)
• 依存性の注入システム
  • Javaなどサーバーサイドの開発者にも馴染みやすい

スケーラビリティ

• コンポーネントとNgModuleによるモジュール化
• 型によって守られたコードベース
  • コンパイルによる静的検査
  • 変更の影響範囲を予測しやすい
• チーム開発の支援
  • CLIによる開発ワークフローの自動化
  • コンポーネントライブラリによるUI品質の担保
  • カプセル化によるCSS汚染の防止

エコシステム

• ライブラリやツール、ドキュメント、教材など
• Angularチームによるコミュニティ支援
• コミュニティによる活発な互助活動
• 開発者を孤独にしない

フレームワークの選び方

• Webアプリケーションの機能はブラウザに依存する
• フレームワークはブラウザにできることしかできない
• ブラウザが持つ機能を抽象化するアプローチの違い
• インターフェースは変わる
  • ベストプラクティスは常に改善される
  • 破壊的変更は進化の代償
  • 進化しないフレームワークは生き残れない

機能では選べない

• インターフェースの奥にある思想で判断する
• Angularの場合
  • Web標準との協調
  • 静的型による開発体験の重視
  • 非同期処理を前提としたリアクティブな設計
  • ベストプラクティスのデフォルト化
• 思想に同調できるかどうかが
  フレームワークを選ぶ基準になる

思想への同調

• 思想は人とチームから生まれる
  • Angularチームを知るとAngularが見えてくる
• カンファレンスの基調講演を聞こう​
  • 最新のAngularチームの考えがわかる
  • ng-conf, ng-japan, その他多数

思想を知る

• 近くのコミュニティで思想に触れる
  • 参加者の声を聴く
  • 空気を感じる
• ng-japanは誰でもいつでも参加できるコミュニティです
  • Slackコミュニティ
  • イベント

コミュニティに触れる

まとめ

• Angularは安定性を維持しながら進化を続けている
• これからのAngular
  • モバイルフレンドリーなアプリケーション開発
  • Component Dev Kitの強化
    • コンポーネントライブラリの醸成
  • フレームワークを越えるAngular Elements
    • Angular for WWW

Angularの現在と未来

• コモディティ化するモダンWeb開発
• 「モダンWeb技術」は目的から手段へと変わる
• 普遍化した意思決定のアウトソース先としての
  フレームワーク
  • 仮説検証のサイクルを高速化
  • プロダクトの価値を高めることに集中する

フレームワークの価値

• CLIによるストレスフリーな開発体験
• Googleの信頼性
• ハイクオリティなデフォルトセット
• 公式提供される標準モジュール
• UXを左右する部分には踏み込まない
  • 状態管理 / アプリケーション設計
• ​開発者にしかできないことに集中できる

Angularの優位性

• Angularに限らず、
  フルスタックフレームワークはある種の宗教である
• 思想に賛同できないなら使うべきじゃない
• 何を重視しているかを知る
  • カンファレンスの基調講演
  • コミュニティに参加する
  • 実際に触ってみる
• 心から愛せるフレームワークを選ぼう

フレームワークの選び方