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

Building Modern Progressive Web Apps

Ire Aderinokun
November 25, 2016

Building Modern Progressive Web Apps

My talk at GDG SouthWest Nigeria DevFest 2016

Ire Aderinokun

November 25, 2016
Tweet

More Decks by Ire Aderinokun

Other Decks in Technology

Transcript

  1. Building Modern
    Progressive Web Apps
    Ire Aderinokun at GDG DevFest SouthWest 2016

    View full-size slide

  2. !
    • Ire Aderinokun
    • UI/UX Designer and Front-End
    Developer
    • Head of Technology, Big Cabal
    • Google Developer Expert,
    Web Technologies

    View full-size slide

  3. bit.ly/chrome-dev-summit-2016

    View full-size slide

  4. What are Progressive Web Apps?

    View full-size slide

  5. Giving PWAs the
    Powers of Native

    View full-size slide

  6. Add to Homescreen
    Install Application

    View full-size slide

  7. Browser Support
    Coming Soon

    View full-size slide

  8. Web Share API
    A proposed Web API to enable a site to share data to an arbitrary
    destination of the user’s choice
    https://github.com/WICG/web-share/blob/master/docs/explainer.md

    View full-size slide

  9. https://www.youtube.com/watch?v=lhUzYxCvWew

    View full-size slide

  10. Browser Support
    Chrome 55

    View full-size slide

  11. Account Management

    View full-size slide

  12. Credential Management API
    An API that will let websites interact with a user agent’s password system so
    that websites can deal in a uniform way with site credentials and user agents
    can provide better assistance with the management of their credentials.
    https://developers.google.com/web/updates/2016/04/credential-management-api

    View full-size slide

  13. https://www.youtube.com/watch?v=O3mBdKYMsMY

    View full-size slide

  14. Browser Support

    View full-size slide

  15. Payment Request API
    The Payment Request API is a system that is meant to eliminate checkout
    forms. It vastly improves user workflow during the purchase process, providing
    a more consistent user experience and enabling web merchants to easily
    leverage disparate payment methods.
    https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API

    View full-size slide

  16. https://www.youtube.com/watch?v=O3mBdKYMsMY

    View full-size slide

  17. Browser Support

    View full-size slide

  18. PWAs and Performance

    View full-size slide

  19. Test on Real Hardware

    View full-size slide

  20. – Alex Russell, Software Engineer, Google
    “Your Laptop is a Filthy Liar”

    View full-size slide

  21. JavaScript on Desktop
    Alex Russell, “Progressive Performance”
    https://developer.chrome.com/devsummit/schedule/sessions/progressive-performance

    View full-size slide

  22. JavaScript on Mobile
    Alex Russell, “Progressive Performance”
    https://developer.chrome.com/devsummit/schedule/sessions/progressive-performance

    View full-size slide

  23. Get the Real Deal

    View full-size slide

  24. Measure Performance
    with the RAIL Model

    View full-size slide

  25. https://developers.google.com/web/fundamentals/performance/rail

    View full-size slide

  26. < 100 ms every
    16 ms
    50ms
    chunks
    < 1000 ms
    https://developers.google.com/web/fundamentals/performance/rail

    View full-size slide

  27. Implement the
    PRPL Pattern

    View full-size slide

  28. https://developers.google.com/web/fundamentals/performance/prpl-pattern/

    View full-size slide

  29. Use Client-Side Storage

    View full-size slide

  30. Storage Types
    • Cache Storage
    • Indexed DB
    • Cookies
    • Local Storage
    • Session Storage

    View full-size slide

  31. Cache Storage API
    The CacheStorage interface represents the storage for Cache objects.
    It provides a master directory of all the named caches that a
    ServiceWorker, other type of worker or window scope can access and
    maintains a mapping of string names to corresponding Cache objects.

    View full-size slide

  32. Browser Support
    40 44

    View full-size slide

  33. IndexedDB
    IndexedDB is a low-level API for client-side storage of significant
    amounts of structured data.

    View full-size slide

  34. Browser Support

    View full-size slide

  35. Cache Storage API
    URL addressable data
    IndexedDB
    Structured data

    View full-size slide

  36. https://app.bitsofco.de/

    View full-size slide

  37. Try WebAssembly

    View full-size slide

  38. What is WebAssembly?
    • Source code: What a developer writes.
    • Compiler: An application that turns source code into assembly, bytecode or
    machine code (what other apps or hardware run).
    • Assembly: A low-level source-like language specific to a machine or an
    application.
    • Bytecode: A low-level binary representation of code that can be run by other
    applications.
    • Machine code: A binary representation of code that can be run directly by
    hardware.
    Auth0, “7 Things you should know about WebAssembly”
    https://auth0.com/blog/7-things-you-should-know-about-web-assembly/

    View full-size slide

  39. Why WebAssembly?

    View full-size slide

  40. http://webassembly.org/demo/

    View full-size slide

  41. Browser Support

    View full-size slide

  42. PWAs and Modern
    Frameworks

    View full-size slide

  43. PWA
    AMP
    Angular
    React
    Ember

    View full-size slide

  44. PWA + AMP = PWAMP

    View full-size slide

  45. Paul Bakaus, “From AMP to PWA”
    https://developer.chrome.com/devsummit/schedule/sessions/from-amp-to-pwa

    View full-size slide

  46. Paul Bakaus, “From AMP to PWA”
    https://developer.chrome.com/devsummit/schedule/sessions/from-amp-to-pwa

    View full-size slide

  47. Use Performance-
    Friendly Alternatives

    View full-size slide

  48. Advanced
    Service Worker

    View full-size slide

  49. What is a Service Worker?
    A service worker is a script that runs in the background that can
    provide features like intercepting and handling fetch requests,
    background sync, push notifications and more.

    View full-size slide

  50. Browser Support

    View full-size slide

  51. Background Fetch

    View full-size slide

  52. Jake Archibald, “Future App Model”
    https://developer.chrome.com/devsummit/schedule/sessions/future-app-model

    View full-size slide

  53. Browser Support
    None Yet

    View full-size slide

  54. Navigation Transitions

    View full-size slide

  55. Jake Archibald, “Future App Model”
    https://developer.chrome.com/devsummit/schedule/sessions/future-app-model

    View full-size slide

  56. Browser Support
    None Yet

    View full-size slide

  57. Doing More with PWAs

    View full-size slide

  58. PWA Don’t Have to Look Like This…
    https://app.bitsofco.de/

    View full-size slide

  59. bit.ly/webvr-demos
    Created by Martin Splitt

    View full-size slide

  60. Browser Support
    https://iswebvrready.org/

    View full-size slide

  61. Physical Web

    View full-size slide

  62. Turn On Physical Web (Now!)
    iOS Android
    1. Install Google Chrome
    2. Go to the Widgets Screen
    3. Click on Edit
    4. Add the Chrome Widget
    5. Wait for the Physical Web
    Information, then click Enable
    1. Install or Open Google Chrome
    2. Go to Settings
    3. Go to Privacy (under Advanced)
    4. Click Physical Web
    5. Toggle Enable
    Look for “bitsofcode” or “Building Modern PWA”

    View full-size slide

  63. Tools for Developing
    PWAs

    View full-size slide

  64. Web Starter Kit
    https://github.com/google/web-starter-kit

    View full-size slide

  65. Polymer Starter Kit
    https://github.com/PolymerElements/polymer-starter-kit

    View full-size slide

  66. SW Precache & SW Toolbox
    https://github.com/GoogleChrome/sw-precache & https://github.com/GoogleChrome/sw-toolbox

    View full-size slide

  67. Lighthouse
    https://github.com/GoogleChrome/lighthouse

    View full-size slide

  68. Chrome Dev Summit 2016
    bit.ly/chrome-dev-summit-2016

    View full-size slide