PWAs with Ionic, Angular, and Spring Boot - Devoxx Poland 2017

PWAs with Ionic, Angular, and Spring Boot - Devoxx Poland 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

72a2082c6a4dd79ad68befb3db911616?s=128

Matt Raible

June 22, 2017
Tweet

Transcript

  1. Building a PWA with Matt Raible matt.raible@okta.com #DevoxxPL @mraible

  2. None
  3. Blogger on raibledesigns.com Web Developer and Java Champion Father, Skier,

    Mountain Biker, Whitewater Rafter Open Source Connoisseur Who is Matt Raible? Bus Lover Okta Developer Advocate
  4. None
  5. None
  6. #DevoxxPL Authentication Standards

  7. #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
  8. SPRING INITIALIZR @ start.spring.io

  9. None
  10. @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> { }
  11. Microservices with Spring Boot

  12. None
  13. None
  14. None
  15. None
  16. “We’ve failed on mobile” — Alex Russell https://youtu.be/K1SFnrf4jZo

  17. 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
  18. The PRPL Pattern Push Render Pre-cache Lazy-load

  19. 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
  20. #DevoxxPL Progressive Web Apps

  21. #DevoxxPL Learn More on scotch.io https://scotch.io/tutorials/the-ultimate-guide-to-progressive-web-applications

  22. Live Coding! Create API Create UI Deploy to iOS

  23. #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
  24. Learn Ionic https://www.joshmorony.com/building-mobile-apps-with-ionic-2/

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

  26. developer.okta.com/blog

  27. #DevoxxPL Questions? Keep in touch! raibledesigns.com @mraible Presentations speakerdeck.com/mraible Code

    github.com/oktadeveloper