Angular Keynote

AngularMix, October 2018

Brad Green

@bradlygreen

Hello my friends!

@

First eng review:

Nov 16, 2010

You are all liars!

Urs Hölzle‎

He reminded me that he said it with a smile.

Yeah, ok, he was right.

Later that day...

Check out the framework Urs doesn't want you to use!

Apparently, it is very hard to get fired at Google. I have more stories. Ask me at the party.

Angular in 2018

Used by more Google developers than any other front end framework

I'm telling you this because it's mind-blowing how far we've come.

Angular Everywhere

Startups Choosing Angular

It's great that we're seeing so many well established companies using Angular and growing their adoption.

I'm also super pleased to see that the next generation of super stars is picking Angular. Here's the results of a survey done by CrunchBase where they asked which frameworks were being used by Seed and Early Stage startups. I particularly like it because they include both front end and backend frameworks. And there at the very top of the list is Angular.

30-day active visitors to angular.io

40%

30-day active visitors to angular.io

?

40%

Help us grow

You might want to shield your eyes for the slide that's coming next...

"Brad will never go to college and will likely never have a full-time job"

Like many of us, I had a bit of a rocky start in life.

In first grade...slow motion kid.

Here I am at age 8 when I was in third grade.

My teacher, Mrs. Schneider felt she needed to break the news to my parents. During

I can only imagine that this must have felt like a punch in the gut to my parents. To be told your child had failed in life before it's even begun.

ngGirls

You might want to shield your eyes for the slide that's coming next...

Corporate Sponsorship

Email

info@ng-girls.org

Individual Sponsorship

Sponsor

patreon.com/ngGirls

Mentoring

Volunteer

ng-girls.org/#descrption

You learn. I have never taught something without learning. I do this. I started out in teaching. I volunteer at Google to teach classes. I teach to the incoming noogler classes. I teach product excellence.

It feels good - Simon Sinek story

Create excellent interactions

You might want to shield your eyes for the slide that's coming next...

Daddy, do you pick your nose?

When you were a kid, did you pick your nose and eat your boogers?

Do you want to see me eat my boogers?


Then don't look at me...

I cannot wait to tell this story when she starts dating. Like in 30 years.

You might want to shield your eyes for the slide that's coming next...

Behold! Angular's code of conduct!

Yes we have one and we take it very seriously. If folks persist in bad behaviour

Mostly good stuff happens

good

bad

interactions

Code of Conduct Area

What we're after

good

bad

interactions

What to do

Bad Stuff

Tell us

Good Stuff

Tell everyone!

799 Worldwide Meetups

angular.meetup.com

Building meetups at work

Friendships / networks

New concepts

Company-wide visibility

Personal confidence

Angular 6 & 7

Building a better developer experience

Developers told us "hey maybe no radical changes like...ever...and just do incremental yet awesome improvements that are easy to adopt"

One of the things we do is ask for feedback from early adopters. 80% of GDEs said it took less than 20 mintues to upgrade their projects.

Fully supported, fully integrated

Angular

Protractor

Forms

PWA

Augury

Language Services

Router

Elements

CDK

Universal

Karma

Labs

Compiler

i18n

Http

Material

Animations

CLI

Angular Universal

Angular Universal

req

html

js

Initial paint times 2.3x faster

Faster time to interactive

The cause for server side rendering

Speed

Preview

SEO

The cause for server side rendering

Speed

SEO

Preview

Good

Fast

Popular

Shopping

Express

Place your screenshot here

2.3x Faster!

Migration Assistant

AngularJS

Angular

ngMigration Assistant is a command-line tool that analyzes an AngularJS application and recommends a migration path. It provides statistics on the complexity, size, and patterns of an app. It outlines the necessary preparation work for migrating toAngular

Migration Assistant

Outlines prep work

Analyzes AngularJS apps

Recommends migration path

ngMigration Assistant is a command-line tool that analyzes an AngularJS application and recommends a migration path. It provides statistics on the complexity, size, and patterns of an app. It outlines the necessary preparation work for migrating toAngular

Extensible CLI Ecosystem

new

generate

update

add

component

directive

pipe

service

...

Using 'ng add'

\

> ng add @angular/pwa

> ng add @angular/elements

> ng add @angular/material

> ng add @ng-bootstrap/schematics

> ng add @clr/angular

> ng add @nativescript/schematics

npm install @angular/cli@next

ng update @angular/cli --migrate-only --from=1.7.0

ng generate @angular/material:material-nav --name=main-nav

Per-library 'generate' schematics

\

> ng g @angular/material:material-nav --name=main-nav

npm install @angular/cli@next

ng update @angular/cli --migrate-only --from=1.7.0

ng generate @angular/material:material-nav --name=main-nav

Ecosystem supporting 'ng add'

Elements

PWA

Material

ng-bootstrap

Clarity

NativeScript

NativeScript

Code sharing with native mobile

ng serve

Web App

npm run ios

npm run android

Native Apps

Code sharing with native mobile

Angular Console

One-step install

CLI Graphical UI

Interactive command discovery

StackBlitz

Angular Language Service

CLI Schematics Extensions

Faster than desktop

CLI Docs now in angular.io

Material & CDK

Drag & Drop

Virtual Scroll

Angular Material Design Components

date-

picker

menu

badge

bottom sheet

button

card

dialog

grid-list

icon

radio

select

sidenav

auto-

complete

expansion

progress

checkbox

input

slide toggle

chips

list

slider

snack bar

table

tabs

toolbar

stepper

tooltip

tree

Angular Component DevKit (CDK)

Behaviors

Accessibility

Layout

Observers

Overlay

Bidirectionality

Portal

Scrolling

Virtual Scroll

Drag & Drop

Generic Components

Stepper

Table

Tree

Virtual Scroll & Drag-n-Drop

Nebular Using CDK

https://akveo.github.io/nebular/

https://twitter.com/akveo_inc

Angular Prototyping Tool

3:40 pm

This year we started the Angular for Designers initiative and have partnered with a team on Google Cloud to build a new design tool that we will be announcing this afternoon at 3:40. The Angular Prototyping Tool build prototypes using their production components without writing code. The problem they are trying to solve is that companies have invested in componentizing their design systems, think Material or Clarity, and there is now a wealth of components that are readily available. Making all of these components accessible to designers will empower them to work from a single source of truth with their developers. Come back to this room at 3:40 to see a live demo of the Angular Prototyping Tool.

Me

Steve

Angular Future

Smaller, faster, easier

Fast, stable builds

Bazel

Scale

Speed

Multi-language

In the CLI (later)

Fast, stable builds

Bazel

Accepting early access

Used by Angular itself

Office hours tomorrow!

In Angular Labs

Expanding Angular Use Cases

Ivy Renderer + Angular Elements

Expanding Angular Use Cases

Applications

Lightweight

Websites

Industrial strength

Angular Universal

Optimization & lazy loading

Angular Elements

Ivy Renderer

Embed anywhere with Angular Elements

Self bootstrapping

Standards-based

Works everywhere

Available now

Ivy Renderer

Faster compilation

Smaller

Dead-simple debugging

Smaller

25 Kb

20 Kb

10 Kb

5 Kb

0

30 Kb

7.3 Kb

2.7 Kb

Ivy

Minified

Ivy

Compressed

Cake Goal

10 Kb

'Hello, World' Cake Threshold

36 Kb

Today (compressed)

(no-zone.js)

In current Angular the compressed Hello World is around 36 Kb and as Kara already revealed our hello world is 7.3kb minified and 2.7 kb compressed. So Ivy successfully beats the 10KB threshold on both minified and compressed metrick. And we don't just squeeze by, we make it with a large margin.

Backwards Compatible

Firebase

Google

Analytics

Google

Express

Google

Cloud Platform

+600 more

...

Now when I say that Ivy is backwards compatible I really want to impress the importance of this. At google we now have in excess of 600 applications which are build on top of new Angular. We also have one version policy, which means we are not allowed to keep existing applications on old versions of Angular. And because we are syncing Angular into Google daily it is required that all applications continue to work on every sync. It would be literally impossible for us to make this a breaking change. So by the time you get the code you can feel confident that it has been well vented by real world applications.

Roadmap

Ivy Runtime

Template Compiler

Verification @ Google

Today

Release

Labs

Stay in touch

What about Urs?

Thanks!

AngularMix Keynote 2018 Public - Google Slides