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
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
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
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
21. Timeline of Events Oct 10: Started looking into creating Ionic for JHipster Oct 11: No advice from Stack Overflow, asked the JHipster Team
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