1 of 83

ng-conf 2019

Day 1 Keynote

Brad Green

@BradlyGreen

Igor Minar

@IgorMinar

2 of 83

3 of 83

Angular Products

Angular

Protractor

Forms

PWA

Augury

Language Services

Router

Elements

CDK

Universal

Karma

Labs

Compiler

i18n

Http

Material

Animations

CLI

4 of 83

Frictionless Updates

5 of 83

ng update @angular/cli @angular/core

6 of 83

The Update Experience

7 of 83

We believe that the best measure of a healthy codebase and development team, is the time it takes from wanting a change to the time it is developed and deployed in production.

Mart Ganzevles

8 of 83

Air France / KLM Upgrade times

Angular Versions

30

20

10

0

30d

14d

1d

v2 to v4

v4 to v5

v5 to v6

v6 to v7

Time in Days

9 of 83

Angular Community

10 of 83

angular.io grew >50% in 2018

2015

2016

2017

2018

11 of 83

Daddy, did you pick your nose when you were a kid?

12 of 83

13 of 83

It’s just a compliment after all!

Thursday 3:00 PM

Grand Ballroom B

How tech communities can change your life

Friday 11:47 AM

Grand Ballroom

14 of 83

Angular Version 8 RC

15 of 83

Timeline

Version 8 RC

Version 8 Final

Version 9

Today

~May

Q4

16 of 83

Try Version 8 RC

update.angular.io

Instructions

next.angular.io

Docs

17 of 83

Smaller apps with Differential Loading

Evergreen

Legacy

Minimal polyfill

Modern syntax

Full polyfill

ES5 syntax

18 of 83

Differential Loading Savings

41Kb

Before

After

For angular.io

7-20%

19 of 83

More Features

Builders

Deploy

Web Workers

Service Worker Improvements

Lazy Loading Via import()

AngularJS $location Support

Simplified “Getting Started” Guide

Better IDE Completions

20 of 83

Work in progress

21 of 83

Build like Google with Bazel

22 of 83

Shifting Development Landscape

Java, C#, etc.

COMPLEXITY

JavaScript

23 of 83

Bazel Benefits

Incremental build and test

Full-stack

Scale on the Cloud

24 of 83

Bazel Users

Google

Lucidchart

LogiOcean

Angular

25 of 83

Angular Products

Angular

Protractor

Forms

PWA

Augury

Language Services

Router

Elements

CDK

Universal

Karma

Labs

Compiler

i18n

Http

Material

Animations

CLI

26 of 83

Angular framework CI faster with RBE

4000

3000

2000

1000

0

60 min

7.5 min

Before RBE

After RBE

27 of 83

Run Bazel in the CLI

28 of 83

Get all the Bazel details

The Bazel Opt-In Preview is Here

Friday 1:30 PM

Grand Ballroom

29 of 83

Bazel team is here at ng-conf!

Wednesday: 10am - 1:30pm

Expo hall at the Google Cloud & Firebase table

Thursday: 1 - 3pm

Bagatelle (3rd floor)

Friday: 10am - 1:30pm

Expo hall at the Google Cloud & Firebase table

30 of 83

Ivy Renderer

Faster compilation

Smaller

Simpler debugging

Improved type checking

Backwards compatible

31 of 83

Try Ivy in Version 8 RC

ng new my-app --enable-ivy

next.angular.io/guide/ivy

32 of 83

Ivy @ Google

97%

Passing unit, integration, and screenshot tests

Representing hundreds of thousands of tests across Google apps using Angular

33 of 83

Backwards Compatibility for You

Few dependencies

Many dependencies

Low risk

Higher risk

34 of 83

Simpler Debugging in Version 8 RC

Breakpoints in HTML

Debuggable change detection

35 of 83

Smaller

160

120

90

60

30

0

151kB

View Engine

131kB

View Engine + Differential

126kB

Ivy Compat

109kB

Ivy Compat + Differential

Ivy Future API + Differential

14kB

Recommended

Help us test!

Thrill seekers

Angular hello world app, minified, uncompressed

36 of 83

BONUS: Lower memory requirements

Angular Test Suites

Application simulation

Material unit tests

memory

30%

91%

37 of 83

BONUS: Faster tests

Framework unit tests

time

Material unit tests

time

38%

80%

Angular Test Suites

38 of 83

BONUS: Fixed Long Standing Bugs

Descendants flag works inconsistently

Queries have inconsistent resolution timing

Change detection runs too often

Class bindings override other classes

ContentChildren queries select host node

39 of 83

Ivy Renderer

Backwards compatible

Simpler debugging

Lower memory

Faster tests

Bug fixes

40 of 83

Ivy Renderer

Faster compilation

Smaller

Improved type checking

v9

41 of 83

Version 9 (Q4 2019)

Ivy as Default

Bazel in CLI

Fully Featured & Stable

42 of 83

Design considerations + Community

Igor Minar

Angular Tech Lead

43 of 83

Compatible

44 of 83

Angular

is an ecosystem that

you can rely on.

45 of 83

Evergreen

46 of 83

millions

Angular Photon

(prototypes)

55 of 83

Not Every App is a SPA

Today 3:55 PM

Web Components with Angular Elements: Beyond the Basics

Today 10:50 AM

56 of 83

billions

Billion user apps

Enterprise

apps

Small-medium apps

Demos

Edu apps

Number of users

0

Number of apps

millions

Angular Photon

(prototypes)

57 of 83

Hello Friends!

58 of 83

Angular

is an ecosystem that

is people-oriented

59 of 83

60 of 83

61 of 83

Values

Apps that users ❤ to use

Apps that developers ❤ to build

Community where everyone feels welcome

62 of 83

Angular

is

open-source

63 of 83

❤

OSS

64 of 83

OSS

Developed on GitHub

CI with Google

(Google runs on development HEAD)

65 of 83

OSS

66 of 83

43 Amazing People

67 of 83

Angular Team

Framework

Components

Tooling

Developer Relations

Documentation

68 of 83

Angular Organization

Googlers

(with access to google3)

Engage with the Community

Create Opportunities

Ensure Long Term Success

74 of 83

9 New Community Collaborators

Adam Plumer

Cédric Exbrayat

Deborah Kurata

Jason Bedard

JaiLi Passion

Joost Koehoorn

Manfred Steyer

Markus Padourek

Sam Julien

75 of 83

~40 more in 2019

76 of 83

Angular GDE

Angular Collaborator

77 of 83

Not just to code contributions

Docs

Triaging / Support

Design / UX Research

78 of 83

How to Join?

Community: Be an awesome contributor

Enterprise: devrel@angular.io

79 of 83

80 of 83

Empathy and Respect

81 of 83

Enjoy ng-conf!

82 of 83

Thank You!

g.co/ng/ng-conf-2019-keynote1

@BradlyGreen

@IgorMinar