Slide 1

Slide 1 text

Angular Platform FukuokaJS #7

Slide 2

Slide 2 text

Noriyuki Shinpuku ng-fukuoka organizer @puku0x 2 VEGA corporation Co., Ltd.

Slide 3

Slide 3 text

フロントエンドの課題 ● 複雑&大規模化 ● デザイン ● パフォーマンス ● トレンドの追従 ● 生産性 ● 保守 : 3

Slide 4

Slide 4 text

4 つらい

Slide 5

Slide 5 text

5 Angular

Slide 6

Slide 6 text

Angular Googleが開発するフロントエンドフレームワーク ● フルスタック ● 堅牢&高速 ● 充実したエコシステム https://angular.io/ 6

Slide 7

Slide 7 text

Why Angular? 7

Slide 8

Slide 8 text

8

Slide 9

Slide 9 text

TypeScript ● JSのスーパーセット ● 漸進的型付け言語 ● 高い保守性 9 TypeScript ES201x ES5

Slide 10

Slide 10 text

コンポーネント @Component({ selector: 'app-root', template: `

Hello, {{ title }} !

`, }) export class AppComponent { title = 'Angular'; } 10

Slide 11

Slide 11 text

サービス/プロバイダ 11 @Injectable({ providedIn: 'root' }) export class UserService { constructor(private http: HttpClient) {} fetchUsers() { return this.http.get('/users'); } }

Slide 12

Slide 12 text

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 { }

Slide 13

Slide 13 text

13 is “Full Stack”

Slide 14

Slide 14 text

公式パッケージ 14

Slide 15

Slide 15 text

Angular Material 15

Slide 16

Slide 16 text

Angular Material ● 公式UIライブラリ ● 新Material Design対応 16 https://material.angular.io

Slide 17

Slide 17 text

17

Slide 18

Slide 18 text

Component Dev Kit 18

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Angular Elements 20

Slide 21

Slide 21 text

Custom Elementsとして出力 export class AppModule implements DoBootstrap { constructor(injector: Injector) { const el = createCustomElement(HelloComponent, { injector }); customElements.define('app-hello', el); } ngDoBootstrap(appRef: ApplicationRef) {} } 21

Slide 22

Slide 22 text

22 Tools

Slide 23

Slide 23 text

Angular CLI 23 環境構築 $ ng new コード生成/機能追加 $ ng generate $ ng add 開発/リリース $ ng serve $ ng build --prod https://cli.angular.io/

Slide 24

Slide 24 text

$ npm install -g @angular/cli 24

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

● Schematicsによる拡張 CLIエコシステム 26

Slide 27

Slide 27 text

27 $ ng add

Slide 28

Slide 28 text

ng add 対応パッケージ 28

Slide 29

Slide 29 text

29 $ ng update

Slide 30

Slide 30 text

サポート期間 半年 年 今ここ 30 APIの破壊的変更は 段階的に適用される

Slide 31

Slide 31 text

31 https://link.medium.com/KgTODwwFWT

Slide 32

Slide 32 text

Language Service(VS Code 拡張) 32 ● コード補完 ● テンプレートチェック ● 定義ジャンプ https://marketplace.visualstudio.com/items?itemName =Angular.ng-template

Slide 33

Slide 33 text

33

Slide 34

Slide 34 text

Angular Console Angular CLIのGUI版 デスクトップアプリ または VS Code拡張 34 https://angularconsole.com/

Slide 35

Slide 35 text

StackBlitz 35 オンライン版 VS Code 様々なテンプレート ● Angular ● Ionic ● React https://stackblitz.com/

Slide 36

Slide 36 text

36 Community

Slide 37

Slide 37 text

37 ng-japan 2018 Keynote

Slide 38

Slide 38 text

38 150万人/月のアクティブユーザ https://twitter.com/angular/status/1069727630734151680

Slide 39

Slide 39 text

39 https://news.crunchbase.com/news/popular-web-frameworks-seed-early-stage-startups/

Slide 40

Slide 40 text

40 国内 約1万人/月のアクティブユーザ

Slide 41

Slide 41 text

国内コミュニティ 41 ● 東京 ● 京都 ● 神戸 ● 福岡 ● 群馬 https://community.angular.jp/

Slide 42

Slide 42 text

Angular in 2019 42

Slide 43

Slide 43 text

Angular v8/v9 43

Slide 44

Slide 44 text

Ivy 新しいレンダラー ・バンドルサイズ削減 ・高速なビルド ・シンプルなAPI ng-conf 2018: Angular Keynote https://docs.google.com/presentation/d/1zgpjyV kDgUPfGKuxOcU0lLusCiMSfLZZjYHWrFvl71I 44

Slide 45

Slide 45 text

45 ng-conf 2018: Angular Keynote(和訳)

Slide 46

Slide 46 text

$ ng new my-app --experimental-ivy ※正常に動作しない場合があります 46

Slide 47

Slide 47 text

47 Bazel

Slide 48

Slide 48 text

Bazelビルドサポート $ npm i -g @angular/bazel $ ng new my-app --collection=@angular/bazel $ cd my-app $ ng serve $ ng build --prod 48

Slide 49

Slide 49 text

49 ngAtlanta 2019: Angular in 2019 http://bit.ly/ngAtlanta-2019 Angular Mix 2018: Angular Prototyping Tool http://bit.ly/AngularCodesign

Slide 50

Slide 50 text

50 Angular

Slide 51

Slide 51 text

51 学習コストが...

Slide 52

Slide 52 text

まぁわかる 52

Slide 53

Slide 53 text

でも 53

Slide 54

Slide 54 text

コストに見合う リターンがある 54

Slide 55

Slide 55 text

Angularを選んで良かったこと(1) ● 強いオピニオン ○ Angularチームのベストプラクティス ○ 高品質なデフォルトセット ○ 意思決定のコスト削減 ● プロダクトの価値に集中できる 55

Slide 56

Slide 56 text

Angularを選んで良かったこと(2) ● 将来の資産となる知識 ○ モダンなWeb技術 ○ 次世代のWeb標準 ○ コンポーネント設計、テスト設計 ● 将来を見据えた技術習得 56

Slide 57

Slide 57 text

● スピード ● スケーラビリティ ● 将来性 57

Slide 58

Slide 58 text

58 https://angular.jp/ Angularをはじめよう 日本語ドキュメント もあります

Slide 59

Slide 59 text

新福 宜侑 @puku0x ng-fukuoka organizer Thank you! 59