Embed Size (px)
Citation preview
Developing PWAs and Mobile Apps with Ionic, Angular, and JHipster
Matt Raible
@mraible
raibledesigns.com
developer.okta.com
#DevoxxMA
Blogger on raibledesigns.com
Web Developer and Java Champion
Father, Skier, Mountain Biker, Whitewater Rafter
Open Source Connoisseur
Who is Matt Raible?
Bus LoverOkta Developer Advocate
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
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
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
The PRPL Pattern
Push
Render
Pre-cache
Lazy-load
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
#DevoxxMA
Progressive Web Apps
#DevoxxMA
Learn More about PWAshttps://developer.okta.com/blog/2017/07/20/the-ultimate-guide-to-progressive-web-applications
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.
Timeline of Events
Oct 10: Started looking into creating Ionic for JHipster
Timeline of Events
Oct 10: Started looking into creating Ionic for JHipster
Oct 11: No advice from Stack Overflow, asked the JHipster Team
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
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
😡
Timeline of EventsDiscovered OAuth wouldn’t work, because JHipster implementation uses cookies, and Cordova’s web view won’t work with cookies
🙁
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.
😳
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!! 😁
👍
🎉
My Dev Story about Ionic for JHipsterThe previous timelines of events, as a YouTube video…
https://www.youtube.com/watch?v=B7TjR_rJVeU
Demo Time!
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
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
#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
Learn Ionic
https://www.joshmorony.com/building-mobile-apps-with-ionic-2/
Shortcut to becoming an Ionic Expert
JUST DO IT.
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 Kuberneteshttps://youtu.be/dgVQOYEwleA
Getting Help
stackoverflow.com/tags/jhipster
gitter.im/jhipster/generator-jhipster
github.com/jhipster/.../CONTRIBUTING.md
groups.google.com/.../jhipster-dev
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
#DevoxxMA
Questions?Keep in touch!
raibledesigns.com
@mraible
Presentations
speakerdeck.com/mraible
Code
github.com/oktadeveloper
