Angular

An Introduction

Ado Kukic

Evangelism Lead

@kukicado

So you're thinking about building an app...

...Analysis Paralysis

Traditional Web Application

{ html }

Single Page Application

{ json }

@kukicado

Angular

One Framework.

Mobile and Desktop.

More

Less

What does "more" mean?

Cross-Platform

Speed and Performance

Productivity

Full Development Story

Cross Platform

Progressive Web Apps

Desktop

Native Mobile

Speed and Performance

Code Generation

Code Splitting

Universal

Productivity

Templates

IDEs

Angular CLI

Full Development Story

Testing

Accessibility

Animation

Getting Started

Angular CLI

3s

Performance Matters

5s

FMP

TTI

P

R

P

L

ush

ender

re-cache

azy-load

% of Mobile Users that Leave After 3s?

Text

53%

% of connections over 2G or 3G?

75%

Let's Maths!

50 kb/s

3G Connection

5s

Goal TTI

1.5s

DNS/Connection Stuff

3.5s

Download/Parse/Compile/Execute

Bundle Size Goal

~170kb

Let's Build...

Something

Cool

Serverless

Someone else's servers

autoscale + no idle costs

+

ng add @angular/pwa

Installed packages for tooling via npm.

CREATE ngsw-config.json (392 bytes)
CREATE src/assets/icons/icon-128x128.png (1253 bytes)
CREATE src/assets/icons/icon-144x144.png (1394 bytes)
CREATE src/assets/icons/icon-152x152.png (1427 bytes)
CREATE src/assets/icons/icon-192x192.png (1790 bytes)
CREATE src/assets/icons/icon-384x384.png (3557 bytes)
CREATE src/assets/icons/icon-512x512.png (5008 bytes)
CREATE src/assets/icons/icon-72x72.png (792 bytes)
CREATE src/assets/icons/icon-96x96.png (958 bytes)
CREATE src/manifest.json (1071 bytes)
UPDATE angular.json (3565 bytes)
UPDATE package.json (1405 bytes)
UPDATE src/app/app.module.ts (1153 bytes)
UPDATE src/index.html (385 bytes)