Why Angular ?

Suguru Inatomi

@laco2net

2018-06-26

Distinct, Infragistics Japan

自己紹介

  • laco / Suguru Inatomi
  • Work@Kaizen Platform
  • ng-japan オーガナイザー
  • Angularコントリビューター

アジェンダ

1. Angularの概要と最新情報

2. なぜAngularが必要なのか

Angularの概要と最新情報

  • Webフロントエンド用のフレームワーク

  • 統合された開発プラットフォーム

  • 開発者による開発者のためのエコシステム

Angularとは...

フレームワークとしての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

  • UXとしての速度

    • バンドルサイズの削減

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

    • 遅延読み込み

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

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

バンドルサイズの削減

  • 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万人 

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

ng-japan 2018: 参加者300+

https://ngjapan.org

Angular利用企業(海外)

ng-conf 2017 keynote

日本のAngular利用企業

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

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

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

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

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

利点(エコシステム)

なぜAngularが必要なのか

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

  • コモディティ化した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は誰でもいつでも参加できるコミュニティです

コミュニティに触れる

まとめ

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

Angularの現在と未来

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

フレームワークの価値

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

Angularの優位性

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

フレームワークの選び方

Thanks!

Suguru Inatomi

@laco2net

なぜAngularなのか、2018年の解

By Suguru Inatomi

なぜAngularなのか、2018年の解

Infragistics

  • 6,563