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
200
Fast Angular Apps from End to End
mgechev
1
200
The State of Angular
mgechev
1
200
The State of Angular
mgechev
1
380
Software Engineering as a Superpower
mgechev
1
200
Introduction to Angular
mgechev
1
210
Internals of the Angular CLI
mgechev
2
1.3k
The State of Angular
mgechev
1
220
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
mgechev
2
2.9k
Other Decks in Programming
See All in Programming
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.9k
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
370
iOSDC.pdf
chronos2500
2
660
クラシルを支える技術と組織
rakutek
0
190
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
kobakei
0
480
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.3k
Model Pollution
hschwentner
1
180
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
760
ソフトウェア設計の実践的な考え方
masuda220
PRO
3
450
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
150
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
140
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
370
Featured
See All Featured
Site-Speed That Sticks
csswizardry
11
880
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Automating Front-end Workflow
addyosmani
1371
200k
Bash Introduction
62gerente
615
210k
Why Our Code Smells
bkeepers
PRO
339
57k
Agile that works and the tools we love
rasmusluckow
331
21k
The Invisible Side of Design
smashingmag
301
51k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Balancing Empowerment & Direction
lara
4
680
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
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