Angular Keynote - Microsoft... · Angular 6 & 7 Building a better developer experience. ... Router Elements CDK Universal Karma Labs Compiler i18n Http Material Animations CLI. Angular

Angular Keynote

Brad Green

AngularMix, October 2018

@bradlygreenhttp://bit.ly/AngularMix-2018

@

First eng review:Nov 16, 2010

You are all liars!

Urs Hölzle

Later that day...

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

Angular in 2018

Used by more Google

developers than any

other front end framework

Angular Everywhere

Startups Choosing Angular

news.crunchbase.com/news/popular-web-frameworks-seed-early-stage-startups/

30-day active visitors to angular.io

40%

?

30-day active visitors to angular.io

40%

Help us grow

"Brad will never go to college and will likely

never have a full-time job"

ngGirls

Email

Corporate Sponsorship

info@ng-girls.org

Individual Sponsorship

Sponsor

patreon.com/ngGirls

Mentoring

Volunteer

ng-girls.org/#descrption

Create excellent interactions

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...

Mostly good stuff happens

goodbad

inte

ract

ions

Code of Conduct Area

What we're after

goodbad

inte

ract

ions

What to do

Bad Stuff

Tell us

Good Stuff

Tell everyone!

799 Worldwide Meetupsangular.meetup.com

Creating a Successful Meetup at Your Company

Building meetups at work

Friendships / networks

New concepts

Company-wide visibility

Personal confidence

Angular 6 & 7Building a better developer experience

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

The cause for server side rendering

SpeedPreview SEO

The cause for server side rendering

Speed SEOPreview

Good Fast Popular

ShoppingExpress

2.3x Faster!

Migration Assistant

AngularJS Angular

Migration Assistant

Outlines prep work

Analyzes AngularJS apps

Recommends migration path

Extensible CLI Ecosystem

new generate update add

componentdirective

pipeservice

...

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

Per-library 'generate' schematics

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

Ecosystem supporting 'ng add'

Elements PWAMaterial

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

docs.nativescript.org/angular/code-sharing/intro

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

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 toolbarstepper tooltip tree

Behaviors

Angular Component DevKit (CDK)

Accessibility

Layout Observers Overlay

Bidirectionality

Portal Scrolling Virtual Scroll

Drag & Drop

Generic Components

Stepper

Table

Tree

Virtual Scroll & Drag-n-Drop

Nebular Using CDK

akveo.github.io/nebular/

Angular Prototyping Tool 3:40 pm

Me

Steve

Angular FutureSmaller, faster, easier

Bazel

Scale

Speed

Multi-language

In the CLI (later)

Fast, stable builds

BazelAccepting early access

Used by Angular itself

Office hours tomorrow!

Fast, stable builds

In Angular Labs

Expanding Angular Use CasesIvy Renderer + Angular Elements

Lightweight

Websites

Expanding Angular Use Cases

Applications

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

25 Kb

20 Kb

10 Kb

5 Kb

0

30 Kb

7.3 Kb2.7 Kb

IvyMinified

IvyCompressed

Cake Goal

10 Kb

'Hello, World' Cake Threshold36 Kb

Today (compressed)(no-zone.js)

Smaller

Backwards Compatible

Firebase GoogleAnalytics

GoogleExpress

GoogleCloud

Platform

+600 more

...

Ivy Runtime

Template Compiler

Verification @ Google

Roadmap

Today ReleaseLabs

Stay in touch

twitter.com/angular youtube.com/angular

What about Urs?

Thanks!

@bradlygreen http://bit.ly/AngularMix-2018