In this session, I show how to build a Progressive Web App (PWA) using Ionic, Angular, and Spring Boot. PWAs are being hyped as the next big thing in mobile development. This talk will cut through the hype and get down to the nitty-gritty. Are they really better than native applications? Can you develop PWAs and easily target mobile and desktop with the same application? Tutorial used for demo: http://developer.okta.com/blog/2017/05/17/develop-a-mobile-app-with-ionic-and-spring-boot Source code: https://github.com/oktadeveloper/spring-boot-ionic-example

1. Building a PWA with
Matt Raible / @mraible
Kraków, 17-19 May 2017

2. Blogger on raibledesigns.com
UI Architect and Java Champion
Father, Skier, Mountain
Biker, Whitewater Rafter
Web Framework Connoisseur
Who is Matt Raible?
Bus Lover
Stormpath Developer Evangelist

5. #GeeCON
Authentication Standards

6. #GeeCON
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

7. SPRING INITIALIZR @ start.spring.io

9. @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> {
}

10. Microservices with Spring Boot

11. Secure Microservices with Spring Boot

15. “We’ve failed on mobile”
— Alex Russell
https://youtu.be/K1SFnrf4jZo

16. 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

17. The PRPL Pattern
Push
Render
Pre-cache
Lazy-load

18. 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

19. #GeeCON
Progressive Web Apps

20. Live Coding!
Create 🍺 API
Create UI
Deploy to iOS

21. #GeeCON
Resources
Demo Code
https://github.com/oktadeveloper/
spring-boot-ionic-example
Step-by-step Tutorial
http://developer.okta.com/blog/
2017/05/17/develop-a-mobile-app-with-
ionic-and-spring-boot

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

23. Shortcut to becoming an Ionic Expert
JUST DO IT.

24. developer.okta.com/blog

25. #GeeCON
Questions?
Keep in touch!
raibledesigns.com
@mraible
Presentations
speakerdeck.com/mraible
Code
github.com/oktadeveloper