Mobile Development with Ionic, React Native, and JHipster
Matt Raible | @mraible
Photo by Rami Al-zayat unsplash.com/photos/w33-zg-dNL4
March 17, 2021
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
Agenda 1. Introduction to Reactive JHipster
2. Ionic for JHipster
3. JHipster React Native
4. Flutter for JHipster
5. JHipster Roadmap
6. Action!
Slide 12
Slide 12 text
Introduction to JHipster
What is JHipster?
Installing and Using JHipster
Progressive Web Applications Overview
Part 1
Slide 13
Slide 13 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 14
Slide 14 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 15
Slide 15 text
JHipster Online https://start.jhipster.tech
Slide 16
Slide 16 text
Import JDL
Slide 17
Slide 17 text
Progressive Web Apps
Originate from a secure origin, load while offline, and reference a
web app manifest.
Slide 18
Slide 18 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 19
Slide 19 text
Progressive Web Apps
Are fast!
Slide 20
Slide 20 text
Enable PWA in JHipster
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js')
.then(function () {
console.log('Service Worker Registered');
});
});
}
src/main/webapp/index.html
Slide 21
Slide 21 text
Demo Using JHipster, create an app
Generate entities in app
Convert app to be a PWA
Test with Lighthouse
Slide 22
Slide 22 text
JHipster Code Quality
Slide 23
Slide 23 text
JHipster 7 Beta Lighthouse Report
Slide 24
Slide 24 text
Part 2 Ionic for JHipster
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 27
Slide 27 text
How is a mobile app for JHipster
different from its Angular UI?
Slide 28
Slide 28 text
Run it!
yo jhipster-ionic
Ionic Module for JHipster
Because Ionic Apps need some JHipster ๐ too!
https://github.com/oktadeveloper/generator-jhipster-ionic
Install Ionic and the Ionic Module for JHipster, using npm:
npm i -g @ionic/cli generator-jhipster-ionic yo
Profit!
๐ค
Slide 29
Slide 29 text
Demo Create an app with Ionic4J
Generate entities in app
Run as a PWA
Run on iOS
Slide 30
Slide 30 text
Use Ionic for JHipster to Create Mobile Apps
developer.okta.com/blog/2019/06/24/ionic-4-angular-spring-boot-jhipster
Slide 31
Slide 31 text
Part 3 JHipster React Native
What is React Native?
JHipster React Native blueprint
Expo, React Native Web, and Detox
JWT and OIDC Support
Entity Generator
Slide 32
Slide 32 text
Create an app:
jhipster --blueprints react-native
JHipster React Native
https://github.com/ruddell/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 33
Slide 33 text
Demo Create an app w/ React Native
Generate entities in app
Run in a browser
Run on iOS and Android
Part 4 Flutter for JHipster
What is Flutter?
Flutter Module for JHipster
Full I18n support
Entity Generator
JWT Auth Only
Slide 36
Slide 36 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 37
Slide 37 text
Get Started with Flutter for JHipster
https://blog.herofactory.dev/get-started-with-flutter-jhipster-generator
Slide 38
Slide 38 text
Part 5
JHipster Roadmap
What You Learned
Whatโs Next for JHipster
Slide 39
Slide 39 text
What You Learned
Slide 40
Slide 40 text
Whatโs Next for JHipster?
< rest up, fix bugs >
JHipster 7 GA!
GraphQL and Micro Frontends
Slide 41
Slide 41 text
Part 6
Action
Try JHipster!
Learn More about PWAs
Try Ionic for JHipster
Try JHipster React Native
Report Issues ๐
Slide 42
Slide 42 text
developer.okta.com/blog
@oktadev
Slide 43
Slide 43 text
git clone https://github.com/oktadeveloper/okta-spring-webflux-react-
example.git
github.com/mraible/mobile-jhipster
Use the Source, Luke!