Slides from my talk at Software Architecture Conf 2016, on the Offline First architecture of Flipkart Lite.

1. @AdityaPunjani
Offline-First Progressive
Web Apps

2. Mobile is key focus area.
• No. of new internet users in India in the last year
alone was one third of United States population.
• 34.8% Internet Penetration.
• 81% of First Time Internet Users are only on
Mobile.
• India to become 2nd largest smart phone market
by 2017.
Source : Mary Meeker’s 2016 Internet Trends Report & Morgan Stanley Report

4. • Poor User Experience.
• Low Performance.
• Lack of Engagement tools.
Why we shut down our mobile website?

5. Mobile Web
No storage
requirements
Instant Loading
(No Install Friction) Always up-to-date

6. Challenges
With Mobile
• Low-end Device Profiles
• Slow Internet Speeds
• Flaky Network connectivity

7. • Browser Navigation Failures
• Network Congestion
• Low Signal
• Battery Saver Mode
• Thermal CPU Throttling
• Limited Carrier Capacity
• Server Outage
• ISP failure
Unpredictable Conditions

8. Learnings from Native App.

9. Architecture
Goals
• App Like Experience
• Build for Offline.
• Optimize for repeat visits

10. JavaScript (React.js) SPA
+
App Shells

11. App Shells

12. Route Defined Route To Render Shell
/:slug/p/:itemid → /slug/p/itemId → Product
/(.*)/pr → /splat/pr → Browse
/search → /search → Search
/accounts/(.*) → /accounts/splat → Accounts
Routes → HTMLApp Shells

13. • Build Time heavy lifting.
• Lightning fast Response
times.
• Long-term cache.
• Reused across URLs.
• Perceived Performance.
• Fast and smooth
Navigations.
• Rich Interactivity.
• App Like polished
experience.
Single Page App App Shells

14. Service Worker
• Highly Programmable Low level primitive.
• Progressive Network Proxy in browser.
• Sophisticated Caching policies.
• Lives beyond the Browser Scope.

15. App Shells - Fastest Strategy

16. Offline Mode
Strategy

17. SW-Toolbox

19. Single Page App - Drawbacks
• JS bundle is huge.
• CSS bundle is huge.
• Bad first load Performance.

20. Multiple SPAs Architecture

21. Each SPA : JS Bundle + CSS Bundle + HTML Shells

22. Benefits of Multiple SPAs
• Smaller JS Bundles.
• Smaller CSS Bundles.
• Decoupled Deployments.
• Navigations between SPAs allow SW
update, Cache clean up, Heap Memory
Clearing.

25. Home Screen users
covert 70% more.
3x more Home Screen
additions.
40% more repeat visits.

26. Biz Requirements
• Cross browser support
• SEO
Phase II

27. SEO with App Shells
• Build a cross browser app.
• Web Crawlers do execute JS.
• Keep JS size small.
• Embed SEO critical content in the
App Shells.
• Test using Webmaster tools.

28. Cross Browser
• Build for the Lowest common Browser engine.
• Optimize for Most common Browser.
• Polyfill / Feature detect every API.
• Tone down Interactions / Animations for older browsers.
• SW as a Progressive Network Proxy.
• PostCSS - Autoprefix and polyfills CSS.
• Conditionally serve JS Polyfills.

29. PROGRESSIVE
WEB APP

30. Performance
Phase III • JS Bundle Size growing with
new features.
• Bounce Rate increasing.

32. Route Based Chunking
(Code - Splitting)

36. Route Based Chunking
• Prioritized JS Downloads.
• Execute only critical JS.
• Cache-Invalidate only the changed JS bundle.

37. SPA
App Shells
Route Chunks
0s 2s 4s 6s 8s
First Content Paint First Meaningful Paint
Performance

39. Requirements
• Extreme Scalability
• Reduce # of network requests
• Fully fault tolerant Web App.
BBD

40. Offline - First
• Network Resilience: Offline is not an
exception but the norm.
• Serving Strategy: Serve all requests from the
cache (offline) before going to the network.

41. PRE-BBD Architecture

42. API Requests

43. Offline-First
API Requests

44. Offline-First Architecture

45. Repeat Visit

46. SPA
App Shells
Route Chunks
Offline-First
0s 2s 4s 6s 8s
First Paint Meaningful Paint
Performance

47. “There are only two hard things in Computer
Science: cache invalidation and naming
things.” -- Phil Karlton.

48. Cache Invalidation
• MaxAgeSeconds based TTL.
• Cache Versions
• Kill Switch

49. Kill Switch
• Global Cache Version
• No-Cache, max-age=0 HTTP headers on SW.js
• SW self.skipWaiting()
• SW self.clients.claim()

50. Emergency - Refresh

51. Offline-First
Network Resilience Reliable Performance Robust Application

52. Reduced Bounce Rate.
2x BAU Conversion during BBD.
Zero User Perceived Downtime.

54. Thank You!
@AdityaPunjani