Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Matt Raible
PRO

November 15, 2017
Tweet

More Decks by Matt Raible

Other Decks in Programming

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