Download to read offline
Uploaded byMatt Raible
Mobile Development with Ionic, React Native, and JHipster - AllTheTalks 2020
The document provides an overview of mobile development using JHipster, Ionic, and React Native. It outlines JHipster as a development platform for generating web applications and microservices, highlights the use of Ionic for building hybrid and Progressive Web Apps (PWAs), and presents Ignite CLI for creating React Native applications. The roadmap for JHipster's future developments and resources for learning and trying out the frameworks are also included.
More Related Content
Similar to Mobile Development with Ionic, React Native, and JHipster - AllTheTalks 2020
![Lect 1 Number systems and base conversions. [Autosaved].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/lect1numbersystemsandbaseconversions-260111134109-67c2d865-thumbnail.jpg?width=640&height=640&fit=bounds)
Mobile Development with Ionic, React Native, and JHipster - AllTheTalks 2020
- 1. Mobile Development withIonic, React Native, and JHipster Matt Raible | @mraible Photo by Rami Al-zayat unsplash.com/photos/w33-zg-dNL4
- 2. Blogger on raibledesigns.comand 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.
- 6.
- 7.
- 8.
- 11.
- 12. Supported Authentication andAuthorization Standards
- 13. Agenda 1. Introductionto JHipster 2. Ionic for JHipster 3. JHipster Ignite 4. JHipster Roadmap 5. Action!
- 14. Introduction to JHipster Whatis JHipster? Installing and Using JHipster JHipster Microservices and OIDC Progressive Web Applications Overview Part 1
- 15.
- 16. What is JHipster? JHipsteris 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 workflowto 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 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
- 19.
- 20. Monolith Examples JHipster 6Demo 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 Originatefrom a secure origin, load while offline, and reference a web app manifest.
- 22. Progressive Web Apps Canbe installed on your mobile device, look and act like a native application, but are distributed through the web.
- 23.
- 24. Enable PWA inJHipster <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.
- 27.
- 28. Part 2 Ionic forJHipster 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 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).
- 31. Run it! yo jhipster-ionic IonicModule 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 anapp with Ionic4J Generate entities in app Modify UI to be friendlier Run on iOS
- 33. Use Ionic forJHipster to Create Mobile Apps developer.okta.com/blog/2019/06/24/ionic-4-angular-spring-boot-jhipster
- 34. Part 3 Ignite JHipster Whatis 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 IgniteJHipster 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 anapp w/ Ignite JHipster Generate entities in app Modify UI to be friendlier Run on Android
- 38. Part 4 JHipster Roadmap WhatYou Learned What’s Next for JHipster
- 39.
- 40. What’s Next forJHipster? Full Reactive with WebFlux and Spring Cloud Gateway Micronaut and Quarkus Blueprints GraphQL and Micro Frontends
- 41. Part 5 Action Try JHipster! LearnMore about PWAs Try Ionic for JHipster Try Ignite JHipster Report Issues 🙏
- 42.
- 43.
- 44.
- 45.