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

In this session, we show how to build microservices with Spring, deploy them to the cloud and expose their functionality with an progressive web application that can run offline. You’ll learn how to “build to fail” and create a quality, resilient application. Live coding will show how to use: Spring Boot, Spring Cloud, Spring Security, Cloud Foundry, IntelliJ IDEA, Angular 2, JWT, Stormpath, and Progressive Web Apps.

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

Transcript

1. Cloud Native PWAs

   Matt Raible & Mark Heckler

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

   View Slide

2. About You
   Do you like Java? What about Spring?
   
   Do you like JavaScript? TypeScript?
   
   Anyone using Angular? PWAs?
   
   Why are you here?
   

   View Slide

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

4. View Slide

5. View Slide

6. Thinker of thoughts at thehecklers.org, @MkHeck
   Architect/Developer
   Who is Mark Heckler?
   Java Champion
   Spring Developer Evangelist
   Speaker
   Author
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. The Future of Java in the Enterprise
    https://www.infoq.com/articles/enterprise-java-opinion
    

    View Slide

16. start.spring.io
    

    View Slide

17. Live Coding with Mark
    

    View Slide

18. Fin
    

    View Slide

19. What about the client?
    

    View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

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

    View Slide

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

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

    View Slide

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

30. Progressive Web Apps
    

    View Slide

31. Live Coding with Matt
    

    View Slide

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

    View Slide

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

    View Slide

34. Thanks!
    https://github.com/mraible/cloud-native-pwas
    Matt Raible & Mark Heckler

    @mraible @mkheck
    

    View Slide