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
%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein
Mobile Development with Ionic, React Native, and JHipster - JHipster Dublin 2019
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. 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
9. Agenda 1. Introduction to JHipster
2. JHipster Ignite
3. Ionic for JHipster
4. JHipster Roadmap
5. Action!
10. Introduction to JHipster
What is JHipster?
Installing and Using JHipster
JHipster Microservices and OIDC
Progressive Web Applications Overview
Part 1
12. 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
14. 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
15. 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
17. 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
18. 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
29. Part 2
Ignite JHipster
What is React Native?
What is Ignite CLI?
Ignite JHipster
JWT and OIDC Support
Entity Generator
30. 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
31. 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
32. Demo Create an app w/ Ignite JHipster
Generate entities in app
Modify UI to be friendlier
Run on iOS and Android
33. Build a Mobile App with React Native
developer.okta.com/blog/2018/10/10/react-native-spring-boot-mobile-app
34. Part 3
Ionic 4 JHipster
What is Ionic?
Why?
Ionic Module for JHipster
JWT and OIDC Support
Entity Generator
36. 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!
🤑
37. Demo Create an app with Ionic4J
Generate entities in app
Modify UI to be friendlier
Run on iOS and Android
38. Use Ionic for JHipster to Create Mobile Apps
developer.okta.com/blog/2019/06/24/ionic-4-angular-spring-boot-jhipster
39. Part 4 JHipster Roadmap
What You Learned
What’s Next for JHipster
41. 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
43. 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