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

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

Matt Raible
February 13, 2017

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

YouTube: https://www.youtube.com/watch?v=C_V3Je7Iwso

In this session, you'll learn 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: https://github.com/stormpath/stormpath-spring-boot-ionic-example/blob/master/TUTORIAL.md
Source code: https://github.com/stormpath/stormpath-spring-boot-ionic-example

Matt Raible

February 13, 2017
Tweet

More Decks by Matt Raible

Other Decks in Technology

Transcript

  1. BUILDING PROGRESSIVE WEB APPS
    MATT RAIBLE / @MRAIBLE
    WITH AND

    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. Stormpath User Management

    View full-size slide

  4. 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. “We’ve failed on mobile”

    — Alex Russell

    https://youtu.be/K1SFnrf4jZo

    View full-size slide

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

  8. The PRPL Pattern
    Push

    Render

    Pre-cache

    Lazy-load

    View full-size slide

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

  10. Progressive Web Apps

    View full-size slide

  11. Stormpath SDK for Angular

    View full-size slide

  12. Live Coding!
    Create API

    Create UI

    Add Stormpath

    Deploy to iOS

    View full-size slide

  13. Resources
    Demo Code

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

    Step-by-step Tutorial

    https://github.com/stormpath/
    stormpath-spring-boot-ionic-example/
    blob/master/TUTORIAL.md

    View full-size slide

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

    View full-size slide

  15. Shortcut to becoming an Ionic Expert
    JUST DEV IT.

    View full-size slide

  16. Keep in touch!

    raibledesigns.com

    @mraible

    linkedin.com/in/mraible

    Presentations

    slideshare.net/mraible

    Code

    github.com/mraible
    Questions?

    View full-size slide