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

Progressive Web App and Discovering on Principle

Progressive Web App and Discovering on Principle

anasbladz

April 02, 2017
Tweet

More Decks by anasbladz

Other Decks in Technology

Transcript

  1. Progressive Web App
    and Discovering on Principle
    Muhammad Nasrurrohman
    Front End Engineer, bukalapak.com

    View Slide

  2. Introduction..

    View Slide

  3. Today’s Talk
    • How we use an app
    • Progressive Web App on mobile devices
    • Inventing on principle

    View Slide

  4. How we use App
    these days..

    View Slide

  5. Is this good enough?

    View Slide

  6. The elephant in the room…
    • Slow Internet
    • Offline state
    • Expensive

    View Slide

  7. View Slide

  8. Indonesian Market & Network
    sessions: 1.2m daily
    visitors: 850k mobile web

    View Slide

  9. Bukalapak Web Traffic
    80%
    mobile web traffic

    View Slide

  10. The Big Picture

    View Slide

  11. Google Initiatives
    • Google AMP (later)
    • Progressive Web App

    View Slide

  12. And it was spot on..

    View Slide

  13. View Slide

  14. Why Progressive Web Apps?
    • Built to work on wifi/3G +
    • Avg CDN transfer rate 250 kb/s
    • Homepage size
    • fast faced business changes
    • Upgrade cost
    • Degradation under network
    failures

    View Slide

  15. Incremental vs. from scratch?

    View Slide

  16. What Makes PWA Possible?

    View Slide

  17. View Slide

  18. View Slide

  19. What is App Shell?

    View Slide

  20. Let’s talk about Storage

    View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. Service Worker

    View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. Web App Manifest

    View Slide

  32. View Slide

  33. View Slide

  34. Today’s Talk
    • How we use an app
    • Progressive Web App on mobile devices
    • Inventing on principle

    View Slide

  35. Have you figured out the head
    fake?

    View Slide

  36. View Slide

  37. View Slide

  38. Your Principle

    View Slide

  39. “Knowing what you dont know is
    more powerful than being briliant”
    - Charlie Munger

    View Slide

  40. Thank You

    View Slide