Download as PDF, PPTX
Uploaded byMatt Raible
Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster - Devoxx Morocco 2017
Matt Raible discusses the development of Progressive Web Applications (PWAs) and mobile apps using Ionic, Angular, and JHipster, sharing insights on the challenges faced in creating an Ionic module for JHipster. The document includes a timeline of events detailing the development process, troubleshooting issues, and the successful creation of an Ionic starter that integrates with JHipster. Additionally, it provides resources and guidance for developers interested in these technologies.
More Related Content
Similar to 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
- 1. Developing PWAs and MobileApps with Ionic, Angular, and JHipster Matt Raible @mraible raibledesigns.com developer.okta.com #DevoxxMA
- 2. Blogger on raibledesigns.com WebDeveloper and Java Champion Father, Skier, Mountain Biker, Whitewater Rafter Open Source Connoisseur Who is Matt Raible? Bus Lover Okta Developer Advocate
- 5.
- 6.
- 7. JHipster Spring Boot Spring Security AngularJS Angular Bootstrap Metrics Mavenor 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 useJHipster 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 onmobile” — Alex Russell https://youtu.be/K1SFnrf4jZo
- 13. Mobile Hates You! Howto 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 Pushcritical resources for the initial URL route Render initial route Pre-cache remaining routes Lazy-load and create remaining routes on demand
- 16.
- 17. #DevoxxMA Learn More aboutPWAs https://developer.okta.com/blog/2017/07/20/the-ultimate-guide-to-progressive-web-applications
- 18. From the CFP… Thistalk 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 Oct10: Started looking into creating Ionic for JHipster
- 21. Timeline of Events Oct10: Started looking into creating Ionic for JHipster Oct 11: No advice from Stack Overflow, asked the JHipster Team
- 23. Timeline of Events Oct10: 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 AfterDevoxx 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 DiscoveredOAuth wouldn’t work, because JHipster implementation uses cookies, and Cordova’s web view won’t work with cookies 🙁
- 26. Timeline of Events Sundayevening (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 Storyabout Ionic for JHipster The previous timelines of events, as a YouTube video… https://www.youtube.com/watch?v=B7TjR_rJVeU
- 29.
- 30. JHipster Ionic (soonish…) Toinstall 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 (anotheroption) 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.
- 33.
- 34. Shortcut to becomingan Ionic Expert JUST DO IT.
- 35. Learn More twitter.com/java_hipster www.jhipster.tech github.com/jhipster/generator-jhipster Get Startedwith JHipster 4: https://youtu.be/XRREt1KB4Y8 JHipster Microservices, Google Cloud, and Kubernetes https://youtu.be/dgVQOYEwleA
- 36.
- 37. What’s New andNext? 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.
- 39.