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
390
Software Engineering as a Superpower
mgechev
1
210
Introduction to Angular
mgechev
1
220
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
3k
Other Decks in Programming
See All in Programming
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
130
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
230
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
880
コード生成なしでモック処理を実現!ovechkin-dm/mockioで学ぶメタプログラミング
qualiarts
0
240
Cursorハンズオン実践!
eltociear
2
1.2k
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
1
120
Pythonに漸進的に型をつける
nealle
1
110
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
850
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
3
12k
Software Architecture
hschwentner
6
2.3k
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Into the Great Unknown - MozCon
thekraken
40
2.1k
How STYLIGHT went responsive
nonsquared
100
5.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Done Done
chrislema
185
16k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Code Review Best Practice
trishagee
72
19k
Being A Developer After 40
akosma
91
590k
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