Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster - Devoxx Morocco 2017
3 likes1,193 views
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
Ad
More Related Content
What's hot (20)
Similar to Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster - Devoxx Morocco 2017 (20)
Ad
More from Matt Raible (20)
Ad
Recently uploaded (20)
![Download Wondershare Filmora Crack [2025] With Latest](https://cdn.slidesharecdn.com/ss_thumbnails/neo4j-howkgsareshapingthefutureofgenerativeaiatawssummitlondonapril2024-240426125209-2d9db05d-250419-250428115407-a04afffa-thumbnail.jpg?width=560&fit=bounds)
![Get & Download Wondershare Filmora Crack Latest [2025]](https://cdn.slidesharecdn.com/ss_thumbnails/revolutionizingresidentialwi-fi-250422112639-60fb726f-250429170801-59e1b240-thumbnail.jpg?width=560&fit=bounds)
![Minitab 22 Full Crack Plus Product Key Free Download [Latest] 2025](https://cdn.slidesharecdn.com/ss_thumbnails/avtpastoralvisits20252026-250407114051-0c8f0fbf-250407123507-bf8f5b04-250426175635-00bc6197-thumbnail.jpg?width=560&fit=bounds)
Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster - Devoxx Morocco 2017
- 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
- 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
- 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
- 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
- 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