Save 37% off PRO during our Black Friday Sale! »

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

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

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

3dede6f21d7a19838cf4db6a5585b410?s=128

masahiko.asai

July 07, 2017
Tweet

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. ご静聴ありがとうございました