1 of 62

Angular in 2019

ngAtlanta, January 2019

Brad Green

@bradlygreen

2 of 62

@

3 of 62

First eng review:

Nov 16, 2010

4 of 62

You are all liars!

Urs Hölzle‎

5 of 62

Later that day...

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

6 of 62

Angular in 2018

Used by more Google developers than any other front end framework

7 of 62

Angular Everywhere

8 of 62

Startups Choosing Angular

9 of 62

Growth (angluar.io monthly visitors)

55%

10 of 62

Help us grow

11 of 62

Daddy, do you pick your nose?

12 of 62

Create excellent interactions

13 of 62

Expect and deliver the best

good

bad

interactions

conduct@angular.io

14 of 62

799 Worldwide Meetups

angular.meetup.com

15 of 62

Angular 6 & 7

Building a better developer experience

16 of 62

Fully supported, fully integrated

Angular

Protractor

Forms

PWA

Augury

Language Services

Router

Elements

CDK

Universal

Karma

Labs

Compiler

i18n

Http

Material

Animations

CLI

17 of 62

Angular Universal

18 of 62

Angular Universal

req

html

js

19 of 62

The cause for server side rendering

Speed

Preview

SEO

20 of 62

The cause for server side rendering

Speed

SEO

Preview

Good

Fast

Popular

21 of 62

Shopping

Express

Place your screenshot here

2.3x Faster!

22 of 62

Embed anywhere with Angular Elements

Self bootstrapping

Standards-based

Works everywhere

23 of 62

Angular Material & CDK

24 of 62

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

25 of 62

Angular Component DevKit (CDK)

Behaviors

Accessibility

Layout

Observers

Overlay

Bidirectionality

Portal

Scrolling

Virtual Scroll

Drag & Drop

Generic Components

Stepper

Table

Tree

26 of 62

Angular CLI

27 of 62

Extensible CLI Ecosystem

new

generate

add

update

component

directive

pipe

service

...

28 of 62

Angular Console

One-step install

CLI Graphical UI

Interactive command discovery

29 of 62

StackBlitz

Angular Language Service

CLI Schematics Extensions

Faster than desktop

30 of 62

Painless Updates

update.angular.io

Strict deprecation policies

ng update

31 of 62

Painless Updates

32 of 62

Painless Updates

33 of 62

Angular v8 and Beyond

Smaller, faster, easier

34 of 62

Me

Steve

35 of 62

36 of 62

Design/Develop Workflow Friction

Sketch

HTML

CSS

Static Mocks

Prototype?

37 of 62

Angular Codesign by GCP

Production components

Living design spec

High-resolution prototypes

Template export

38 of 62

39 of 62

Angular Codesign

40 of 62

Fast, stable builds

Bazel

Scale

Speed

Multi-language

41 of 62

Fast, stable builds

Bazel

Accepting early access

Used by Angular itself

In the CLI as an option

42 of 62

Fast, stable builds

Bazel

43 of 62

Expanding Angular Use Cases

Ivy Renderer + Angular Elements

44 of 62

Expanding Angular Use Cases

Applications

Lightweight

Websites

Industrial strength

Angular Universal

Optimization & lazy loading

Angular Elements

Ivy Renderer

45 of 62

Ivy Renderer

Faster compilation

Smaller

Better DX

46 of 62

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)

47 of 62

Backwards Compatible

Firebase

Google

Analytics

Google

Express

Google

Cloud Platform

+600 more

...

48 of 62

Angular v8

Opt-in Ivy

Faster runtime

Lower memory

Smaller builds

Faster builds

Better debugging

49 of 62

Angular v9

Default Ivy

TINY builds

Better APIs

50 of 62

What about Urs?

51 of 62

Thanks!

52 of 62

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

- My 3rd grade teacher

53 of 62

ngGirls

54 of 62

Corporate Sponsorship

Email

info@ng-girls.org

55 of 62

Individual Sponsorship

Sponsor

patreon.com/ngGirls

56 of 62

Mentoring

Volunteer

ng-girls.org/#descrption

57 of 62

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

58 of 62

Per-library 'generate' schematics

\

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

59 of 62

Virtual Scroll & Drag-n-Drop

60 of 62

Building meetups at work

Friendships / networks

New concepts

Company-wide visibility

Personal confidence

61 of 62

Nebular Using CDK

62 of 62

Stackoverflow Survey