Angular Platform

FukuokaJS #7

Transcript

1. Angular Platform FukuokaJS #7
2. Noriyuki Shinpuku ng-fukuoka organizer @puku0x 2 VEGA corporation Co., Ltd.
3. フロントエンドの課題 • 複雑＆大規模化 • デザイン • パフォーマンス • トレンドの追従 • 生産性 • 保守 ： 3
4. 4 つらい
5. 5 Angular
6. Angular Googleが開発するフロントエンドフレームワーク • フルスタック • 堅牢＆高速 • 充実したエコシステム https://angular.io/ 6
7. Why Angular? 7
9. TypeScript • JSのスーパーセット • 漸進的型付け言語 • 高い保守性 9 TypeScript ES201x ES5
10. コンポーネント @Component({ selector: 'app-root', template: `<p>Hello, {{ title }} !</p>`, }) export class AppComponent { title = 'Angular'; } 10
11. サービス/プロバイダ 11 @Injectable({ providedIn: 'root' }) export class UserService { constructor(private http: HttpClient) {} fetchUsers() { return this.http.get<User[]>('/users'); } }
12. 12 モジュール機構（NgModule） Root Module Feature Module Shared Module Feature Module Feature Module Bootstrap Eager Loaded Lazy Loaded { path: './feature', loadChildren: './feature.module#FeatureModule' } @NgModule({ imports: [SharedModule] }) export class FeatureModule { }
13. 13 is “Full Stack”
14. 公式パッケージ 14
15. Angular Material 15
16. Angular Material • 公式UIライブラリ • 新Material Design対応 16 https://material.angular.io
18. Component Dev Kit 18
19. Component Dev Kit • Virtual Scroll & Drag-and-Drop https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-s croll-drag-and-drop-and-more-c594e22e7b8c 19
20. Angular Elements 20
21. Custom Elementsとして出力 export class AppModule implements DoBootstrap { constructor(injector: Injector) { const el = createCustomElement(HelloComponent, { injector }); customElements.define('app-hello', el); } ngDoBootstrap(appRef: ApplicationRef) {} } 21
22. 22 Tools
23. Angular CLI 23 環境構築 $ ng new コード生成/機能追加 $ ng generate $ ng add 開発/リリース $ ng serve $ ng build --prod https://cli.angular.io/
24. $ npm install -g @angular/cli 24
25. Angularアプリケーションの作成 $ ng new my-app ? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? (Use arrow keys) ❯ CSS SCSS [ http://sass-lang.com ] SASS [ http://sass-lang.com ] LESS [ http://lesscss.org ] Stylus [ http://stylus-lang.com ] 25
26. • Schematicsによる拡張 CLIエコシステム 26
27. 27 $ ng add
28. ng add 対応パッケージ 28
29. 29 $ ng update
30. サポート期間 半年 年 今ここ 30 APIの破壊的変更は 段階的に適用される
31. 31 https://link.medium.com/KgTODwwFWT
32. Language Service（VS Code 拡張） 32 • コード補完 • テンプレートチェック • 定義ジャンプ https://marketplace.visualstudio.com/items?itemName =Angular.ng-template
34. Angular Console Angular CLIのGUI版 デスクトップアプリ または VS Code拡張 34 https://angularconsole.com/
35. StackBlitz 35 オンライン版 VS Code 様々なテンプレート • Angular • Ionic • React https://stackblitz.com/
36. 36 Community
37. 37 ng-japan 2018 Keynote
38. 38 150万人/月のアクティブユーザ https://twitter.com/angular/status/1069727630734151680
39. 39 https://news.crunchbase.com/news/popular-web-frameworks-seed-early-stage-startups/
40. 40 国内 約1万人/月のアクティブユーザ
41. 国内コミュニティ 41 • 東京 • 京都 • 神戸 • 福岡 • 群馬 https://community.angular.jp/
42. Angular in 2019 42
43. Angular v8/v9 43
44. Ivy 新しいレンダラー ・バンドルサイズ削減 ・高速なビルド ・シンプルなAPI ng-conf 2018: Angular Keynote https://docs.google.com/presentation/d/1zgpjyV kDgUPfGKuxOcU0lLusCiMSfLZZjYHWrFvl71I 44
45. 45 ng-conf 2018: Angular Keynote（和訳）
46. $ ng new my-app --experimental-ivy ※正常に動作しない場合があります 46
47. 47 Bazel
48. Bazelビルドサポート $ npm i -g @angular/bazel $ ng new my-app --collection=@angular/bazel $ cd my-app $ ng serve $ ng build --prod 48
49. 49 ngAtlanta 2019: Angular in 2019 http://bit.ly/ngAtlanta-2019 Angular Mix 2018: Angular Prototyping Tool http://bit.ly/AngularCodesign
50. 50 Angular
51. 51 学習コストが...
52. まぁわかる 52
53. でも 53
54. コストに見合う リターンがある 54
55. Angularを選んで良かったこと（1） • 強いオピニオン ◦ Angularチームのベストプラクティス ◦ 高品質なデフォルトセット ◦ 意思決定のコスト削減 • プロダクトの価値に集中できる 55
56. Angularを選んで良かったこと（2） • 将来の資産となる知識 ◦ モダンなWeb技術 ◦ 次世代のWeb標準 ◦ コンポーネント設計、テスト設計 • 将来を見据えた技術習得 56
57. • スピード • スケーラビリティ • 将来性 57
58. 58 https://angular.jp/ Angularをはじめよう 日本語ドキュメント もあります
59. 新福 宜侑 @puku0x ng-fukuoka organizer Thank you! 59