Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster - Devoxx Morocco 2017

Watch on YouTube: https://youtu.be/Dl3YF5SDhsA

In this session, I show how to build a Progressive Web App (PWA) AND a mobile app using Ionic, Angular and JHipster. PWAs are being hyped as the next big thing in mobile development.

This talk describes the trials and tribulations of developing the Ionic Module for JHipster. It will show how you can easily generate Ionic UIs and describe the pain points of working with Node and Yeoman to develop this module.

My Dev Story about Ionic for JHipster on YouTube: https://www.youtube.com/watch?v=B7TjR_rJVeU

Transcript

1. Developing PWAs and
   Mobile Apps with Ionic,
   Angular, and JHipster
   Matt Raible
   @mraible
   raibledesigns.com
   developer.okta.com
   #DevoxxMA
   

   View Slide

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

3. View Slide

4. View Slide

5. developer.okta.com
   

   View Slide

6. JHipster www.jhipster.tech
   

   View Slide

7. JHipster
   Spring Boot
   
   Spring Security
   
   AngularJS
   
   Angular
   
   Bootstrap
   
   Metrics
   
   Maven or Gradle
   
   Authentication Type: cookie-based (with
   Social), JWT, or OAuth 2.0
   
   Type of Database: SQL or NoSQL
   
   Caching: EhCache or Hazelcast
   
   Elasticsearch
   
   Gulp.js or Webpack
   Foundational Frameworks Project Options
   

   View Slide

8. How to use JHipster
   To install JHipster and Yeoman, use npm:
   npm install -g yo generator-jhipster
   Then create a directory and cd into it:
   mkdir myapp && cd myapp
   Then run Yeoman:
   yo jhipster
   

   View Slide

9. View Slide

10. View Slide

11. View Slide

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

    View Slide

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

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

    View Slide

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

16. #DevoxxMA
    Progressive Web Apps
    

    View Slide

17. #DevoxxMA
    Learn More about PWAs
    https://developer.okta.com/blog/2017/07/20/the-ultimate-guide-to-progressive-web-applications
    

    View Slide

18. From the CFP…
    This talk describes the trials and tribulations of developing the Ionic
    Module for JHipster.
    
    It will show how you can easily generate Ionic UIs and describe the pain
    points of working with Node and Yeoman to develop this module.
    

    View Slide

19. Timeline of Events
    Oct 10: Started looking into creating Ionic for JHipster
    
    

    View Slide

20. View Slide

21. Timeline of Events
    Oct 10: Started looking into creating Ionic for JHipster
    
    Oct 11: No advice from Stack Overflow, asked the JHipster Team
    
    

    View Slide

22. View Slide

23. Timeline of Events
    Oct 10: Started looking into creating Ionic for JHipster
    
    Oct 11: No advice from Stack Overflow, asked the JHipster Team
    
    Mid-October: Thought blueprint feature was the answer…
    
    November 2: Finished a module that generates that creates an app with
    Ionic CLI, and overlays JHipster pages on top of it
    
    Published to YouTube: https://www.youtube.com/watch?v=eS6Ti5Ft7JE
    

    View Slide

24. Timeline of Events
    After Devoxx Belgium, tried to finish Ionic module over the weekend.
    
    Late night of hacking, couldn’t figure out why what worked last week
    didn’t work this week.
    
    Discovered Ionic “super” starter was upgraded to Angular 5 in the last
    week.
    
    Realized I needed to version the starter, or write my own.
    
    Tried to make OAuth work, because
    
    

    View Slide

25. Timeline of Events
    Discovered OAuth wouldn’t work, because JHipster implementation
    uses cookies, and Cordova’s web view won’t work with cookies
    
    

    View Slide

26. Timeline of Events
    Sunday evening (my talk was on Wednesday morning): refactored
    everything into an Ionic starter.
    
    Monday: finished starter, couldn’t get it to work in iOS emulator,
    because CORS.
    
    Found bugs about CORS doesn’t work over http. Spent hours trying to
    make it work over https. Couldn’t get local cert to be trusted, couldn’t.
    deploy JHipster app to cloud (b/c of slow wifi). Even tried cloud-to-
    cloud, but ran into frontend-maven-plugin on Linux issues.
    

    View Slide

27. Timeline of Events
    Monday: discovered real issue was that emulator runs on port 8080. Changed
    JHipster/Spring Boot’s port to 9000, and it worked!
    
    Tuesday: delivered talk on Cloud Native PWAs with Josh Long.
    
    Tuesday after dinner: started working on entity generator for Ionic.
    
    Wednesday 4am: Got it working!
    
    Wednesday 8-11:25am: wrote presentation.
    
    Wednesday 11:30am: delivered talk, showed demo that worked!!
    
    
    
    

    View Slide

28. My Dev Story about Ionic for JHipster
    The previous timelines of events, as a YouTube video…
    https://www.youtube.com/watch?v=B7TjR_rJVeU
    

    View Slide

29. Demo Time!
    

    View Slide

30. JHipster Ionic (soonish…)
    To install JHipster for Ionic, use npm:
    
    npm install -g jhipster-ionic
    Create an Ionic application:
    
    yo jhipster-ionic
    Generate Entities:
    
    yo jhipster-ionic:entity $name
    

    View Slide

31. JHipster Starter (another option)
    To install JHipster for Ionic, use ionic:
    
    ionic start myApp oktadeveloper/jhipster
    Add the JHipster Ionic module:
    
    cd myApp && npm install generator-jhipster-ionic
    Generate Entities:
    
    yo jhipster-ionic:entity $name
    

    View Slide

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

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

    View Slide

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

    View Slide

35. Learn More
    twitter.com/java_hipster
    
    www.jhipster.tech
    
    github.com/jhipster/generator-jhipster
    
    Get Started with JHipster 4: https://youtu.be/XRREt1KB4Y8
    
    JHipster Microservices, Google Cloud, and Kubernetes

    https://youtu.be/dgVQOYEwleA
    

    View Slide

36. Getting Help
    stackoverflow.com/tags/jhipster
    
    gitter.im/jhipster/generator-jhipster
    
    github.com/jhipster/.../CONTRIBUTING.md
    
    groups.google.com/.../jhipster-dev
    

    View Slide

37. What’s New and Next?
    http://start.jhipster.tech now available!
    
    JHipster Registry v3
    
    Spring Boot 2.0 / Spring Webflux
    
    React Support
    
    OAuth 2.0 / OIDC Support
    https://www.slideshare.net/julien.dubois/jhipster-overview-and-roadmap-august-2017
    

    View Slide

38. developer.okta.com/blog
    

    View Slide

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

    View Slide