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)Let's See It In Action
Security Considerations
Same as traditional Single Page Application
Which means...
...universal login page
...OAuth 2.0 Implicit Grant
...not storing JWT in browser
Summary
PWAs are Mobile Web Apps on Steroids
Summary
PWAs will get better over time as the web evolves
Summary
Adding PWA capabilities to your Angular app is easy
Thank You!
@chrisoncode
@kukicado
