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: Ionic 4 (with Angular), React Native, and PWAs. 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/master/demo.adoc

1. Mobile Development with Ionic, React Native, and JHipster
Matt Raible | @mraible
Photo by Rami Al-zayat unsplash.com/photos/w33-zg-dNL4

2. Blogger on raibledesigns.com and
developer.okta.com/blog
Web Developer and Java Champion
Father, Husband, Skier, Mountain
Biker, Whitewater Rafter
Open Source Connoisseur
Hi, I’m Matt Raible!
Bus Lover
Okta Developer Advocate

5. http://flickr.com/photos/leecullivan/122271605/

6. http://flickr.com/photos/crowleymr/2530170585/

7. http://www.flickr.com/photos/mraible/2644737051/

8. http://www.travelblog.org/Photos/1597321.html

11. developer.okta.com

12. Supported Authentication and Authorization Standards

13. Agenda 1. Introduction to JHipster
2. Ionic for JHipster
3. JHipster Ignite
4. JHipster Roadmap
5. Action!

14. Introduction to JHipster
What is JHipster?
Installing and Using JHipster
JHipster Microservices and OIDC
Progressive Web Applications Overview
Part 1

15. What is JHipster?
+ =

16. What is JHipster?
JHipster is a development platform to generate, develop and deploy
Spring Boot + Angular/React Web applications and Spring microservices.
and Vue! ✨
www.jhipster.tech

17. A powerful workflow to build your
application with Yeoman, Webpack,
and Maven/Gradle
JHipster Goals
A sleek, modern, mobile-first front-
end with Angular and Bootstrap
A high-performance and robust
Java stack on the server side with
Spring Boot
A robust microservice architecture
with JHipster Registry, Netflix OSS,
Elastic Stack, and Docker

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

19. Microservices with JHipster

20. Monolith Examples
JHipster 6 Demo
github.com/mraible/jhipster6-demo
youtu.be/uQqlO3IGpTU
21-Points Health
github.com/mraible/21-points
infoq.com/minibooks/jhipster-mini-book

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

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

23. Progressive Web Apps
Are fast!

24. Enable 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

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

26. JHipster Test Coverage

27. JHipster 6.8.0 Lighthouse Report

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

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

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

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

32. Demo Create an app with Ionic4J
Generate entities in app
Modify UI to be friendlier
Run on iOS

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

34. Part 3
Ignite JHipster
What is React Native?
What is Ignite CLI?
Ignite JHipster
JWT and OIDC Support
Entity Generator

35. Works on macOS,
Windows, and Linux
Ignite CLI
Saves an average of two
weeks
Easily spin up a new
React Native app
An ever-expanding list
of boilerplates and plugins
infinite.red/ignite

36. Create an app:
ignite new myapp -b ignite-jhipster
Ignite JHipster
https://github.com/ruddell/ignite-jhipster
Install Ignite CLI and Ignite JHipster, using npm:
npm i -g ignite-cli ignite-jhipster
Ignite!
🔥
A React Native boilerplate for JHipster apps

37. Demo Create an app w/ Ignite JHipster
Generate entities in app
Modify UI to be friendlier
Run on Android

38. Part 4
JHipster Roadmap
What You Learned
What’s Next for JHipster

39. What You Learned

40. What’s Next for JHipster?
Full Reactive with WebFlux
and Spring Cloud Gateway
Micronaut and Quarkus Blueprints
GraphQL and Micro Frontends

41. Part 5
Action
Try JHipster!
Learn More about PWAs
Try Ionic for JHipster
Try Ignite JHipster
Report Issues 🙏

42. developer.okta.com/blog
@oktadev

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

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

45. developer.okta.com