building progressive web apps - jfokus€¦ · mobile hates you! how to fight back: implement prpl...

22
BUILDING PROGRESSIVE WEB APPS MATT RAIBLE / @MRAIBLE WITH AND

Upload: others

Post on 03-Jun-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: BUILDING PROGRESSIVE WEB APPS - Jfokus€¦ · Mobile Hates You! How to fight back: Implement PRPL Get a ~$150-200 unlocked Android (e.g. Moto G4) Use chrome://inspect && chrome://inspect?tracing

BUILDING PROGRESSIVE WEB APPS

MATT RAIBLE / @MRAIBLE

WITH AND

Page 2: BUILDING PROGRESSIVE WEB APPS - Jfokus€¦ · Mobile Hates You! How to fight back: Implement PRPL Get a ~$150-200 unlocked Android (e.g. Moto G4) Use chrome://inspect && chrome://inspect?tracing

Blogger on raibledesigns.com

UI Architect and Java Champion

Father, Skier, Mountain Biker, Whitewater Rafter

Web Framework Connoisseur

Who is Matt Raible?

Bus LoverStormpath Developer Evangelist

Page 3: BUILDING PROGRESSIVE WEB APPS - Jfokus€¦ · Mobile Hates You! How to fight back: Implement PRPL Get a ~$150-200 unlocked Android (e.g. Moto G4) Use chrome://inspect && chrome://inspect?tracing
Page 4: BUILDING PROGRESSIVE WEB APPS - Jfokus€¦ · Mobile Hates You! How to fight back: Implement PRPL Get a ~$150-200 unlocked Android (e.g. Moto G4) Use chrome://inspect && chrome://inspect?tracing

Stormpath User Management

Page 5: BUILDING PROGRESSIVE WEB APPS - Jfokus€¦ · Mobile Hates You! How to fight back: Implement PRPL Get a ~$150-200 unlocked Android (e.g. Moto G4) Use chrome://inspect && chrome://inspect?tracing

Spring Boot

Automatically configures Spring whenever possible

Provides production-ready features such as metrics, health checks and externalized configuration

Absolutely no code generation and no requirement for XML configuration

Embeds Tomcat, Jetty or Undertow directly

Page 6: BUILDING PROGRESSIVE WEB APPS - Jfokus€¦ · Mobile Hates You! How to fight back: Implement PRPL Get a ~$150-200 unlocked Android (e.g. Moto G4) Use chrome://inspect && chrome://inspect?tracing

SPRING INITIALIZR @ start.spring.io

Page 8: BUILDING PROGRESSIVE WEB APPS - Jfokus€¦ · Mobile Hates You! How to fight back: Implement PRPL Get a ~$150-200 unlocked Android (e.g. Moto G4) Use chrome://inspect && chrome://inspect?tracing
Page 9: BUILDING PROGRESSIVE WEB APPS - Jfokus€¦ · Mobile Hates You! How to fight back: Implement PRPL Get a ~$150-200 unlocked Android (e.g. Moto G4) Use chrome://inspect && chrome://inspect?tracing
Page 10: BUILDING PROGRESSIVE WEB APPS - Jfokus€¦ · Mobile Hates You! How to fight back: Implement PRPL Get a ~$150-200 unlocked Android (e.g. Moto G4) Use chrome://inspect && chrome://inspect?tracing

“We’ve failed on mobile”

— Alex Russellhttps://youtu.be/K1SFnrf4jZo

Page 11: BUILDING PROGRESSIVE WEB APPS - Jfokus€¦ · Mobile Hates You! How to fight back: Implement PRPL Get a ~$150-200 unlocked Android (e.g. Moto G4) Use chrome://inspect && chrome://inspect?tracing

Mobile Hates You!

How to fight back:

Implement PRPL

Get a ~$150-200 unlocked Android (e.g. Moto G4)

Use chrome://inspect && chrome://inspect?tracing

Lighthouse

DevTools Network & CPU Throttling

Page 12: BUILDING PROGRESSIVE WEB APPS - Jfokus€¦ · Mobile Hates You! How to fight back: Implement PRPL Get a ~$150-200 unlocked Android (e.g. Moto G4) Use chrome://inspect && chrome://inspect?tracing

The PRPL Pattern

Push

Render

Pre-cache

Lazy-load

Page 13: BUILDING PROGRESSIVE WEB APPS - Jfokus€¦ · Mobile Hates You! How to fight back: Implement PRPL Get a ~$150-200 unlocked Android (e.g. Moto G4) Use chrome://inspect && chrome://inspect?tracing

The PRPL Pattern

Push critical resources for the initial URL route

Render initial route

Pre-cache remaining routes

Lazy-load and create remaining routes on demand

Page 14: BUILDING PROGRESSIVE WEB APPS - Jfokus€¦ · Mobile Hates You! How to fight back: Implement PRPL Get a ~$150-200 unlocked Android (e.g. Moto G4) Use chrome://inspect && chrome://inspect?tracing

Progressive Web Apps

Page 15: BUILDING PROGRESSIVE WEB APPS - Jfokus€¦ · Mobile Hates You! How to fight back: Implement PRPL Get a ~$150-200 unlocked Android (e.g. Moto G4) Use chrome://inspect && chrome://inspect?tracing

Stormpath SDK for Angular

Page 16: BUILDING PROGRESSIVE WEB APPS - Jfokus€¦ · Mobile Hates You! How to fight back: Implement PRPL Get a ~$150-200 unlocked Android (e.g. Moto G4) Use chrome://inspect && chrome://inspect?tracing

Live Coding!

Create 🍺 API

Create UI

Add Stormpath

Deploy to iOS

Page 19: BUILDING PROGRESSIVE WEB APPS - Jfokus€¦ · Mobile Hates You! How to fight back: Implement PRPL Get a ~$150-200 unlocked Android (e.g. Moto G4) Use chrome://inspect && chrome://inspect?tracing

Shortcut to becoming an Ionic Expert

JUST DO IT.

Page 20: BUILDING PROGRESSIVE WEB APPS - Jfokus€¦ · Mobile Hates You! How to fight back: Implement PRPL Get a ~$150-200 unlocked Android (e.g. Moto G4) Use chrome://inspect && chrome://inspect?tracing

Shortcut to becoming an Ionic Expert

JUST DEV IT.

Page 21: BUILDING PROGRESSIVE WEB APPS - Jfokus€¦ · Mobile Hates You! How to fight back: Implement PRPL Get a ~$150-200 unlocked Android (e.g. Moto G4) Use chrome://inspect && chrome://inspect?tracing

😂

Page 22: BUILDING PROGRESSIVE WEB APPS - Jfokus€¦ · Mobile Hates You! How to fight back: Implement PRPL Get a ~$150-200 unlocked Android (e.g. Moto G4) Use chrome://inspect && chrome://inspect?tracing

Keep in touch! raibledesigns.com

@mraible

linkedin.com/in/mraible

Presentationsslideshare.net/mraible

Codegithub.com/mraible

Questions?