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

Developing PWAs and Mobile Apps with Ionic, Ang...

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

Matt Raible

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

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

    uses cookies, and Cordova’s web view won’t work with cookies
  12. 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.
  13. 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!!
  14. My Dev Story about Ionic for JHipster The previous timelines

    of events, as a YouTube video… https://www.youtube.com/watch?v=B7TjR_rJVeU
  15. 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
  16. 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
  17. 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
  18. 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