Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile App Development with Ionic, React Native, and JHipster - Connect.Tech 2021

Mobile App Development with Ionic, React Native, and JHipster - Connect.Tech 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


Matt Raible

November 10, 2021

More Decks by Matt Raible

Other Decks in Programming


  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
  5. None
  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
  7. None
  8. None
  9. None
  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

  25. None
  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 🙏
  54. None
  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

  59. developer.okta.com