Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Matt Raible

May 17, 2017
Tweet

More Decks by Matt Raible

Other Decks in Technology

Transcript

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

    View full-size slide

  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

    View full-size slide

  3. #GeeCON
    Authentication Standards

    View full-size slide

  4. #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

    View full-size slide

  5. SPRING INITIALIZR @ start.spring.io

    View full-size slide

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

    View full-size slide

  7. Microservices with Spring Boot

    View full-size slide

  8. Secure Microservices with Spring Boot

    View full-size slide

  9. “We’ve failed on mobile”

    — Alex Russell

    https://youtu.be/K1SFnrf4jZo

    View full-size slide

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

    View full-size slide

  11. The PRPL Pattern
    Push

    Render

    Pre-cache

    Lazy-load

    View full-size slide

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

    View full-size slide

  13. #GeeCON
    Progressive Web Apps

    View full-size slide

  14. Live Coding!
    Create API

    Create UI

    Deploy to iOS

    View full-size slide

  15. #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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. developer.okta.com/blog

    View full-size slide

  19. #GeeCON
    Questions?
    Keep in touch!

    raibledesigns.com

    @mraible

    Presentations

    speakerdeck.com/mraible

    Code

    github.com/oktadeveloper

    View full-size slide