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
What's New in Angular version 8
Search
Minko Gechev
May 27, 2019
Programming
4
2.1k
What's New in Angular version 8
Minko Gechev
May 27, 2019
Tweet
Share
More Decks by Minko Gechev
See All by Minko Gechev
Change the World With Open Source Software
mgechev
0
190
Fast Angular Apps from End to End
mgechev
1
190
The State of Angular
mgechev
1
200
The State of Angular
mgechev
1
370
Software Engineering as a Superpower
mgechev
1
190
Introduction to Angular
mgechev
1
210
Internals of the Angular CLI
mgechev
2
1.3k
The State of Angular
mgechev
1
210
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
mgechev
2
2.9k
Other Decks in Programming
See All in Programming
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
3
380
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
ktr_0731
0
220
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
1
230
リッチエディターを安全に開発・運用するために
unachang113
1
350
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
10
1.5k
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
7.3k
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
440
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
260
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
330
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
7
1.7k
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
710
AIのメモリー
watany
12
1.2k
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Bash Introduction
62gerente
614
210k
How STYLIGHT went responsive
nonsquared
100
5.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Building Adaptive Systems
keathley
43
2.7k
Visualization
eitanlees
146
16k
Adopting Sorbet at Scale
ufuk
77
9.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Transcript
@yourtwitter What’s New in Angular Minko Gechev twitter.com/mgechev github.com/mgechev blog.mgechev.com
@mgechev Angular version 8 is coming out soon!
@mgechev Release schedule Two major releases a year
@yourtwitter @mgechev • Following SemVer • Predictable & guaranteed •
Place for innovation Release policy
@mgechev Still…major release means potential breaking changes
@mgechev
@mgechev 0 7.5 15 22.5 30 v2 to v4 v4
to v5 v5 to v6 v6 to v7 Air France / KLM Upgrade times
@yourtwitter ng update @angular/cli @angular/core Migrate to latest Angular
@yourtwitter [ { path: ‘a', loadChildren: './a.module#AModule' }, ... ];
Version 7 Version 8
@yourtwitter [ { path: ‘a', loadChildren: './a.module#AModule' }, ... ];
[ { path: 'a', loadChildren: import('./a.module') .then(m => m.AModule); }, ... ]; Version 7 Version 8
@mgechev
@mgechev
@mgechev Angular Community
@mgechev angular.io grew >50% in 2018
@mgechev How to contribute?
@yourtwitter @mgechev • Organize a meetup • Help with the
docs • Write a blog post • Help on StackOverflow • Answer questions on gitter • Introduce a bug fix • … Ways to contribute
@mgechev
@mgechev
@mgechev Angular Collaborators Program Adam Plumer Deborah Kurata Sam Julien
Markus Padourek Manfred Steyer Jason Bedard Cédric Exbrayat JiaLi Passion Joost Koehoorn
@mgechev Angular Collaborators Program Manfred Steyer
twitter.com/mgechev
@yourtwitter @mgechev Differential loading • Produce ES5 bundles for newer
browsers • Do not send polyfills to modern browsers • Smaller payload • Do not downlevel modern features • Faster execution • Smaller payload
@mgechev -65KB polyfills ~2-10% smaller bundles
@mgechev Step 1: Load HTML Step 2: Look at script
tags Step 2: Download right version Differential loading
@yourtwitter Differential loading <!DOCTYPE html> <html lang="en"> <head> <title>Differential loading
</title> </head> <body> <script type="module" src="app-es2015.js"> </script> <script nomodule src="app-es5.js"> </script> </body> </html>
@yourtwitter Differential loading <!DOCTYPE html> <html lang="en"> <head> <title>Differential loading
</title> </head> <body> <script type="module" src="app-es2015.js"> </script> <script nomodule src="app-es5.js"> </script> </body> </html>
@yourtwitter @mgechev Differential loading ✅ Simple deployment infrastructure ✅ Proposal
for a browser standard WHATWG
@mgechev Version 8 features Builders Deploy Web Workers SW Improvements
Code-splitting with import AngularJS $location support Better IDE completion Simplified “Getting started” guide
@mgechev Version 8 features Builders Deploy Web Workers SW Improvements
Code-splitting with import AngularJS $location support Better IDE completion Simplified “Getting started” guide
@mgechev
@mgechev Builders allow you to override existing commands
@mgechev
@mgechev Partnering with
@mgechev Work in progress…
@mgechev Build like Google
@yourtwitter @mgechev Benefits of Bazel • Incremental builds • Sharing
cache between team & CI • Full-stack support • Scale on the cloud
@mgechev Few Bazel users Google Lucidchart LogiOcean
@mgechev Speed improvements for Angular’s CI build 0 1000 2000
3000 4000 Before RBE After RBE
@mgechev Bazel opt-in preview
@yourtwitter npm i -g @angular/bazel ng new my-app --collection=@angular/bazel Try
Bazel in version 8
@yourtwitter @mgechev Ivy • Simpler debugging • Backwards compatible •
Lower memory usage • Faster tests • Smaller • Faster compilation • Improved type checking
@mgechev Backwards compatible 97% Passing unit, integration, screenshot tests at
Google
@mgechev Faster tests -38% Framework unit tests time -80% Material
unit tests time
@mgechev Lower memory requirements -30% Framework unit tests memory -91%
Material unit tests memory
@yourtwitter @mgechev Work pending in Angular Ivy • Smaller •
Faster compilation • Improved type checking
@mgechev Ivy opt-in preview
@yourtwitter ng new my-app --enable-ivy Try Ivy in version 8
@yourtwitter @mgechev Recap • Release schedule • Evergreen Angular •
Collaborators program • Differential loading & Builders API • Bazel & Ivy in opt-in preview
@mgechev Thank you! twitter.com/mgechev github.com/mgechev blog.mgechev.com