What is Angular ?

第二回 合同勉強会 in 福岡（2017/08/26）の発表資料です。

Transcript

1. What is Angular ? 福岡合同勉強会 #2 / Aug 26, 2017 ponday(@ponday_dev)
2. Profile ponday (@ponday_dev) / 本田 裕介 - chibi-developer - ng-fukuoka オーガナイザ community - Angular, Vue.js - Kotlin, Java, C# etc... - JavaScript skill
3. 始めに質問
4. Angular使ってますか？
5. （多分ReactとかVue.jsのほうが多いんだろうなぁ...）
6. Angularのご紹介
7. What is Angular? ・Googleとコミュニティが協力して開発 ・AngularJS（1.x系）からアーキテクチャを一新 　→ 無理にAngularって名前にしなくても良かったんじゃ... ・積極的にモダンなWeb技術を取り込み 　・TypeScript 　・RxJS　　　　etc… ・MITライセンス
8. リリースサイクル ・セマンティックバージョニングを採用 　→ [Major] . [Minor] . [Patch] ・明確な開発ロードマップ 　・6ヶ月に1度のメジャーリリース 　・1ヶ月に1度のマイナーリリース 　・週に1度のパッチリリース ・メジャーリリースでは破壊的変更を含む
9. and more... 2016/09 2017/03 2017/09 v2.0 v4.0 (LTS) v5.0 (plans)
10. 機能 ・DI ・双方向バインディング ・Scoped CSS ・Httpクライアント ・Form ・Routing ・Animation ・Material ・Lazy loading ・モバイル ・エコシステム 　・Angular CLI 　・Language Service 　・Augury （今後に期待） ・i18n ・Server Side Rendering
11. One framework. Mobile & desktop.
12. 導入の課題
13. 導入の課題 ・学習コスト ・パフォーマンス ・バージョンアップへの追従
14. 導入の課題 ・学習コスト ・パフォーマンス ・バージョンアップへの追従
15. 「Angularは学習コスト高そう...」
16. Angularの学習コスト ＝ 高 →　要因は2つ
17. 学習コストの要因：カバーしている機能の広さ ・Webアプリの開発に必要な機能を標準搭載 　・ルータ 　・Httpクライアント 　・アニメーション　　　　　　　　　　　etc... ・どのフレームワークを使っても必要 　→ 標準か、そうでないか ・すべてをマスターする必要はない 　→ 機能ごとにモジュールが分割されている。 　　 使わない機能がバンドルされることはない。
18. 学習コストの要因：要求される技術スタックの多さ ・利用にあたって必要となる知識が多い 　・Angular 　・TypeScript, ECMAScript 　・RxJS　　　　　　　　　　　etc... ・大半がモダンなWeb技術になりつつある 　→ Angular本体以外の部分もすぐ陳腐化することはない ・TypeScript, RxJSによって得られる高い生産性は魅力 　・型付けによる一次テスト 　・TypeScriptはESの新機能をいち早く実装 　・RxJSによる簡潔で柔軟な記述
19. 導入の課題 ・学習コスト ・パフォーマンス ・バージョンアップへの追従
20. 「Angularって遅いんじゃないの？」
21. 「Angularが遅い」は過去の話
22. Angularのパフォーマンス ・AngularJSは遅かった 　・dirty checkに起因するムダの多さ 　・コンポーネントの増加がクリティカルに影響 ・v2.xで変更検知の仕組みを一新 = Change Detection 　・ReactやVue.jsの『仮想ツリー』とは異なる 　　→ Reactと同等かそれ以上のパフォーマンス 　・コンポーネントが増えてもパフォーマンスに影響が出にくい ・Lazy loadingによるバンドルサイズの削減 　・初期ロード時は最低限必要なものだけDL → 初期表示の高速化 ※ (参考)『Angularは本当に早いのか？』 　https://speakerdeck.com/honda/angularhaben-dang-nisu-ifalseka
23. 導入の課題 ・学習コスト ・パフォーマンス ・バージョンアップへの追従
24. 「半年に1回破壊的な変更は恐い...」
25. （今のところ）そこまで大きな変更はない
26. バージョンアップ ・Angular5の変更点 ＝ 地味 ※Beta.4時点 　・破壊的変更: 1件のみ 　・非推奨: 1件のみ ・破壊的変更は1度非推奨になってから 　・ex) v5.xで非推奨 → v6.xで削除 ・マイナーリリースでは破壊的変更は起こらない 　→ 「マイナーリリースで動かければそれはバグ」 ・1年半のサポート期間を持つLTSバージョンも
27. ユースケース
28. ユースケース ・Webアプリケーション 　・CRUDの多いマスタ管理画面など ・サーバサイドエンジニアが多い場合 （よく検討が必要） ・Webサイト 　・1, 2ページのWebサイトには向かない 　・metaタグを頻繁に書き換えるサイトも向かない（らしい） 　・お問い合わせフォームがある、Http通信が多い場合には採用もあり
29. さいごに
30. ng-fukuoka
31. ng-fukuoka website: ng-fukuoka.github.io github : github.com/ng-fukuoka twitter : @ng_fukuoka