Building Cloud Native Progressive Web Apps - Devoxx 2017

In this session, you’ll learn how to build microservices with Spring, deploy them to the cloud and expose their functionality with a 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 Kotlin, Spring Boot, Spring Cloud, Cloud Foundry, IntelliJ IDEA, Angular, and Progressive Web Apps.

YouTube: https://www.youtube.com/watch?v=tCyLDzhz_mg
Source code: https://github.com/mraible/cloud-native-pwas/tree/devoxx-be-2017
PR showing how to integrate Okta: https://github.com/mraible/cloud-native-pwas/pull/10

Transcript

1. @starbuxman | @mraible
   #Devoxx #CloudNativePWAs
   Building Cloud Native
   Progressive Web Apps
   Matt Raible
   @mraible
   Josh Long
   @starbuxman
   

   View Slide

2. About You
   Do you like Spring?
   
   Do you like JavaScript? TypeScript?
   
   Anyone using Angular? React? PWAs?
   
   Why are you here?
   #Devoxx
   

   View Slide

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

   View Slide

4. View Slide

5. developer.okta.com
   

   View Slide

6. Authentication Standards
   

   View Slide

7. • http://cloudnativejava.io
   • @starbuxman
   • josh@joshlong.com
   • Java Champion
   • open-source contributor 

   (Spring Boot, Spring Cloud, Spring
   Integration, Vaadin, Activiti, etc etc)
   the Spring Developer Advocate
   Josh Long (⿓龍之春, ⻰龙之春, जोश)
   

   View Slide

8. View Slide

9. View Slide

10. View Slide

11. Did you know?
    “At any given time, 0.7% of the world is
    drunk. So 50 million people are drunk right
    now.”
    

    View Slide

12. https://xkcd.com/323/
    “Ballmer Peak”
    

    View Slide

13. Live Coding with Josh
    
    

    View Slide

14. Fin
    

    View Slide

15. What about the client?
    

    View Slide

16. “Beer Client”
    

    View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

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

    View Slide

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

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

    View Slide

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

25. Progressive Web Apps
    

    View Slide

26. Live Coding with Matt
    

    View Slide

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

28. Check out JHipster! jhipster.tech
    

    View Slide

29. The JHipster Mini-Book
    Written with Asciidoctor
    
    Quick and to the point, 130 pages
    
    Developed a real world app:
    
    www.21-points.com
    
    Free Download from
    
    infoq.com/minibooks/jhipster-4-mini-book
    @jhipster_book
    

    View Slide

30. Learn More
    Build Your First Progressive Web Application with
    Angular and Spring Boot
    
    Build a Microservices Architecture for Microbrews with
    Spring Boot
    
    The Ultimate Guide to Progressive Web Applications 

    

    Secure a Spring Microservices Architecture with Spring
    Security, JWTs, Juiser, and Okta
    

    View Slide

31. Thanks!
    https://github.com/mraible/cloud-native-pwas
    Matt Raible & Josh Long

    @mraible @starbuxman
    https://spring.io/blog
    https://developer.okta.com/blog
    

    View Slide