Building a PWA with

Matt Raible matt.raible@okta.com

#DevoxxPL @mraible

Blogger on raibledesigns.com

Web Developer and Java Champion

Father, Skier, Mountain Biker, Whitewater Rafter

Open Source Connoisseur

Who is Matt Raible?

Bus LoverOkta Developer Advocate

#DevoxxPL

Authentication Standards

#DevoxxPL

Spring Boot

Automatically configures Spring whenever possible

Provides production-ready features such as metrics, health checks and externalized configuration

Absolutely no code generation and no requirement for XML configuration

Embeds Tomcat, Jetty or Undertow directly

SPRING INITIALIZR @ start.spring.io

@SpringBootApplication public class DemoApplication {

public static void main(String[] args) { SpringApplication.run(DemoApplication.class, args); } }

@Entity class Blog {

@Id @GeneratedValue private Long id; private String name;

// getters, setters, toString(), etc }

@RepositoryRestResource interface BlogRepository extends PagingAndSortingRepository<Blog, Long> { }

Microservices with Spring Boot

“We’ve failed on mobile”

— Alex Russellhttps://youtu.be/K1SFnrf4jZo

Mobile Hates You!

How to fight back:

Implement PRPL

Get a ~$150-200 unlocked Android (e.g. Moto G4)

Use chrome://inspect && chrome://inspect?tracing

Lighthouse

DevTools Network & CPU Throttling

The PRPL Pattern

Push

Render

Pre-cache

Lazy-load

The PRPL Pattern

Push critical resources for the initial URL route

Render initial route

Pre-cache remaining routes

Lazy-load and create remaining routes on demand

#DevoxxPL

Progressive Web Apps

#DevoxxPL

Learn More on scotch.iohttps://scotch.io/tutorials/the-ultimate-guide-to-progressive-web-applications

Live Coding!Create 🍺 API

Create UI

Deploy to iOS

#DevoxxPL

Resources

Demo Code

https://github.com/oktadeveloper/spring-boot-ionic-example

Step-by-step Tutorial

https://developer.okta.com/blog/2017/05/17/develop-a-mobile-app-with-ionic-and-spring-boot

Learn Ionic

https://www.joshmorony.com/building-mobile-apps-with-ionic-2/

Shortcut to becoming an Ionic Expert

JUST DO IT.

developer.okta.com/blog

#DevoxxPL

Questions?Keep in touch!

raibledesigns.com

@mraible

Presentations

speakerdeck.com/mraible

Code

github.com/oktadeveloper