How we built custom emoji

Notion · 2025 · 3. Quy mô lớn · Độ khó: Dễ — bài gốc

Bài do một thực tập sinh viết về một tính năng nhỏ; wiki giữ vì có quyết định "làm đơn giản trước, ghi rõ giới hạn" khá điển hình.

Bối cảnh

Văn bản trong Notion là [string, Array<TextAnnotation>] (đậm, link, mention...). Mention đã là con trỏ tới dữ liệu ở backend.

Biểu diễn: custom emoji theo đúng mẫu của mention: ["‣", [ ["ce", <ID emoji>, <ID workspace>] ]]. Nhờ vậy đổi ảnh hay tên thì cập nhật ở mọi nơi theo thời gian thực, và cắm được vào hệ render, chỉnh sửa, cộng tác sẵn có.
Picker: vẽ hàng trăm emoji cùng lúc gây chậm, tốn bộ nhớ và dồn request ảnh; dùng virtualization (chỉ vẽ phần trong viewport cộng một đoạn đệm).
Tải lúc nào: cân nhắc tải hết lúc khởi động app hay tải động qua một edge cache. Chọn tải hết lúc khởi động (sau các request quan trọng) vì nhanh làm và picker mở tức thì; dựng edge cache nội bộ là cả một dự án riêng. Giá phải trả: dữ liệu thừa trên client và tải khởi động nặng hơn, nên giới hạn 500 emoji mỗi workspace.
Kết quả: hơn 1,5 triệu custom emoji được tạo từ tháng 10 (theo Notion). Bước tiếp theo là edge cache để bỏ giới hạn 500.

Ra tính năng sớm quan trọng hơn kiến trúc tải tối ưu; giới hạn cứng giữ cho lựa chọn đơn giản không vượt khỏi tầm kiểm soát.

Tái dùng một cấu trúc dữ liệu đã được mọi hệ con hỗ trợ (ở đây là mention) rẻ hơn thêm một loại mới.
Chọn cách đơn giản kèm một giới hạn cứng ghi rõ lý do; giới hạn đó là tín hiệu khi nào phải làm phần khó.