Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017
-
Upload
matt-raible -
Category
Technology
-
view
1.523 -
download
0
Transcript of Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017
![Page 2: Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017](https://reader033.fdocuments.us/reader033/viewer/2022050614/58a291881a28ab36508b56ed/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 a PWA with Ionic, Angular and Spring Boot - Jfokus 2017](https://reader033.fdocuments.us/reader033/viewer/2022050614/58a291881a28ab36508b56ed/html5/thumbnails/3.jpg)
![Page 4: Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017](https://reader033.fdocuments.us/reader033/viewer/2022050614/58a291881a28ab36508b56ed/html5/thumbnails/4.jpg)
Stormpath User Management
![Page 5: Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017](https://reader033.fdocuments.us/reader033/viewer/2022050614/58a291881a28ab36508b56ed/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 a PWA with Ionic, Angular and Spring Boot - Jfokus 2017](https://reader033.fdocuments.us/reader033/viewer/2022050614/58a291881a28ab36508b56ed/html5/thumbnails/8.jpg)
![Page 9: Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017](https://reader033.fdocuments.us/reader033/viewer/2022050614/58a291881a28ab36508b56ed/html5/thumbnails/9.jpg)
![Page 11: Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017](https://reader033.fdocuments.us/reader033/viewer/2022050614/58a291881a28ab36508b56ed/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 a PWA with Ionic, Angular and Spring Boot - Jfokus 2017](https://reader033.fdocuments.us/reader033/viewer/2022050614/58a291881a28ab36508b56ed/html5/thumbnails/12.jpg)
The PRPL Pattern
Push
Render
Pre-cache
Lazy-load
![Page 13: Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017](https://reader033.fdocuments.us/reader033/viewer/2022050614/58a291881a28ab36508b56ed/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 a PWA with Ionic, Angular and Spring Boot - Jfokus 2017](https://reader033.fdocuments.us/reader033/viewer/2022050614/58a291881a28ab36508b56ed/html5/thumbnails/14.jpg)
Progressive Web Apps
![Page 15: Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017](https://reader033.fdocuments.us/reader033/viewer/2022050614/58a291881a28ab36508b56ed/html5/thumbnails/15.jpg)
Stormpath SDK for Angular
![Page 16: Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017](https://reader033.fdocuments.us/reader033/viewer/2022050614/58a291881a28ab36508b56ed/html5/thumbnails/16.jpg)
Live Coding!
Create 🍺 API
Create UI
Add Stormpath
Deploy to iOS
![Page 17: Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017](https://reader033.fdocuments.us/reader033/viewer/2022050614/58a291881a28ab36508b56ed/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 a PWA with Ionic, Angular and Spring Boot - Jfokus 2017](https://reader033.fdocuments.us/reader033/viewer/2022050614/58a291881a28ab36508b56ed/html5/thumbnails/19.jpg)
Shortcut to becoming an Ionic Expert
JUST DO IT.
![Page 20: Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017](https://reader033.fdocuments.us/reader033/viewer/2022050614/58a291881a28ab36508b56ed/html5/thumbnails/20.jpg)
Shortcut to becoming an Ionic Expert
JUST DEV IT.
![Page 21: Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017](https://reader033.fdocuments.us/reader033/viewer/2022050614/58a291881a28ab36508b56ed/html5/thumbnails/21.jpg)
😂
![Page 22: Building a PWA with Ionic, Angular and Spring Boot - Jfokus 2017](https://reader033.fdocuments.us/reader033/viewer/2022050614/58a291881a28ab36508b56ed/html5/thumbnails/22.jpg)
Keep in touch! raibledesigns.com
@mraible
linkedin.com/in/mraible
Presentationsslideshare.net/mraible
Codegithub.com/mraible
Questions?