Mobile App Development
Ionic, React Native, and
JHipster
November 10, 2021
Matt Raible | @mraible
Photo by Christopher Alvarenga unsplash.com/photos/K5iyVtWYXqo
Slide 2
Slide 2 text
What is JHipster?
Slide 3
Slide 3 text
Thriving OSS Project
Started by Julien Dubois on October 21, 2013
App Generator, Platform, Learning Tool β¦
Slide 4
Slide 4 text
How to Use JHipster
Install JHipster and Yeoman, using npm:
npm install -g generator-jhipster
Create a directory and cd into it:
mkdir newapp && cd newapp
Run it!
jhipster
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
@mraible
Hi, Iβm Matt Raible
Father, Husband, Skier, Mountain
Biker, Whitewater Rafter
Bus Lover
Web Developer and Java Champion
Okta Developer Advocate
Blogger on raibledesigns.com and
developer.okta.com/blog
@mraible
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
developer.okta.com
Slide 11
Slide 11 text
What About You?
Slide 12
Slide 12 text
Agenda 1. Comparing Mobile Frameworks
2. Introduction to JHipster
3. Mobile Framework Options
- Ionic, React Native, and Flutter
4. Demos
5. Action!
Slide 13
Slide 13 text
Comparing Mobile Frameworks
Progressive Web Apps
Hybrid Apps
Native Apps
Part 1
Slide 14
Slide 14 text
Progressive Web Apps
Originate from a secure origin, load while offline, and reference a
web app manifest.
Slide 15
Slide 15 text
Progressive Web Apps
Can be installed on your mobile device, look and act like a native
application, but are distributed through the web.
Slide 16
Slide 16 text
Progressive Web Apps
Are fast!
Slide 17
Slide 17 text
Enabling a PWA in JHipster
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/service-worker.js')
.then(function () {
console.log('Service Worker Registered');
});
});
}
</
script>
src/main/webapp/index.html
Twitter Poll for Ionic Developers
https://twitter.com/mraible/status/1456657033118175239
Slide 24
Slide 24 text
Twitter Poll for Web Developers
https://twitter.com/mraible/status/1457750453878329352
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
Introduction to JHipster
What is JHipster?
Installing and Using JHipster
Authentication with OpenID Connect
Code Quality
Part 2
Slide 27
Slide 27 text
A resilient microservice architecture
with cloud native principles in mind
JHipster Goals
A sleek, modern, mobile-first UI
with Angular, React, or Vue +
Bootstrap for CSS
A high-performance and robust
server-side stack with excellent
test coverage
A powerful workflow to build your
application with Webpack and
Maven or Gradle
Slide 28
Slide 28 text
How to Use JHipster
Install JHipster and Yeoman, using npm:
npm install -g generator-jhipster
Create a directory and cd into it:
take newapp
Run it!
jhipster
Slide 29
Slide 29 text
JHipster Online https://start.jhipster.tech
Slide 30
Slide 30 text
Import JDL
Slide 31
Slide 31 text
Demo Using JHipster, create an app
Generate entities in app
Convert app to be a PWA
Test with Lighthouse
Slide 32
Slide 32 text
Authentication with OpenID Connect
https://auth0.com/blog/full-stack-java-with-react-spring-boot-and-jhipster/
Slide 33
Slide 33 text
JHipster Code Quality
Slide 34
Slide 34 text
JHipster PWA Lighthouse Report
Slide 35
Slide 35 text
JHipster PWA on Heroku https://web.dev/measure
Slide 36
Slide 36 text
Part 3 Ionic
What is Ionic?
Why?
Ionic Module for JHipster
JWT and OIDC Support
Entity Generator
Why?
The first version of 21-Points Health I wrote with JHipster 2.x was
painful to use on a mobile device. Versions 4.x and 5.x are better, but
still not great.
I want to develop the best user experience. Native apps are painful to
distribute, but work better than PWAs (on iOS).
Slide 39
Slide 39 text
How is a mobile app for JHipster
different from its Angular UI?
Slide 40
Slide 40 text
Run it!
yo jhipster-ionic
Ionic Module for JHipster
Because Ionic Apps need some JHipster π too!
https://github.com/jhipster/generator-jhipster-ionic
Install Ionic and the Ionic Module for JHipster, using npm:
npm i -g @ionic/cli generator-jhipster-ionic yo
Profit!
π€
Slide 41
Slide 41 text
Demo Create an app with Ionic4J
Generate entities in app
Run as a PWA
Run on iOS
Slide 42
Slide 42 text
Use Ionic for JHipster to Create Mobile Apps
developer.okta.com/blog/2019/06/24/ionic-4-angular-spring-boot-jhipster
Slide 43
Slide 43 text
Part 3 React Native
What is React Native?
JHipster React Native blueprint
Expo, React Native Web, and Detox
JWT and OIDC Support
Entity Generator
Slide 44
Slide 44 text
Create an app:
jhipster --blueprints react-native
JHipster React Native
https://github.com/jhipster/generator-jhipster-react-native
Install the React Native blueprint, using npm:
npm install -g generator-jhipster-react-native
Build the next hot mobile app!
π₯
A React Native blueprint for JHipster apps
Slide 45
Slide 45 text
Demo Create an app w/ React Native
Generate entities in app
Run in a browser
Run on iOS and Android
Part 3 Flutter
What is Flutter?
Flutter Module for JHipster
Full I18n support
Entity Generator
JWT Auth Only
Slide 48
Slide 48 text
Try Flutter in your browser
https://flutter.dev
Slide 49
Slide 49 text
Create an app:
yo jhipster-flutter-merlin
Flutter Module for JHipster
https://github.com/merlinofcha0s/generator-jhipster-flutter
Install the Flutter module, using npm:
npm install -g generator-jhipster-flutter-merlin
Build a beautiful mobile app!
π
Generate your Flutter mobile App (Android / iOS) for JHipster
Slide 50
Slide 50 text
Get Started with Flutter for JHipster
https://blog.herofactory.dev/get-started-with-flutter-jhipster-generator
Slide 51
Slide 51 text
Part 4
Demo Time!
Slide 52
Slide 52 text
Whatβs Next for JHipster?
Micro Frontends
Spring Native
GraphQL
* These are my personal interests.
Slide 53
Slide 53 text
Part 5
Action
Try JHipster!
Learn More about PWAs
Try Ionic for JHipster
Try JHipster React Native
Report Issues π
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
What You Learned
Slide 56
Slide 56 text
developer.okta.com/blog
@oktadev
Slide 57
Slide 57 text
git clone https://github.com/oktadeveloper/okta-spring-webflux-react-
example.git
github.com/mraible/mobile-jhipster
Use the Source, Luke!