Top Banner
Cloud Native PWAs Matt Raible & Mark Heckler @mraible @mkheck photo by: https://www.flickr.com/photos/theaucitron/5810163712
34

Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017

Apr 12, 2017

Download

Technology

Matt Raible
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017

Cloud Native PWAsMatt Raible & Mark Heckler @mraible @mkheck

photo by: https://www.flickr.com/photos/theaucitron/5810163712

Page 2: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017

About You

Do you like Java? What about Spring?

Do you like JavaScript? TypeScript?

Anyone using Angular? PWAs?

Why are you here?

Page 3: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 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 4: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017
Page 5: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017
Page 6: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017

Thinker of thoughts at thehecklers.org, @MkHeck

Architect/Developer

Who is Mark Heckler?

Java Champion

Spring Developer Evangelist

SpeakerAuthor

Page 7: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017
Page 8: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017
Page 9: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017
Page 10: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017
Page 11: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017
Page 12: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017
Page 13: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017
Page 14: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017
Page 15: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017

The Future of Java in the Enterprise

https://www.infoq.com/articles/enterprise-java-opinion

Page 16: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017

start.spring.io

Page 17: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017

Live Coding with Mark

Page 18: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017

Fin

Page 19: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017

What about the client?

Page 20: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017
Page 21: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017
Page 22: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017
Page 23: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017

2007

Page 24: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017
Page 25: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017
Page 26: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017

“We’ve failed on mobile”

— Alex Russellhttps://youtu.be/K1SFnrf4jZo

Page 27: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 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 28: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017

The PRPL Pattern

Push

Render

Pre-cache

Lazy-load

Page 29: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 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 30: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017

Progressive Web Apps

Page 31: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017

Live Coding with Matt

Page 32: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017

B U I L D I N G P R O G R E S S I V E W E B A P P S I S H A R D

Page 33: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017

https://flic.kr/p/cAvyTd

Learned from PWA Giants

Josh Crowther - @jshcrowthe

PWAs: The Future of the Web

Maxim Salnikov - @webmaxru

PWAs using the Angular Mobile Toolkit

Angular 2 PWA Workshop

Page 34: Cloud Native PWAs (progressive web apps with Spring Boot and Angular) - DevNexus 2017

Thanks!

https://github.com/mraible/cloud-native-pwas

Matt Raible & Mark Heckler @mraible @mkheck