Building a PWA with Ionic, Angular, and Spring Boot - GeeCON 2017

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

Transcript

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