Introduction to angular (Front-end Beer Bash #1)

Front-end Beer Bash #1 のLTで発表した「Angularの特徴」をカジュアルにご紹介しています。しゃべり中心でスライド単体だけでは把握しづらい点もございますが、導入検討の参考になれば幸いです。

Transcript

1. Introduction to Angular 2017/7/7 Frontend Beer Bash #1 @masahiko.asai
2. About Me Masahiko Asai ビズリーチ HRMOS事業部 フロントエンドエンジニア 2011-2014 PHP エンジニア 兼 HTML/JS コーダー（某大手ECサイト） 2015- フロントエンドエンジニア（AngularJS, Angular 4）
3. Angular 4のいいところ！
4. Angular 4 の特徴 フルスタックなプラットフォームであることが大きな特徴。 Web アプリケーションの開発に必要なパッケージが、 「モジュール」という単位で分割されて用意されている。 また、開発をサポートする周辺ツールの整備もGoogle自ら進められている。 1 All-in-one
5. Angular 4 の特徴 Angular のアーキテクチャは、ブラウザ上で動作するアプリのみならず、 サーバサイドのプログラムも構築できるような設計になっている。 iOS/Android で動くWebViewベースのアプリはもちろん、 ネイティブアプリを開発することも可能に。 2 マルチプラットフォーム対応
6. Angular Building Blocks 引用: Angular 2 Architecture https://www.slideshare.net/EyalV/angular-2-architecture
7. Angular Universal
8. Angular Universal Angular Universal • Angular Universalを導入すると、 サーバサイドレンダリングが可能になる • パフォーマンス向上施策のひとつとして、 SSRで返して、その後ブラウザ側で Angular アプリケーションを実行する テクニックもある
9. Ionic 2 Ionic 2 + Angular + Cordova を利用してWebView ネイティブアプリを構築できる
10. NativeScript NativeScript でネイティブ iOS/Android アプリケーションも開発が可能
11. Angular Electron Angular Electron でデスクトップアプリケーションも。
12. Browser Support 引用: Angular - Browser Support https://angular.io/guide/browser-support
13. Angular 2 の特徴 • コンポーネントという単位でモジュールを明確に分割できるようになった • UI部品をひとつのコンポーネントとして作り、 この部品を組み合わせることで、 画面を作り上げていくイメージ • AngularJS 時代と同じくHTMLが主役。 インタラクションをHTMLテンプレートに 入れていくスタイル。 3 コンポーネント指向
14. Angular 2 の特徴 • Microsoftが開発している静的型付けができるJSのスーパーセット。 • アプリケーション開発において堅牢性を持たせることができる • Angular アプリケーション、JavaScriptやDartでも開発は可能だけど、 ドキュメントや資料の充実度合いからも TypeScript を推奨している。 4 TypeScript を用いた堅牢性の高い開発
15. 早速はじめてみよう
16. とはいえ現実的には… 1. プロジェクトディレクトリを作成 2. package.json のセットアップ 3. Angular をインストール 4. TypeScript をインストール 5. タスクランナーやビルドツールのセットアップ 6. ・・・ 7. ・・・ 8. ・・・
17. とはいえ現実的には… 1. プロジェクトディレクトリを作成 2. package.json のセットアップ 3. Angular をインストール 4. TypeScript をインストール 5. タスクランナーやビルドツールのセットアップ 6. ・・・ 7. ・・・ 8. ・・・ 何もない状態からセットアップするのは大変…
18. Angular CLI Angular CLI
19. Angular CLI とは？ • Angular アプリケーション プロトタイプを構築できるツール ◦ React でいう create-react-app ◦ Vue.js でいう vue-cli に相当するもの • npm でインストールすると、ng コマンドで scaffold が作れるよ • CLI自体は ember-cli ベースで作られているそう
20. Angular アプリケーションを作るのに 役に立つ周辺ツール・モジュール
21. Angular Augury
22. Angular Augury • Angular アプリケーションをデバッグするのに便利な Google Chrome 拡張機能 • React の React DevTools、Vue.js の devtools に相当するもの • モデルの値やフォームの Valid/Invalid 状態が リアルタイムに確認できる
23. UI Component系 - Angular Material Angular Material
24. UI Component系 - ng-lightning ng-lightning
25. UI Component系 - PrimeNG PrimeNG
26. 弊社事例
27. 弊社事例 HRMOS（ハーモス）採用管理 現在、AngularJS で構築されているものを、 Angular 4 を全面導入すべく、移行を進めています ビズリーチ 企業様がご利用になる管理画面で一部導入 画面: HRMOS 採用管理 https://hrmos.co/saiyo/
28. アプリケーションと UI Component の分離 UI Components 個々のコンポーネントデザインとインタラクションを実 装。 Atomic Components の考え方をもとにUIパーツを分 解して実装。 App Components アプリケーションは、 UI Componentsを用いてア プリケーションを実装する。 持っているデータをUI Componentsに与えて画 面を描画、ビジネスロジックを実装。
29. Atomic Design 引用: Atomic Design | Brad Frost http://bradfrost.com/blog/post/atomic-web-design/
30. Atomic Components Atom, Molecule, Organism, Ecosystem, Environment 引用: A brief look at Atomic Components https://medium.com/joeydinardo/a-brief-look-at-atomic-components-39cbe71d38b5
31. まとめ
32. さわってみた所感 • All-in-one なので、必要なものは揃っている。 • 公式サイトのドキュメントは丁寧 ◦ やりたいことは、ある程度公式ドキュメントに載っている • アップデートが速い、LTSあり ◦ 週1回 BugFix Release、月1回 Minor Version Update、半年に1回 Major Version Update ◦ 現行のAngular 4は2018年10月までサポート • angular-cli によってWeb アプリケーションを速く構築できる ◦ アプリケーションの開発実装に集中できる環境を作ってくれる ここはイイ！
33. さわってみた所感 • UI系の外部モジュールの開発がアクティブ • サービスのAdmin（管理画面）に導入するにはうってつけかなと ここはイイ！
34. さわってみた所感 • 日本語の情報、ドキュメント、記事はまだまだ少ない • Angular の採用事例、導入事例がなかなか聞かない ◦ 業務用 Web アプリで採用されることが多いから、話題に上がってこない…？ • 導入コストは高い。TypeScript, Angular, RxJSの習得コストとか… • 周辺ライブラリ（外部モジュール）はまだβ版が多い • All-in-oneのため、アプリはどうしても Fat になる ◦ Webサイト（LP）に導入するには選択肢に入らないかな ここは課題
35. ご静聴ありがとうございました