Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile Development with Ionic, React Native, and JHipster - JHipster Dublin 2019

29 views

Published on

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.

Demo Source:

* Demo Script: https://github.com/mraible/mobile-jhipster/blob/master/demo.adoc
* Demo Code Repository: https://github.com/mraible/mobile-jhipster

Related blog posts:

* Build Mobile Apps with Angular, Ionic 4, and Spring Boot: https://developer.okta.com/blog/2019/06/24/ionic-4-angular-spring-boot-jhipster
* Build a Mobile App with React Native and Spring Boot: https://developer.okta.com/blog/2018/10/10/react-native-spring-boot-mobile-app

Published in: Software
  • Be the first to comment

  • Be the first to like this

Mobile Development with Ionic, React Native, and JHipster - JHipster Dublin 2019

  1. 1. Mobile Development with Ionic, React Native, and JHipster September 9, 2019 Matt Raible | @mraible Photo by Arthur Harrow https://www.flickr.com/photos/129069700@N03/28058670738
  2. 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. 3. developer.okta.com
  4. 4. Supported Authentication and Authorization Standards
  5. 5. What About You?
  6. 6. Agenda 1. Introduction to JHipster 2. JHipster Ignite 3. Ionic for JHipster 4. JHipster Roadmap 5. Action!
  7. 7. Introduction to JHipster What is JHipster? Installing and Using JHipster JHipster Microservices and OIDC Progressive Web Applications Overview Part 1
  8. 8. What is JHipster? + =
  9. 9. 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
  10. 10. JHipster is Inclusive github.com/jhipster/jhipster-artwork
  11. 11. 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
  12. 12. 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
  13. 13. Microservices with JHipster
  14. 14. Validate ID Token Token Endpoint Authorization Endpoint /.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
  15. 15. yelp.com/callback Back to redirect URI 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
  16. 16. 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
  17. 17. Progressive Web Apps Originate from a secure origin, load while offline, and reference a web app manifest.
  18. 18. Progressive Web Apps Can be installed on your mobile device, look and act like a native application, but are distributed through the web.
  19. 19. Progressive Web Apps Are fast!
  20. 20. 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
  21. 21. Add Workbox to Content 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() ... } }
  22. 22. Force HTTPS in Spring 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
  23. 23. Demo Using JHipster, create an app Generate entities in app Convert app to be a PWA Test with Lighthouse
  24. 24. JHipster Test Coverage
  25. 25. JHipster 6.2.0 Lighthouse Report
  26. 26. Part 2 Ignite JHipster What is React Native? What is Ignite CLI? Ignite JHipster JWT and OIDC Support Entity Generator
  27. 27. 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
  28. 28. 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
  29. 29. Demo Create an app w/ Ignite JHipster Generate entities in app Modify UI to be friendlier Run on iOS and Android
  30. 30. Build a Mobile App with React Native developer.okta.com/blog/2018/10/10/react-native-spring-boot-mobile-app
  31. 31. Part 3 Ionic 4 JHipster What is Ionic? Why? Ionic Module for JHipster JWT and OIDC Support Entity Generator
  32. 32. 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
  33. 33. 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 install -g ionic generator-jhipster-ionic Profit! 🤑
  34. 34. Demo Create an app with Ionic4J Generate entities in app Modify UI to be friendlier Run on iOS and Android
  35. 35. Use Ionic for JHipster to Create Mobile Apps developer.okta.com/blog/2019/06/24/ionic-4-angular-spring-boot-jhipster
  36. 36. Part 4 JHipster Roadmap What You Learned What’s Next for JHipster
  37. 37. What You Learned
  38. 38. What’s Next for JHipster? Improved Reactive Support .NET Core and Node.js Blueprints RFCs are open! github.com/jhipster/generator-jhipster/tree/master/rfcs
  39. 39. Part 5 Action Try JHipster! Learn More about PWAs Try Ignite JHipster Try Ionic for JHipster Report Issues 🙏
  40. 40. The JHipster Mini-Book
 Written with Asciidoctor Free download from InfoQ: infoq.com/minibooks/jhipster-mini-book Quick and to the point, 164 pages Developed a real world app: www.21-points.com
  41. 41. Learn More stackoverflow.com Spring Boot spring.io/guides JHipster www.jhipster.tech Okta APIs developer.okta.com
  42. 42. developer.okta.com/blog @oktadev
  43. 43. git clone https://github.com/oktadeveloper/okta-spring-webflux-react- example.git github.com/mraible/mobile-jhipster Use the Source, Luke!
  44. 44. Thanks! Keep in Touch raibledesigns.com @mraible Presentations speakerdeck.com/mraible Code github.com/oktadeveloper developer.okta.com
  45. 45. developer.okta.com

×