Mobile Development with Ionic, React Native, and JHipster - AllTheTalks 2020

Mobile Development with Ionic, React Native, and JHipster - AllTheTalks 2020

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

72a2082c6a4dd79ad68befb3db911616?s=128

Matt Raible

April 15, 2020
Tweet

Transcript

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

  9. None
  10. None
  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