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.

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