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

YouTube: https://www.youtube.com/watch?v=C_V3Je7Iwso

In this session, you'll learn how to build a Progressive Web App (PWA) using Ionic, Angular and Spring Boot. PWAs are being hyped as the next big thing in mobile development. This talk will cut through the hype and get down to the nitty-gritty. Are they really better than native applications? Can you develop PWAs and easily target mobile and desktop with the same application?

Tutorial: https://github.com/stormpath/stormpath-spring-boot-ionic-example/blob/master/TUTORIAL.md
Source code: https://github.com/stormpath/stormpath-spring-boot-ionic-example

Transcript

1. BUILDING PROGRESSIVE WEB APPS
   MATT RAIBLE / @MRAIBLE
   WITH AND
   

   View Slide

2. Blogger on raibledesigns.com
   UI Architect and Java Champion
   Father, Skier, Mountain
   Biker, Whitewater Rafter
   Web Framework Connoisseur
   Who is Matt Raible?
   Bus Lover
   Stormpath Developer Evangelist
   

   View Slide

3. View Slide

4. Stormpath User Management
   

   View Slide

5. 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
   

   View Slide

6. SPRING INITIALIZR @ start.spring.io
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. “We’ve failed on mobile”
    
    — Alex Russell
    
    https://youtu.be/K1SFnrf4jZo
    

    View Slide

11. 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
    

    View Slide

12. The PRPL Pattern
    Push
    
    Render
    
    Pre-cache
    
    Lazy-load
    

    View Slide

13. 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
    

    View Slide

14. Progressive Web Apps
    

    View Slide

15. Stormpath SDK for Angular
    

    View Slide

16. Live Coding!
    Create API
    
    Create UI
    
    Add Stormpath
    
    Deploy to iOS
    

    View Slide

17. 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
    

    View Slide

18. LEARN IONIC
    

    View Slide

19. Shortcut to becoming an Ionic Expert
    JUST DO IT.
    

    View Slide

20. Shortcut to becoming an Ionic Expert
    JUST DEV IT.
    

    View Slide

21. View Slide

22. Keep in touch!
    
    raibledesigns.com
    
    @mraible
    
    linkedin.com/in/mraible
    
    Presentations
    
    slideshare.net/mraible
    
    Code
    
    github.com/mraible
    Questions?
    

    View Slide