Why Angular ?
Suguru Inatomi
2018-06-26
Distinct, Infragistics Japan
自己紹介
- laco / Suguru Inatomi
- Work@Kaizen Platform
- ng-japan オーガナイザー
- Join our Slack!
- 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
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+
Angular利用企業(海外)
ng-conf 2017 keynote
日本のAngular利用企業
- ng-japan/who-use-angular-in-japan
-
現在 28 社が登録済み
- みなさんの会社もぜひ追加してください!
-
安定したリリースサイクル
-
パッケージエコシステムの醸成
-
-
さまざまなコンポーネントライブラリ
-
多くのユーザー、ローカルコミュニティ
-
開発者間での活発な互助文化
-
利点(エコシステム)
なぜ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
なぜAngularなのか、2018年の解
By Suguru Inatomi
なぜAngularなのか、2018年の解
Infragistics
- 6,563