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

Progressive Web Apps: The new normal

Progressive Web Apps: The new normal

Addy Osmani's keynote explains why progressive web apps (PWAs) are becoming the new normal for fast, reengaging mobile web experiences for large brands such as Twitter, Lyft, and Forbes. Addy also explores how PWA support has massively improved in modern frameworks like React, Preact, Polymer, and Vue, lowering the barriers for developers and businesses to explore them.

Addy Osmani

June 24, 2017
Tweet

More Decks by Addy Osmani

Other Decks in Technology

Transcript

  1. View Slide

  2. @addyosmani

    View Slide

  3. View Slide

  4. 1 billion husband
    points

    View Slide

  5. BET ON THE MOBILE WEB!IT CAN BE
    FAST, RELIABLE AND ENGAGING

    View Slide

  6. 5B devices connected
    to web
    source: we are social

    View Slide

  7. Progressive Web Apps:

    Radically better web experiences
    Reliable
    Fast
    Engaging

    View Slide

  8. PWAs are added to
    homescreen in one tap
    https://www.trivago.co.uk/

    View Slide

  9. Displayed in app
    launcher, and integrated
    into Android settings
    https://www.trivago.co.uk/

    View Slide

  10. ride.lyft.com
    Lyft Download Size:

    View Slide

  11. Fast loading on slow networks

    Use less data
    Works well on smartphones
    https://mobile.twitter.com

    View Slide

  12. Fast, smooth
    scrolling
    https://mobile.twitter.com

    View Slide

  13. Access media
    to tweet
    https://mobile.twitter.com

    View Slide

  14. Receive
    notifications
    https://mobile.twitter.com

    View Slide

  15. Android App
    23 MB+
    100 MB+
    0.6 MB
    iOS App PWA
    https://mobile.twitter.com

    View Slide

  16. 65% increase

    pages/session
    75% increase 

    in Tweets
    1M

    Daily visits from homescreen icon
    https://mobile.twitter.com

    View Slide

  17. PWAs are a cross-browser initiative

    View Slide

  18. https://lancome-usa.com

    View Slide

  19. 53%
    increase in session
    length on iOS
    https://lancome-usa.com

    View Slide

  20. “By 2020, Progressive Web
    Apps will have replaced 50% of
    general-purpose consumer
    facing apps.”
    Gartner Research
    Source: Gartner post

    View Slide

  21. USE A JAVASCRIPT FRAMEWORK THAT
    GIVES YOU HEADROOM ON MOBILE!
    GETTING STARTED?

    View Slide

  22. View Slide

  23. View Slide

  24. The bloat of your baseline defines how
    much headroom you have for app code.
    How much is taken up by your framework?

    View Slide

  25. Plenty of lightweight options for mobile
    Lower total cost on size + parse times from the get-go

    View Slide

  26. View Slide

  27. View Slide

  28. Preact Polymer Vue.js

    View Slide

  29. reactjs.com

    View Slide

  30. View Slide

  31. a zero configuration TOOL
    makes this all easier!

    View Slide

  32. create-react-app
    now creates a PWA
    by default

    View Slide

  33. Progressive Web App
    support
    Code-splitting with
    dynamic import()
    Webpack 2
    Service Worker for
    offline caching
    Helpful overlay for
    uncaught errors
    Jest 20
    create-react-app

    View Slide

  34. Headroom for application code: 1.5s
    https://www.webpagetest.org/result/170503_25_5d1c63ea614dc8696e69f1e6d1de2bfb/

    View Slide

  35. preactjs.com

    View Slide

  36. View Slide

  37. ◦ 15% average improvement in TTI
    ◦ Median TTI of 5.5 seconds
    ◦ 24KB shaved off largest bundle
    ◦ 500ms script bootup on 3G
    ◦ React Router + React
    ◦ Used preact-compat for 2 months
    ◦ Mostly a drop-in

    View Slide

  38. make your code, not your framework
    the largest part of your app!

    View Slide

  39. PREACT
    CLI

    View Slide

  40. 100/100 Lighthouse Automatic code-splitting
    across routes
    PRPL
    Service Worker for
    offline caching
    Built in tracking for
    bundle sizes
    Zero-config
    pre-rendering
    CLI

    View Slide

  41. Headroom for application code: 3s
    https://www.webpagetest.org/result/170503_01_c3c6734aea4e13427fc2a8dacfc95a3c/
    CLI

    View Slide

  42. vuejs.org

    View Slide

  43. View Slide

  44. ◦ Built with Vue.js 2.x & Webpack 2 for code-splitting
    ◦ Global event bus (but exploring Veux)
    ◦ Experimenting with Nuxt.js for component SSR
    ◦ Ads and images use AMP-style placeholders & lazy loading
    ◦ For larger images use WEBP with source-set for HiDPI displays
    ◦ Shipped support
    ◦ Service Worker caching Shell, JS, CSS and images with
    sw-precache

    View Slide

  45. USE A PROGRESSIVE FRAMEWORK
    FOR PROGRESSIVE WEB APPS!

    View Slide

  46. vue init pwa

    View Slide

  47. Progressive Web App
    support
    Code-splitting with
    dynamic import()
    JS chunks preloaded
    or prefetched
    Service Worker for
    offline caching
    vue init pwa
    Version hashes for
    long-term caching
    Bundle size analytics
    npm run build --report

    View Slide

  48. Headroom for application code: 2s
    https://www.webpagetest.org/result/170503_71_046b4347f08805859cb638d48e8831c2/

    View Slide

  49. View Slide

  50. +AddyOsmani
    @addyosmani developers.google.com/web
    Learn More:

    View Slide