Mobile development offers a lot of options. To develop native apps, you can use Java or Kotlin on Android. On iOS, you can use Objective C or Swift. There are other options, too. You can build hybrid mobile apps and Progressive Web Apps (PWAs). Hybrid mobile apps are those created with web technologies (HTML, JavaScript, and CSS) that look like native apps. PWAs have the ability to work offline and act like mobile apps. In this talk, we'll explore a few different mobile technologies: PWAs, React Native, and Ionic (with Angular). You'll walk away with knowledge of how to build mobile + Spring Boot apps in minutes with JHipster. * GitHub repo: https://github.com/mraible/mobile-jhipster * Demo script: https://github.com/mraible/mobile-jhipster/blob/main/demo.adoc

1. Mobile App Development
Ionic, React Native, and
JHipster
November 10, 2021
Matt Raible | @mraible
Photo by Christopher Alvarenga unsplash.com/photos/K5iyVtWYXqo

2. What is JHipster?

3. Thriving OSS Project
Started by Julien Dubois on October 21, 2013
App Generator, Platform, Learning Tool …

4. 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

6. @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

10. developer.okta.com

11. What About You?

12. Agenda 1. Comparing Mobile Frameworks
2. Introduction to JHipster
3. Mobile Framework Options
- Ionic, React Native, and Flutter
4. Demos
5. Action!

13. Comparing Mobile Frameworks
Progressive Web Apps
Hybrid Apps
Native Apps
Part 1

14. Progressive Web Apps
Originate from a secure origin, load while offline, and reference a
web app manifest.

15. Progressive Web Apps
Can be installed on your mobile device, look and act like a native
application, but are distributed through the web.

16. Progressive Web Apps
Are fast!

17. Enabling a PWA in JHipster
<script>
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

18. Hybrid App Frameworks

19. Native App Frameworks

20. Stack Overflow Tags
0
100000
200000
300000
400000
Angular React Vue
Ionic React Native Flutter

21. Indeed Jobs
0
7500
15000
22500
30000
Angular React Vue
Ionic React Native Flutter

22. Hot Frameworks https://hotframeworks.com

23. Twitter Poll for Ionic Developers
https://twitter.com/mraible/status/1456657033118175239

24. Twitter Poll for Web Developers
https://twitter.com/mraible/status/1457750453878329352

26. Introduction to JHipster
What is JHipster?
Installing and Using JHipster
Authentication with OpenID Connect
Code Quality
Part 2

27. 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

28. 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

29. JHipster Online https://start.jhipster.tech

30. Import JDL

31. Demo Using JHipster, create an app
Generate entities in app
Convert app to be a PWA
Test with Lighthouse

32. Authentication with OpenID Connect
https://auth0.com/blog/full-stack-java-with-react-spring-boot-and-jhipster/

33. JHipster Code Quality

34. JHipster PWA Lighthouse Report

35. JHipster PWA on Heroku https://web.dev/measure

36. Part 3
Ionic
What is Ionic?
Why?
Ionic Module for JHipster
JWT and OIDC Support
Entity Generator

37. Ionic
Ionic Framework
Develop Hybrid & PWA
Apps
https://ionicframework.com
Stencil
Vanilla Web
Components
https://stenciljs.com
PWA Toolkit
Lightning fast PWAs
https://github.com/ionic-
team/ionic-pwa-toolkit

38. 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).

39. How is a mobile app for JHipster
different from its Angular UI?

40. 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!
🤑

41. Demo Create an app with Ionic4J
Generate entities in app
Run as a PWA
Run on iOS

42. Use Ionic for JHipster to Create Mobile Apps
developer.okta.com/blog/2019/06/24/ionic-4-angular-spring-boot-jhipster

43. Part 3
React Native
What is React Native?
JHipster React Native blueprint
Expo, React Native Web, and Detox
JWT and OIDC Support
Entity Generator

44. 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

45. Demo Create an app w/ React Native
Generate entities in app
Run in a browser
Run on iOS and Android

46. JHipster React Native Demo
https://jruddell.com/blog/jhipster-react-native

47. Part 3
Flutter
What is Flutter?
Flutter Module for JHipster
Full I18n support
Entity Generator
JWT Auth Only

48. Try Flutter in your browser
https://flutter.dev

49. 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

50. Get Started with Flutter for JHipster
https://blog.herofactory.dev/get-started-with-flutter-jhipster-generator

51. Part 4
Demo Time!

52. What’s Next for JHipster?
Micro Frontends
Spring Native
GraphQL
* These are my personal interests.

53. Part 5
Action
Try JHipster!
Learn More about PWAs
Try Ionic for JHipster
Try JHipster React Native
Report Issues 🙏

55. What You Learned

56. developer.okta.com/blog
@oktadev

57. git clone https://github.com/oktadeveloper/okta-spring-webflux-react-
example.git
github.com/mraible/mobile-jhipster
Use the Source, Luke!

58. Thanks!
Keep in Touch
raibledesigns.com
@mraible
Presentations
speakerdeck.com/mraible
Code
github.com/mraible
developer.okta.com

59. developer.okta.com