Downloaded 10 times
Uploaded byMatt Raible
Mobile Development with Ionic, React Native, and JHipster - ACGNJ Java Users Group 2019
This document summarizes Matt Raible's presentation on mobile development with Ionic, React Native, and JHipster. It introduces JHipster and how it can be used to generate Spring Boot and Angular/React applications. It then discusses using JHipster to create progressive web apps and how Ignite CLI and Ionic can be used to generate mobile apps from JHipster projects. The presentation concludes by covering JHipster's roadmap and encouraging attendees to try out JHipster.
Mobile Development with Ionic, React Native, and JHipster - ACGNJ Java Users Group 2019
- 1. Mobile Development withIonic, React Native, and JHipster July 23, 2019 Matt Raible | @mraible Photo by Roman Kruglov https://www.flickr.com/photos/romankphoto/9548426282
- 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
- 4.
- 5. Supported Authentication andAuthorization Standards
- 6.
- 7. Agenda 1. Introductionto JHipster 2. JHipster Ignite 3. Ionic for JHipster 4. JHipster Roadmap 5. Action!
- 8. Introduction to JHipster Whatis JHipster? Installing and Using JHipster JHipster Microservices and OIDC Progressive Web Applications Overview Part 1
- 9.
- 10. 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
- 11.
- 12. A powerful workflowto build your application with Yeoman, Webpack/ Gulp 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
- 13. 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
- 14.
- 15. Validate ID Token Token Endpoint AuthorizationEndpoint /.well-known/ openid-configuration JWKS Endpoint UserInfo Endpoint OAuth 2.0 Authorization Server & OpenID Connect Provider (OP) OAuth 2.0 Resource Server Client (Relying Party) 1 3 2 54 1 Discover OpenID Provider Metadata 2 Perform OAuth flow to obtain a ID token and/or access token 3 Get JSON Web Key Set (JWKS) for signature keys 4 Validate ID token (JSON Web Token) 5 Get additional user attributes with access token from UserInfo endpoint OAuth 2.0 and OIDC
- 16. yelp.com/callback Back to redirectURI with authorization code Exchange code for access token and ID token accounts.google.com Email ********** Go to authorization server Redirect URI: yelp.com/cb Scope: openid profile Authorization Server yelp.com Connect with Google Resource owner Client accounts.google.com Allow Yelp to access your public profile and contacts? No Yes Request consent from resource owner Hello Matt! accounts.google Get user info with access token /userinfo OAuth 2.0 and OIDC
- 17. 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-5
- 18. Progressive Web Apps Originatefrom a secure origin, load while offline, and reference a web app manifest.
- 19. Progressive Web Apps Canbe installed on your mobile device, look and act like a native application, but are distributed through the web.
- 20.
- 21. 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
- 22. Add Workbox toContent Security Policy src/main/java/com/okta/developer/config/SecurityConfiguration.java @EnableWebSecurity public class SecurityConfiguration extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { http ... .and() .headers() .contentSecurityPolicy("default-src 'self'; script-src 'self' " + "'unsafe-inline' 'unsafe-eval' https://storage.googleapis.com; " + "style-src 'self' 'unsafe-inline'; img-src 'self' data:") .and() ... } }
- 23. Force HTTPS inSpring Boot src/main/java/com/okta/developer/config/SecurityConfiguration.java @EnableWebSecurity public class SecurityConfiguration extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { http.requiresChannel() .requestMatchers(r -> r.getHeader("X-Forwarded-Proto") != null) .requiresSecure(); } } developer.okta.com/blog/2018/07/30/10-ways-to-secure-spring-boot
- 24. Demo Using JHipster,create an app Generate entities in app Convert app to be a PWA Test with Lighthouse
- 25. Part 2 Ignite JHipster Whatis React Native? What is Ignite CLI? Ignite JHipster JWT and OIDC Support Entity Generator
- 26. 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
- 27. 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
- 28. Demo Create anapp w/ Ignite JHipster Generate entities in app Modify UI to be friendlier Run on iOS and Android
- 29. Build a MobileApp with React Native developer.okta.com/blog/2018/10/10/react-native-spring-boot-mobile-app
- 30. Part 3 Ionic 4JHipster What is Ionic? Why? Ionic Module for JHipster JWT and OIDC Support Entity Generator
- 31. 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
- 32. 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 install -g ionic generator-jhipster-ionic Profit! 🤑
- 33. Demo Create anapp with Ionic4J Generate entities in app Modify UI to be friendlier Run on iOS and Android
- 34. Use Ionic forJHipster to Create Mobile Apps developer.okta.com/blog/2019/06/24/ionic-4-angular-spring-boot-jhipster
- 35. Part 4 JHipsterRoadmap What You Learned What’s Next for JHipster
- 36.
- 37. What’s Next forJHipster? Improved Reactive Support .NET Core and Node.js Blueprints RFCs are open! github.com/jhipster/generator-jhipster/tree/master/rfcs
- 38. Part 5 Action Try JHipster! LearnMore about PWAs Try Ignite JHipster Try Ionic for JHipster Report Issues 🙏
- 39. The JHipster Mini-Book Writtenwith Asciidoctor Free download from InfoQ: infoq.com/minibooks/jhipster-mini-book-5 Quick and to the point, 164 pages Developed a real world app: www.21-points.com
- 40. Learn More stackoverflow.com Spring Boot spring.io/guides JHipster www.jhipster.tech OktaAPIs developer.okta.com
- 41.
- 42.
- 43.
- 44.