Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular v7 について
Search
puku0x
November 09, 2018
Technology
1
250
Angular v7 について
Angular触ろうの会 in Fukuoka #7 LT
https://ng-fukuoka.connpass.com/event/106685/
puku0x
November 09, 2018
Tweet
Share
More Decks by puku0x
See All by puku0x
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
340
Findyの開発生産性を上げるためにやったこと
puku0x
1
430
Angularコーディングスタイルガイドはいいぞ
puku0x
1
140
Nx CloudでCIを爆速にした話
puku0x
0
510
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.5k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
700
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
1.8k
Nxはいいぞ
puku0x
0
640
Angularの静的サイトジェネレーター「Scully」の最新情報
puku0x
0
250
Other Decks in Technology
See All in Technology
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
320
Signals Unleashed: The Full Guide
rainerhahnekamp
0
360
Postman v10リリース後を振り返る
nagix
0
120
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
14
35k
PHPカンファレンス小田原2024
ysknsid25
3
660
プロデザ! BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
3
240
SREとその組織類型
tatsuo48
8
1.5k
Discord とビルダー&チャットボットの使い方 / How to use Discord and Builder & Chatbots
ks91
PRO
0
130
社内勉強会運営のコツ
senoo
6
1.1k
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
200
インシデントレスポンスのライフサイクルを廻すポイントってなに / Pinpoints of Incidentresponse Lifecycle for Operation
sakaitakeshi
1
300
"好き"との生活/Regularly update profile with GitHub Actions
judeeeee
0
150
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
36
2k
RailsConf 2023
tenderlove
2
530
The Cost Of JavaScript in 2023
addyosmani
14
3.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
4 Signs Your Business is Dying
shpigford
175
21k
The Mythical Team-Month
searls
215
42k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
990
The Art of Programming - Codeland 2020
erikaheidi
41
12k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
646
57k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Transcript
Angular v7について 新福 宜侑 @puku0x ng-fukuoka organizer
Angular 主にGoogleが開発するフロントエンドフレームワーク • フルスタック • 高いパフォーマンス • 充実したエコシステム https://angular.io/
Angular 7
Angularのバージョン • セマンティックバージョニング採用 7.0.0 Patch: バグ修正 Minor: 機能追加(破壊的変更なし) Major: 半年毎に更新(破壊的変更あり)
サポート期間 v5 v6 v7 v5 LTS v6 LTS v7 LTS
半年 1年 今ここ
Angular v7 • 依存関係の更新 ◦ TypeScript 3.1 ◦ RxJS 6.3
◦ Node.js 10対応 • ツール群と周辺ライブラリの更新
CLI
Angular CLI v7 • angular.ioにドキュメント追加 • プロンプト追加 ◦ ng new
や ng add 時に選択肢が追加
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 ]
x-prompt schematic "routing": { "type": "boolean", "description": "Generates a routing
module.", "default": false, "x-prompt": "Would you like to add Angular routing?" },
ビルド周り • 不要なポリフィル削除 • budgetsオプション ◦ CLI v1.7の頃からあった ◦ v7から新規作成時にデフォルトで付く
Bundle budgets "budgets": [{ "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb"
}] バンドル単位, %設定も可 { "type": "bundle", "name": "main", "baseline": "300kb", "maximumWarning": “10%" }
Angular Material
Angular Material / CDK v7 • 新Material Design対応 • 新機能
◦ バーチャルスクロール ◦ ドラッグ&ドロップ
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
Virtual Scroll(2) <cdk-virtual-scroll-viewport itemSize="50"> <div *cdkVirtualFor="let item of items">{{item}}</div> </cdk-virtual-scroll-viewport>
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
Drag and Drop(2) <div cdkDropList (cdkDropListDropped)="drop($event)"> <div *ngFor="let item of
list" cdkDrag>{{item}}</div> </div>
Angular Elements
Angular Elements • v6でShadowDOM v1対応 • v7でContent Projection対応 <custom-element>ここの部分</custom-element>
Content projection @Component({ selector: 'app-hello', template: `<h1><slot></slot></h1>`, encapsulation: ViewEncapsulation.ShadowDom //
必須 }) export class HelloComponent {}
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" の指定が必要
v7.1.0-beta
Router • GuardのリダイレクトにUrlTree指定可 @Injectable() export class AuthGuard implements CanActivate {
canActivate(router: Router, route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { return router.parseUrl('/login'); // false返さなくてもOK! } }
Ivy
Ivy 新しいレンダラー ・バンドルサイズ削減 ・高速なビルド ・シンプルなAPI ng-conf 2018: Angular Keynote https://docs.google.com/presentation/d/1zgpjyV
kDgUPfGKuxOcU0lLusCiMSfLZZjYHWrFvl71I
検証段階のため v7には含まれず ↓ステータスはこちら https://github.com/angular/angular/blob/master/packages/core/src/render3/STATUS.md
$ ng new my-app --experimental-ivy ※開発中のためプロダクション導入非推奨
まとめ • ツールの拡充でより使いやすくなった • Angular Elementsの強化 • Ivyの今後に期待
おまけ
v7のエイプリルフールネタ • A new ng-compiler ◦ ビルドサイズが10バイトとか無理 • Splitting of
@angular/core ◦ コアが418個に分割される、DDoSか • @aiStore – A built-in AI-powered store solution ◦ そんなものはない • @angular/mine ◦ あかんやつ
【宣伝】フロントエンドカンファレンス【福岡】 https://frontend-conf.fukuoka.jp/
新福 宜侑 @puku0x ng-fukuoka organizer Thank you!