Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular v7 について

8bc941b1868dfc680dd1e11a797ca385?s=47 puku0x
November 09, 2018

Angular v7 について

Angular触ろうの会 in Fukuoka #7 LT
https://ng-fukuoka.connpass.com/event/106685/

8bc941b1868dfc680dd1e11a797ca385?s=128

puku0x

November 09, 2018
Tweet

More Decks by puku0x

Other Decks in Technology

Transcript

  1. Angular v7について 新福 宜侑 @puku0x ng-fukuoka organizer

  2. Angular 主にGoogleが開発するフロントエンドフレームワーク • フルスタック • 高いパフォーマンス • 充実したエコシステム https://angular.io/

  3. Angular 7

  4. Angularのバージョン • セマンティックバージョニング採用 7.0.0 Patch: バグ修正 Minor: 機能追加(破壊的変更なし) Major: 半年毎に更新(破壊的変更あり)

  5. サポート期間 v5 v6 v7 v5 LTS v6 LTS v7 LTS

    半年 1年 今ここ
  6. Angular v7 • 依存関係の更新 ◦ TypeScript 3.1 ◦ RxJS 6.3

    ◦ Node.js 10対応 • ツール群と周辺ライブラリの更新
  7. CLI

  8. Angular CLI v7 • angular.ioにドキュメント追加 • プロンプト追加 ◦ ng new

    や ng add 時に選択肢が追加
  9. CLI Prompts $ 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 ]
  10. x-prompt schematic "routing": { "type": "boolean", "description": "Generates a routing

    module.", "default": false, "x-prompt": "Would you like to add Angular routing?" },
  11. ビルド周り • 不要なポリフィル削除 • budgetsオプション ◦ CLI v1.7の頃からあった ◦ v7から新規作成時にデフォルトで付く

  12. Bundle budgets "budgets": [{ "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb"

    }] バンドル単位, %設定も可 { "type": "bundle", "name": "main", "baseline": "300kb", "maximumWarning": “10%" }
  13. Angular Material

  14. Angular Material / CDK v7 • 新Material Design対応 • 新機能

    ◦ バーチャルスクロール ◦ ドラッグ&ドロップ
  15. Virtual Scroll(1) • 簡単に仮想スクロールが作れる ◦ cdk-virtual-scroll-viewport ◦ *cdkVirtualFor https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-s croll-drag-and-drop-and-more-c594e22e7b8c

    https://stackblitz.com/angu lar/bxoebkkjoyd
  16. Virtual Scroll(2) <cdk-virtual-scroll-viewport itemSize="50"> <div *cdkVirtualFor="let item of items">{{item}}</div> </cdk-virtual-scroll-viewport>

  17. Drag and Drop(1) • 簡単にドラッグドロップリストが作れる ◦ cdkDropList ◦ cdkDrag https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-s

    croll-drag-and-drop-and-more-c594e22e7b8c https://stackblitz.com/angu lar/glvkoklvppy
  18. Drag and Drop(2) <div cdkDropList (cdkDropListDropped)="drop($event)"> <div *ngFor="let item of

    list" cdkDrag>{{item}}</div> </div>
  19. Angular Elements

  20. Angular Elements • v6でShadowDOM v1対応 • v7でContent Projection対応 <custom-element>ここの部分</custom-element>

  21. Content projection @Component({ selector: 'app-hello', template: `<h1><slot></slot></h1>`, encapsulation: ViewEncapsulation.ShadowDom //

    必須 }) export class HelloComponent {}
  22. ngDoBootstrap export class AppModule implements DoBootstrap { constructor(injector: Injector) {

    const el = createCustomElement(HelloComponent, { injector }); customElements.define('app-hello', el); } ngDoBootstrap(appRef: ApplicationRef) {} } 明示的にInterfaceを 指定するようになった ※ ビルドの際は tsconfig.json で "target": "es2015" の指定が必要
  23. v7.1.0-beta

  24. Router • GuardのリダイレクトにUrlTree指定可 @Injectable() export class AuthGuard implements CanActivate {

    canActivate(router: Router, route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { return router.parseUrl('/login'); // false返さなくてもOK! } }
  25. Ivy

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

    kDgUPfGKuxOcU0lLusCiMSfLZZjYHWrFvl71I
  27. 検証段階のため v7には含まれず ↓ステータスはこちら https://github.com/angular/angular/blob/master/packages/core/src/render3/STATUS.md

  28. $ ng new my-app --experimental-ivy ※開発中のためプロダクション導入非推奨

  29. まとめ • ツールの拡充でより使いやすくなった • Angular Elementsの強化 • Ivyの今後に期待

  30. おまけ

  31. v7のエイプリルフールネタ • A new ng-compiler ◦ ビルドサイズが10バイトとか無理 • Splitting of

    @angular/core ◦ コアが418個に分割される、DDoSか • @aiStore – A built-in AI-powered store solution ◦ そんなものはない • @angular/mine ◦ あかんやつ
  32. 【宣伝】フロントエンドカンファレンス【福岡】 https://frontend-conf.fukuoka.jp/

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