Paparazzi Charts

Zillow · 2012 · 2. Tăng trưởng · Độ khó: Dễ — bài gốc

Bối cảnh

Biểu đồ (Zestimate, chỉ số giá ZHVI theo thời gian) là nội dung quan trọng trên Zillow.
Tiến hoá trước đó: Flash (không chạy trên mobile) → thư viện JS Dojo charts (khoảng 200 KB JS, thêm một round trip để dò trình duyệt chọn Canvas/SVG/VML). Dojo tốt hơn Flash nhưng vẫn nặng trên mobile.

Paparazzi Charts: service vẽ biểu đồ phía server bằng chính thư viện JS, trả về PNG; client lấy ảnh, hoặc một response JSONP chứa cả ảnh lẫn metadata tương tác. Một script client 20 KB vẽ thêm đường dò và chú thích lên ảnh.
Ảnh + metadata khoảng 50 KB, so với D3 114 KB hay YUI/Dojo khoảng 200 KB chỉ riêng thư viện.
Bản đầu: Python điều khiển một WebKit headless chụp trang, chạy trên Xvfb; theo tác giả (giọng đùa), cuối cùng "hãy coi như" họ đã chuyển sang Dojo trên node.js với node-canvas. Service chạy phần lớn traffic biểu đồ trên 40% của một server cũ.
A/B test: người dùng tương tác với Zillow nhiều hơn khoảng 7% so với biểu đồ cũ (2012).

Kích thước JS quyết định thời gian tải, CPU parse và CPU vẽ, nặng nhất trên mobile; cắt bỏ phần thư viện không dùng không đủ, nên dời việc vẽ về server (Kiến trúc frontend).

Khi chỉ cần một loại biểu đồ, giải pháp chuyên biệt nhỏ có thể thắng thư viện tổng quát vài lần về kích thước.
Đo bằng A/B test hành vi người dùng, không chỉ bằng benchmark.
Hybrid server-render + lớp tương tác mỏng là một điểm giữa giữa SSR và SPA, có từ trước khi khái niệm "isomorphic" phổ biến.