Angular v7 について

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

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!