What's New in Angular version 8

Slide 1

Slide 1 text

@yourtwitter What’s New in Angular Minko Gechev twitter.com/mgechev  github.com/mgechev  blog.mgechev.com

Slide 2

Slide 2 text

@mgechev Angular version 8 is coming out soon!

Slide 3

Slide 3 text

@mgechev Release schedule Two major releases a year

Slide 4

Slide 4 text

@yourtwitter @mgechev ● Following SemVer ● Predictable & guaranteed ● Place for innovation Release policy

Slide 5

Slide 5 text

@mgechev Still…major release means potential breaking changes

Slide 6

Slide 6 text

@mgechev

Slide 7

Slide 7 text

@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

Slide 8

Slide 8 text

@yourtwitter ng update @angular/cli @angular/core Migrate to latest Angular

Slide 9

Slide 9 text

@yourtwitter [ { path: ‘a', loadChildren: './a.module#AModule' }, ... ]; Version 7 Version 8

Slide 10

Slide 10 text

@yourtwitter [ { path: ‘a', loadChildren: './a.module#AModule' }, ... ]; [ { path: 'a', loadChildren: import('./a.module') .then(m => m.AModule); },  ... ];   Version 7 Version 8

Slide 11

Slide 11 text

@mgechev

Slide 12

Slide 12 text

@mgechev

Slide 13

Slide 13 text

@mgechev Angular Community

Slide 14

Slide 14 text

@mgechev angular.io grew >50% in 2018

Slide 15

Slide 15 text

@mgechev How to contribute?

Slide 16

Slide 16 text

@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

Slide 17

Slide 17 text

@mgechev

Slide 18

Slide 18 text

@mgechev

Slide 19

Slide 19 text

@mgechev Angular Collaborators Program Adam Plumer Deborah Kurata Sam Julien Markus Padourek Manfred Steyer Jason Bedard Cédric Exbrayat JiaLi Passion Joost Koehoorn

Slide 20

Slide 20 text

@mgechev Angular Collaborators Program Manfred Steyer

Slide 21

Slide 21 text

twitter.com/mgechev

Slide 22

Slide 22 text

@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

Slide 23

Slide 23 text

@mgechev -65KB polyfills ~2-10% smaller bundles

Slide 24

Slide 24 text

@mgechev Step 1: Load HTML Step 2: Look at script tags Step 2: Download right version Differential loading

Slide 25

Slide 25 text

@yourtwitter Differential loading Differential loading

Slide 26

Slide 26 text

@yourtwitter Differential loading Differential loading

Slide 27

Slide 27 text

@yourtwitter @mgechev Differential loading ✅ Simple deployment infrastructure ✅ Proposal for a browser standard WHATWG

Slide 28

Slide 28 text

@mgechev Version 8 features Builders Deploy Web Workers SW Improvements Code-splitting with import AngularJS $location support Better IDE completion Simplified “Getting started” guide

Slide 29

Slide 29 text

@mgechev Version 8 features Builders Deploy Web Workers SW Improvements Code-splitting with import AngularJS $location support Better IDE completion Simplified “Getting started” guide

Slide 30

Slide 30 text

@mgechev

Slide 31

Slide 31 text

@mgechev Builders allow you to override existing commands

Slide 32

Slide 32 text

@mgechev

Slide 33

Slide 33 text

@mgechev Partnering with

Slide 34

Slide 34 text

@mgechev Work in progress…

Slide 35

Slide 35 text

@mgechev Build like Google

Slide 36

Slide 36 text

@yourtwitter @mgechev Benefits of Bazel ● Incremental builds ● Sharing cache between team & CI ● Full-stack support ● Scale on the cloud

Slide 37

Slide 37 text

@mgechev Few Bazel users Google Lucidchart LogiOcean

Slide 38

Slide 38 text

@mgechev Speed improvements for Angular’s CI build 0 1000 2000 3000 4000 Before RBE After RBE

Slide 39

Slide 39 text

@mgechev Bazel opt-in preview

Slide 40

Slide 40 text

@yourtwitter npm i -g @angular/bazel  ng new my-app --collection=@angular/bazel Try Bazel in version 8

Slide 41

Slide 41 text

@yourtwitter @mgechev Ivy ● Simpler debugging ● Backwards compatible ● Lower memory usage ● Faster tests ● Smaller ● Faster compilation ● Improved type checking

Slide 42

Slide 42 text

@mgechev Backwards compatible 97% Passing unit, integration, screenshot tests at Google

Slide 43

Slide 43 text

@mgechev Faster tests -38% Framework unit tests time -80% Material unit tests time

Slide 44

Slide 44 text

@mgechev Lower memory requirements -30% Framework unit tests memory -91% Material unit tests memory

Slide 45

Slide 45 text

@yourtwitter @mgechev Work pending in Angular Ivy ● Smaller ● Faster compilation ● Improved type checking

Slide 46

Slide 46 text

@mgechev Ivy opt-in preview

Slide 47

Slide 47 text

@yourtwitter ng new my-app --enable-ivy Try Ivy in version 8

Slide 48

Slide 48 text

@yourtwitter @mgechev Recap ● Release schedule ● Evergreen Angular ● Collaborators program ● Differential loading & Builders API ● Bazel & Ivy in opt-in preview

Slide 49

Slide 49 text

@mgechev Thank you! twitter.com/mgechev  github.com/mgechev  blog.mgechev.com