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

72a2082c6a4dd79ad68befb3db911616?s=47 Matt Raible
November 15, 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

72a2082c6a4dd79ad68befb3db911616?s=128

Matt Raible

November 15, 2017
Tweet

Transcript

  1. Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster

    Matt Raible @mraible raibledesigns.com developer.okta.com #DevoxxMA
  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
  3. None
  4. None
  5. developer.okta.com

  6. JHipster www.jhipster.tech

  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
  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
  9. None
  10. None
  11. None
  12. “We’ve failed on mobile” — Alex Russell https://youtu.be/K1SFnrf4jZo

  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
  14. The PRPL Pattern Push Render Pre-cache Lazy-load

  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
  16. #DevoxxMA Progressive Web Apps

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

  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.
  19. Timeline of Events Oct 10: Started looking into creating Ionic

    for JHipster
  20. None
  21. Timeline of Events Oct 10: Started looking into creating Ionic

    for JHipster Oct 11: No advice from Stack Overflow, asked the JHipster Team
  22. None
  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
  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
  25. Timeline of Events Discovered OAuth wouldn’t work, because JHipster implementation

    uses cookies, and Cordova’s web view won’t work with cookies
  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.
  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!!
  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
  29. Demo Time!

  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
  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
  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
  33. Learn Ionic https://www.joshmorony.com/building-mobile-apps-with-ionic-2/

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

  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
  36. Getting Help stackoverflow.com/tags/jhipster gitter.im/jhipster/generator-jhipster github.com/jhipster/.../CONTRIBUTING.md groups.google.com/.../jhipster-dev

  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
  38. developer.okta.com/blog

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

    github.com/oktadeveloper