Tweet
Tweet

Slide 1

Slide 1 text

Mobile Development with Ionic, React Native, and JHipster Matt Raible | @mraible Photo by Rodion Kutsaev unsplash.com/photos/0VGG7cqTwCo

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

http://flickr.com/photos/leecullivan/122271605/

Slide 6

Slide 6 text

http://flickr.com/photos/crowleymr/2530170585/

Slide 7

Slide 7 text

http://www.flickr.com/photos/mraible/2644737051/

Slide 8

Slide 8 text

http://www.travelblog.org/Photos/1597321.html

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

developer.okta.com

Slide 12

Slide 12 text

Supported Authentication and Authorization Standards

Slide 13

Slide 13 text

Agenda 1. Introduction to JHipster 2. Ionic for JHipster 3. JHipster Ignite 4. JHipster Roadmap 5. Action!

Slide 14

Slide 14 text

Introduction to JHipster What is JHipster? Installing and Using JHipster JHipster Microservices and OIDC Progressive Web Applications Overview Part 1

Slide 15

Slide 15 text

What is JHipster? + =

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Microservices with JHipster

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Progressive Web Apps Originate from a secure origin, load while offline, and reference a web app manifest.

Slide 22

Slide 22 text

Progressive Web Apps Can be installed on your mobile device, look and act like a native application, but are distributed through the web.

Slide 23

Slide 23 text

Progressive Web Apps Are fast!

Slide 24

Slide 24 text

Enable PWA in JHipster if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/service-worker.js') .then(function () { console.log('Service Worker Registered'); }); }); } src/main/webapp/index.html

Slide 25

Slide 25 text

Demo Using JHipster, create an app Generate entities in app Convert app to be a PWA Test with Lighthouse

Slide 26

Slide 26 text

JHipster Test Coverage

Slide 27

Slide 27 text

JHipster 6.8.0 Lighthouse Report

Slide 28

Slide 28 text

Part 2 Ionic for JHipster What is Ionic? Why? Ionic Module for JHipster JWT and OIDC Support Entity Generator

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Why? The first version of 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).

Slide 31

Slide 31 text

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 i -g @ionic/cli generator-jhipster-ionic yo Profit!

Slide 32

Slide 32 text

Demo Create an app with Ionic4J Generate entities in app Modify UI to be friendlier Run on iOS

Slide 33

Slide 33 text

Use Ionic for JHipster to Create Mobile Apps developer.okta.com/blog/2019/06/24/ionic-4-angular-spring-boot-jhipster

Slide 34

Slide 34 text

Part 3 Ignite JHipster What is React Native? What is Ignite CLI? Ignite JHipster JWT and OIDC Support Entity Generator

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Demo Create an app w/ Ignite JHipster Generate entities in app Modify UI to be friendlier Run on Android

Slide 38

Slide 38 text

Part 4 JHipster Roadmap What You Learned What’s Next for JHipster

Slide 39

Slide 39 text

What You Learned

Slide 40

Slide 40 text

What’s Next for JHipster? Full Reactive with WebFlux and Spring Cloud Gateway Micronaut and Quarkus Blueprints GraphQL and Micro Frontends

Slide 41

Slide 41 text

Part 5 Action Try JHipster! Learn More about PWAs Try Ionic for JHipster Try Ignite JHipster Report Issues

Slide 42

Slide 42 text

developer.okta.com/blog @oktadev

Slide 43

Slide 43 text

git clone https://github.com/oktadeveloper/okta-spring-webflux-react- example.git github.com/mraible/mobile-jhipster Use the Source, Luke!

Slide 44

Slide 44 text

Thanks! Keep in Touch raibledesigns.com @mraible Presentations speakerdeck.com/mraible Code github.com/oktadeveloper developer.okta.com

Slide 45

Slide 45 text

developer.okta.com