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

AMP & PWA Initiatives

AMP & PWA Initiatives

anasbladz

July 07, 2017
Tweet

More Decks by anasbladz

Other Decks in Technology

Transcript

  1. AMP and PWA Initiatives
    in Microservices
    Bukalapak.com

    View Slide

  2. ● Slow Internet
    ● Offline State
    ● Expensive
    The Problem: Elephant(s) in the Room

    View Slide

  3. The Big Picture

    View Slide

  4. ● AMP as one of primary funnel
    ○ Golang
    ● PWA initiatives
    ○ Javascript stack (Node, Webpack, Vuejs)
    What We Did?

    View Slide

  5. ● Product Detail
    ○ Search page
    ○ Add to cart
    ○ Product Detail page
    ● Category Page
    ● Tag Page
    AMP Pages

    View Slide

  6. ● Amp-analytics (all amp pages)
    ● Amp-sidebar (all amp pages)
    ● Amp-carousel (all amp pages)
    ● Amp-install-serviceworker (all amp pages)
    ● Amp-lightbox (product detail)
    ● Amp-accordion (product detail)
    ● Amp-bind (product detail)
    ● Amp-selector (product detail)
    AMP Pages: Components

    View Slide

  7. PWA: Service Worker
    ● Sw-precache
    ● sw-toolbox

    View Slide

  8. PWA: Service Worker

    View Slide

  9. Insights - (PWA)

    View Slide

  10. Insights - (Performance)

    View Slide

  11. Offline Mode

    View Slide

  12. Offline Mode

    View Slide

  13. Thank You.

    View Slide