Mobile Development with Ionic, React Native, and JHipster - JavaLand 2021

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/.../demo.adoc

Transcript

1. 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
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. Agenda 1. Introduction to Reactive JHipster 2. Ionic for JHipster 3. JHipster React Native 4. Flutter for JHipster 5. JHipster Roadmap 6. Action!
12. Introduction to JHipster What is JHipster? Installing and Using JHipster Progressive Web Applications Overview Part 1
13. 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
14. 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
15. JHipster Online https://start.jhipster.tech
16. Import JDL
17. Progressive Web Apps Originate from a secure origin, load while offline, and reference a web app manifest.
18. Progressive Web Apps Can be installed on your mobile device, look and act like a native application, but are distributed through the web.
19. Progressive Web Apps Are fast!
20. 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
21. Demo Using JHipster, create an app Generate entities in app Convert app to be a PWA Test with Lighthouse
22. JHipster Code Quality
23. JHipster 7 Beta Lighthouse Report
24. Part 2 Ionic for JHipster What is Ionic? Why? Ionic Module for JHipster JWT and OIDC Support Entity Generator
25. 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
26. 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).
27. How is a mobile app for JHipster different from its Angular UI?
28. 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! 🤑
29. Demo Create an app with Ionic4J Generate entities in app Run as a PWA Run on iOS
30. Use Ionic for JHipster to Create Mobile Apps developer.okta.com/blog/2019/06/24/ionic-4-angular-spring-boot-jhipster
31. 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
32. 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
33. Demo Create an app w/ React Native Generate entities in app Run in a browser Run on iOS and Android
34. JHipster React Native Demo https://jruddell.com/blog/jhipster-react-native
35. Part 4 Flutter for JHipster What is Flutter? Flutter Module for JHipster Full I18n support Entity Generator JWT Auth Only
36. 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
37. Get Started with Flutter for JHipster https://blog.herofactory.dev/get-started-with-flutter-jhipster-generator
38. Part 5 JHipster Roadmap What You Learned What’s Next for JHipster
39. What You Learned
40. What’s Next for JHipster? < rest up, fix bugs > JHipster 7 GA! GraphQL and Micro Frontends
41. Part 6 Action Try JHipster! Learn More about PWAs Try Ionic for JHipster Try JHipster React Native 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