PWAs with Ionic, Angular, and Spring Boot - Devoxx Poland 2017

In this session, I show 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 used for demo: http://developer.okta.com/blog/2017/05/17/develop-a-mobile-app-with-ionic-and-spring-boot

Source code: https://github.com/oktadeveloper/spring-boot-ionic-example

Transcript

1. Building a PWA with
   Matt Raible
   matt.raible@okta.com
   #DevoxxPL @mraible
   

   View Slide

2. View Slide

3. Blogger on raibledesigns.com
   Web Developer and Java Champion
   Father, Skier, Mountain Biker,
   Whitewater Rafter
   Open Source Connoisseur
   Who is Matt Raible?
   Bus Lover
   Okta Developer Advocate
   

   View Slide

4. View Slide

5. View Slide

6. #DevoxxPL
   Authentication Standards
   

   View Slide

7. #DevoxxPL
   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

8. SPRING INITIALIZR @ start.spring.io
   

   View Slide

9. View Slide

10. @SpringBootApplication
    public class DemoApplication {
    public static void main(String[] args) {
    SpringApplication.run(DemoApplication.class, args);
    }
    }
    @Entity
    class Blog {
    @Id
    @GeneratedValue
    private Long id;
    private String name;
    // getters, setters, toString(), etc
    }
    @RepositoryRestResource
    interface BlogRepository extends PagingAndSortingRepository {
    }
    

    View Slide

11. Microservices with Spring Boot
    

    View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

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

    View Slide

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

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

    View Slide

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

20. #DevoxxPL
    Progressive Web Apps
    

    View Slide

21. #DevoxxPL
    Learn More on scotch.io
    https://scotch.io/tutorials/the-ultimate-guide-to-progressive-web-applications
    

    View Slide

22. Live Coding!
    Create API
    
    Create UI
    
    Deploy to iOS
    

    View Slide

23. #DevoxxPL
    Resources
    Demo Code
    
    https://github.com/oktadeveloper/
    spring-boot-ionic-example
    
    Step-by-step Tutorial
    
    https://developer.okta.com/blog/
    2017/05/17/develop-a-mobile-app-with-
    ionic-and-spring-boot
    

    View Slide

24. Learn Ionic
    https://www.joshmorony.com/building-mobile-apps-with-ionic-2/
    

    View Slide

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

    View Slide

26. developer.okta.com/blog
    

    View Slide

27. #DevoxxPL
    Questions?
    Keep in touch!
    
    raibledesigns.com
    
    @mraible
    
    Presentations
    
    speakerdeck.com/mraible
    
    Code
    
    github.com/oktadeveloper
    

    View Slide