Building Cloud Native Progressive Web Apps - Devoxx Morocco 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=5386kXFvreM
Source code: https://github.com/mraible/cloud-native-pwas
PR showing how to integrate Okta: https://github.com/mraible/cloud-native-pwas/pull/10

Transcript

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

   View Slide

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

   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?
    “In the early years of the 20th century,
    horses were causing so much pollution with
    their poop that cars were seen as the
    "green" alternative.”
    

    View Slide

12. https://xkcd.com/1559/
    Driving
    

    View Slide

13. https://xkcd.com/864/
    Flying Cars
    

    View Slide

14. Live Coding with Josh
    

    View Slide

15. Fin
    

    View Slide

16. What about the client?
    

    View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

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

    View Slide

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

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

    View Slide

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

26. Progressive Web Apps
    

    View Slide

27. Live Coding with Matt
    

    View Slide

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

29. Check out JHipster! jhipster.tech
    

    View Slide

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

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

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