Blog / Series
Học từ mã nguồn Facebook106
Đọc bundle JavaScript của facebook.com, rút ra 105 kỹ thuật frontend và viết lại bằng React + TypeScript, mỗi bài có demo chạy ngay trong bài.
Mở đầu
Phần 1: hạ tầng chạy ngầm
01Học từ Facebook #1: dùng chung IntersectionObserver cho cả trang02Học từ Facebook #2: useViewportDuration, đo thời gian thực sự được xem03Học từ Facebook #3: preload code và data ngay khi người dùng hover04Học từ Facebook #4: toast manager với external store và hàng đợi05Học từ Facebook #5: Đừng tin navigator.onLine, hãy dùng heartbeat06Học từ Facebook #6: ErrorGuard, bắt lỗi theo ngữ cảnh07Học từ Facebook #7: Banzai, gom log theo lô và gửi bằng sendBeacon08Học từ Facebook #8: Focus trap và Esc theo layer cho dialog
Phần 2: giao diện và SPA
09Học từ Facebook #9: Mẹo calc(… * 9999), container query bằng CSS10Học từ Facebook #10: Thanh cuộn tuỳ biến chạy trên compositor11Học từ Facebook #11: Modal cuộn bằng window, trang nền giữ đúng chỗ12Học từ Facebook #12: Định vị popover, tooltip nhóm và hovercard13Học từ Facebook #13: Pressable, press-out và focus-visible tự viết14Học từ Facebook #14: Tab "Xem thêm" và sticky header không đo đạc15Học từ Facebook #15: Avatar SVG mask, chat gradient, skeleton rẻ16Học từ Facebook #16: Khung chat không giật khi tải tin cũ17Học từ Facebook #17: Thuật toán chọn bố cục collage ảnh18Học từ Facebook #18: Keep-alive tab trong SPA19Học từ Facebook #19: Tự đo Visual Completion và Speed Index20Học từ Facebook #20: Router SPA chạy lâu và tải JS/CSS bền bỉ
Phần 3: đi sâu vào bundle
21Học từ Facebook #21: Smart Compose, gợi ý chữ mờ khi gõ22Học từ Facebook #22: MQTT ngay trong trình duyệt, tự chuyển sang long-poll23Học từ Facebook #23: Đo thời gian dùng bằng bitmap 64 giây24Học từ Facebook #24: Bảng reaction nhấn giữ rồi trượt25Học từ Facebook #25: Tìm kiếm gõ không dấu và tô đậm đúng đầu từ26Học từ Facebook #26: Ring buffer biết trace nào đã mất log27Học từ Facebook #27: Một vòng rAF chung và solver cubic-bezier tự viết28Học từ Facebook #28: Bitmap tài nguyên đã tải và reload đúng lúc29Học từ Facebook #29: Nhận biết click do screen reader tạo ra30Học từ Facebook #30: Tải trước feed theo chất lượng mạng31Học từ Facebook #31: Hàng đợi gửi tin chat giữ đúng thứ tự32Học từ Facebook #32: Gộp lời gọi API trong cùng một tick33Học từ Facebook #33: Resize ảnh trong pool Web Worker34Học từ Facebook #34: Crop ảnh theo nhiều khuôn mặt35Học từ Facebook #35: Kéo-thả sắp xếp và vùng thả file không nhấp nháy36Học từ Facebook #36: Bốn tiện ích UI nhỏ mà dùng khắp nơi37Học từ Facebook #37: Cookie theo bảng chính sách, hash lỗi và chuột dừng
Phần 4: Messenger và realtime
38Học từ Facebook #38: Đồng bộ tin nhắn theo seqID và vá lỗ39Học từ Facebook #39: OTID, ID tin nhắn sinh ngay ở client40Học từ Facebook #40: QPL, đo RTT gửi tin từ bấm gửi tới lúc dội về41Học từ Facebook #41: Điều phối request bảy chế độ gộp và chống trùng42Học từ Facebook #42: Thread list theo thời gian, presence có version
Phần 5: sản phẩm (composer, thanh toán, quảng cáo, Pages)
43Học từ Facebook #43: Composer dạng plugin, mỗi plugin tự lo phần mình44Học từ Facebook #44: Thanh toán bất đồng bộ, ai đến trước thì thắng45Học từ Facebook #45: Validate số thẻ với BIN, Luhn và sửa lỗi gõ46Học từ Facebook #46: Lịch chọn khoảng ngày bo góc theo hàng47Học từ Facebook #47: Giờ mở cửa theo tuần, khoảng qua đêm và phần bù48Học từ Facebook #48: Snapshot + push, giữ event chờ snapshot và watchdog49Học từ Facebook #49: Tiền tệ theo đơn vị nhỏ nhất và ô nhập tiền50Học từ Facebook #50: Sửa hàng loạt và trạng thái seen/read bằng 2 bit
Phần 6: hạ tầng sâu
51Học từ Facebook #51: Kiểm tra hàm native của trang có bị bọc không52Học từ Facebook #52: localStorage tự dọn khi đầy quota53Học từ Facebook #53: Cache route do server phân giải, chờ sẵn promise54Học từ Facebook #54: Lưới phím mũi tên 2D, focus không cuộn trang55Học từ Facebook #55: Tách cụm emoji bằng máy trạng thái56Học từ Facebook #56: Đọc trước ghi sau trong một frame57Học từ Facebook #57: Hàng đợi lệnh cho video và stream sắp lại chunk
Phần 7: video và upload
58Học từ Facebook #58: Ước lượng băng thông bằng EWMA và nhớ qua phiên59Học từ Facebook #59: Chọn bitrate theo độ tự tin phát và điểm MOS60Học từ Facebook #60: Đoán trước segment live và đọc hộp sidx61Học từ Facebook #61: Đọc metadata MP4/MOV ngay trên client62Học từ Facebook #62: Upload video tiếp tục được khi rớt mạng
Phần 8: thuật toán và cấu trúc dữ liệu
63Học từ Facebook #63: Cây tổng trong mảng, rút thăm theo trọng số64Học từ Facebook #64: Vạch trục số và trục thời gian "đẹp" cho biểu đồ65Học từ Facebook #65: Damerau-Levenshtein theo dải chéo, tự sửa tên gõ sai66Học từ Facebook #66: PRNG có seed, xáo trộn tái lập và lấy mẫu trace 1/3267Học từ Facebook #67: Cặp min/max-heap tái dùng node DOM trong danh sách ảo68Học từ Facebook #68: Memo nhiều đối số bằng Map/WeakMap và interning object69Học từ Facebook #69: Thống kê cửa sổ trượt và đại số khoảng thời gian70Học từ Facebook #70: Int64 từ hai số 32-bit, decode UTF và offset theo code point
Phần 9: thời gian, chuỗi và URL
Phần 10: hạ tầng, bảo mật và hình học
75Học từ Facebook #75: Popover tự lật theo phần tràn nhỏ nhất76Học từ Facebook #76: Tiền tố for(;;) chống JSON hijacking, đọc stream77Học từ Facebook #77: Chống lộ Referer, linkshim, xoá token trên URL78Học từ Facebook #78: setImmediate bằng postMessage, gom chuột theo frame79Học từ Facebook #79: Phát hiện crash qua heartbeat, dò proxy cache hỏng80Học từ Facebook #80: DPR vào cookie cho ảnh @2x, che khoá trong log81Học từ Facebook #81: Flux waitFor tự viết và proxy có đệm82Học từ Facebook #82: Crop đúng tỉ lệ, xoay sticker bằng ma trận
Phần 11: kết nối và realtime
Phần 12: bên trong Relay
87Học từ Facebook #87: Giữ nguyên tham chiếu nhánh dữ liệu không đổi88Học từ Facebook #88: Store optimistic, rollback rồi áp lại89Học từ Facebook #89: Chỉ mục subscription và hàng đợi theo chiều sâu90Học từ Facebook #90: Phân trang connection, khớp cursor, bỏ edge trùng91Học từ Facebook #91: Profiler kiểu middleware và memo có canary
Phần 13: trình phát video
Phần 14: Messenger và văn bản
96Học từ Facebook #96: Gom tin nhắn thành cụm và avatar đã xem97Học từ Facebook #97: Bao nhiêu tab chat là vừa, chuỗi luật mở tab98Học từ Facebook #98: Phím tắt Markdown, Backspace để hoàn tác99Học từ Facebook #99: Code point hay UTF-16, bốn bug cùng một gốc100Học từ Facebook #100: Typeahead không nhảy, cache tiền tố, khoá hover
Phần 15: canvas, bản đồ và các bug kinh điển
101Học từ Facebook #101: Hit-test trên canvas bằng phát lại path102Học từ Facebook #102: Vòng tròn theo mét trên bản đồ Mercator103Học từ Facebook #103: Ảnh EXIF 2×1, getter bẫy và đo thanh cuộn104Học từ Facebook #104: Bug định dạng số và kiểm tra dữ liệu theo locale105Học từ Facebook #105: Dispose cho đúng, sáu lỗi dọn dẹp kinh điển