Download to read offline
Uploaded byMatt Raible
Mobile App Development with Ionic, React Native, and JHipster - Connect.Tech 2021
The document discusses mobile app development using frameworks like Ionic, React Native, and JHipster, providing an overview of JHipster as an app generator and learning tool. It covers installation, features of Progressive Web Apps, and compares different mobile frameworks, highlighting their unique benefits and functionalities. The document includes demos and encourages readers to try JHipster for practical experience in building mobile applications.
Mobile App Development with Ionic, React Native, and JHipster - Connect.Tech 2021
- 1. Mobile App Development Ionic,React Native, and JHipster November 10, 2021 Matt Raible | @mraible Photo by Christopher Alvarenga unsplash.com/photos/K5iyVtWYXqo
- 2.
- 3. Thriving OSS Project Startedby Julien Dubois on October 21, 2013 App Generator, Platform, Learning Tool …
- 4. How to UseJHipster 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 MattRaible 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.
- 11.
- 12. Agenda 1. ComparingMobile Frameworks 2. Introduction to JHipster 3. Mobile Framework Options - Ionic, React Native, and Flutter 4. Demos 5. Action!
- 13. Comparing Mobile Frameworks ProgressiveWeb Apps Hybrid Apps Native Apps Part 1
- 14. Progressive Web Apps Originatefrom a secure origin, load while offline, and reference a web app manifest.
- 15. Progressive Web Apps Canbe installed on your mobile device, look and act like a native application, but are distributed through the web.
- 16.
- 17. Enabling a PWAin 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.
- 19.
- 20. Stack Overflow Tags 0 100000 200000 300000 400000 AngularReact Vue Ionic React Native Flutter
- 21. Indeed Jobs 0 7500 15000 22500 30000 Angular ReactVue Ionic React Native Flutter
- 22.
- 23. Twitter Poll forIonic Developers https://twitter.com/mraible/status/1456657033118175239
- 24. Twitter Poll forWeb Developers https://twitter.com/mraible/status/1457750453878329352
- 26. Introduction to JHipster Whatis JHipster? Installing and Using JHipster Authentication with OpenID Connect Code Quality Part 2
- 27. A resilient microservicearchitecture 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 UseJHipster Install JHipster and Yeoman, using npm: npm install -g generator-jhipster Create a directory and cd into it: take newapp Run it! jhipster
- 29.
- 30.
- 31. Demo Using JHipster,create an app Generate entities in app Convert app to be a PWA Test with Lighthouse
- 32. Authentication with OpenIDConnect https://auth0.com/blog/full-stack-java-with-react-spring-boot-and-jhipster/
- 33.
- 34. JHipster PWA LighthouseReport
- 35. JHipster PWA onHeroku https://web.dev/measure
- 36. Part 3 Ionic What isIonic? 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 versionof 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 amobile app for JHipster different from its Angular UI?
- 40. Run it! yo jhipster-ionic IonicModule 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 anapp with Ionic4J Generate entities in app Run as a PWA Run on iOS
- 42. Use Ionic forJHipster to Create Mobile Apps developer.okta.com/blog/2019/06/24/ionic-4-angular-spring-boot-jhipster
- 43. Part 3 React Native Whatis 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 anapp w/ React Native Generate entities in app Run in a browser Run on iOS and Android
- 46. JHipster React NativeDemo https://jruddell.com/blog/jhipster-react-native
- 47. Part 3 Flutter What isFlutter? Flutter Module for JHipster Full I18n support Entity Generator JWT Auth Only
- 48. Try Flutter inyour browser https://flutter.dev
- 49. Create an app: yojhipster-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 withFlutter for JHipster https://blog.herofactory.dev/get-started-with-flutter-jhipster-generator
- 51.
- 52. What’s Next forJHipster? Micro Frontends Spring Native GraphQL * These are my personal interests.
- 53. Part 5 Action Try JHipster! LearnMore about PWAs Try Ionic for JHipster Try JHipster React Native Report Issues 🙏
- 55.
- 56.
- 57.
- 58.
- 59.