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
260
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
380
Findyの開発生産性を上げるためにやったこと
puku0x
1
470
Angularコーディングスタイルガイドはいいぞ
puku0x
1
180
Nx CloudでCIを爆速にした話
puku0x
0
590
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.6k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
730
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.1k
Nxはいいぞ
puku0x
0
670
Angularの静的サイトジェネレーター「Scully」の最新情報
puku0x
0
290
Other Decks in Technology
See All in Technology
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
640
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
ACRiルーム最新情報とAMD GPUサーバーのご紹介
anjn
0
160
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
Azure Pipelinesを使用したCICDベースラインアーキテクチャ実践
yuriemori
0
190
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
320
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
160
スレットハンティングについて知っておきたいこと
hacket
0
130
Featured
See All Featured
Web development in the modern age
philhawksworth
203
10k
Being A Developer After 40
akosma
72
580k
What's new in Ruby 2.0
geeforr
338
31k
The Cult of Friendly URLs
andyhume
75
5.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Atom: Resistance is Futile
akmur
261
25k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
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!