BUILDING PROGRESSIVE WEB APPS - Jfokus€¦ · Mobile Hates You! How to fight back: Implement PRPL...
Transcript of BUILDING PROGRESSIVE WEB APPS - Jfokus€¦ · Mobile Hates You! How to fight back: Implement PRPL...
![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](https://reader035.fdocuments.in/reader035/viewer/2022081607/5ee13e66ad6a402d666c3159/html5/thumbnails/2.jpg)
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](https://reader035.fdocuments.in/reader035/viewer/2022081607/5ee13e66ad6a402d666c3159/html5/thumbnails/3.jpg)
![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](https://reader035.fdocuments.in/reader035/viewer/2022081607/5ee13e66ad6a402d666c3159/html5/thumbnails/4.jpg)
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](https://reader035.fdocuments.in/reader035/viewer/2022081607/5ee13e66ad6a402d666c3159/html5/thumbnails/5.jpg)
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 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](https://reader035.fdocuments.in/reader035/viewer/2022081607/5ee13e66ad6a402d666c3159/html5/thumbnails/8.jpg)
![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](https://reader035.fdocuments.in/reader035/viewer/2022081607/5ee13e66ad6a402d666c3159/html5/thumbnails/9.jpg)
![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](https://reader035.fdocuments.in/reader035/viewer/2022081607/5ee13e66ad6a402d666c3159/html5/thumbnails/11.jpg)
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](https://reader035.fdocuments.in/reader035/viewer/2022081607/5ee13e66ad6a402d666c3159/html5/thumbnails/12.jpg)
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](https://reader035.fdocuments.in/reader035/viewer/2022081607/5ee13e66ad6a402d666c3159/html5/thumbnails/13.jpg)
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](https://reader035.fdocuments.in/reader035/viewer/2022081607/5ee13e66ad6a402d666c3159/html5/thumbnails/14.jpg)
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](https://reader035.fdocuments.in/reader035/viewer/2022081607/5ee13e66ad6a402d666c3159/html5/thumbnails/15.jpg)
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](https://reader035.fdocuments.in/reader035/viewer/2022081607/5ee13e66ad6a402d666c3159/html5/thumbnails/16.jpg)
Live Coding!
Create 🍺 API
Create UI
Add Stormpath
Deploy to iOS
![Page 17: 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](https://reader035.fdocuments.in/reader035/viewer/2022081607/5ee13e66ad6a402d666c3159/html5/thumbnails/17.jpg)
Resources
Demo Code
https://github.com/stormpath/stormpath-spring-boot-ionic-example
Step-by-step Tutorial
https://github.com/stormpath/stormpath-spring-boot-ionic-example/blob/master/TUTORIAL.md
![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](https://reader035.fdocuments.in/reader035/viewer/2022081607/5ee13e66ad6a402d666c3159/html5/thumbnails/19.jpg)
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](https://reader035.fdocuments.in/reader035/viewer/2022081607/5ee13e66ad6a402d666c3159/html5/thumbnails/20.jpg)
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](https://reader035.fdocuments.in/reader035/viewer/2022081607/5ee13e66ad6a402d666c3159/html5/thumbnails/21.jpg)
😂
![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](https://reader035.fdocuments.in/reader035/viewer/2022081607/5ee13e66ad6a402d666c3159/html5/thumbnails/22.jpg)
Keep in touch! raibledesigns.com
@mraible
linkedin.com/in/mraible
Presentationsslideshare.net/mraible
Codegithub.com/mraible
Questions?