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

Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017

Embed Size (px)

Citation preview

Page 1: Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017

BUILDING PROGRESSIVE WEB APPS

MATT RAIBLE / @MRAIBLE

WITH AND

Page 2: Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017

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 a PWA with Ionic, Angular and Spring Boot - Jfokus 2017
Page 4: Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017

Stormpath User Management

Page 5: Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017

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 a PWA with Ionic, Angular and Spring Boot - Jfokus 2017

SPRING INITIALIZR @ start.spring.io

Page 8: Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017
Page 9: Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017
Page 10: Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017

“We’ve failed on mobile”

— Alex Russellhttps://youtu.be/K1SFnrf4jZo

Page 11: Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017

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 a PWA with Ionic, Angular and Spring Boot - Jfokus 2017

The PRPL Pattern

Push

Render

Pre-cache

Lazy-load

Page 13: Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017

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 a PWA with Ionic, Angular and Spring Boot - Jfokus 2017

Progressive Web Apps

Page 15: Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017

Stormpath SDK for Angular

Page 16: Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017

Live Coding!

Create 🍺 API

Create UI

Add Stormpath

Deploy to iOS

Page 19: Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017

Shortcut to becoming an Ionic Expert

JUST DO IT.

Page 20: Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017

Shortcut to becoming an Ionic Expert

JUST DEV IT.

Page 21: Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017

😂

Page 22: Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017

Keep in touch! raibledesigns.com

@mraible

linkedin.com/in/mraible

Presentationsslideshare.net/mraible

Codegithub.com/mraible

Questions?