Motion Spectre
Animation chạy ngoài luồng render của React: bộ điều phối đẩy chúng qua WAAPI và requestAnimationFrame, chỉ đụng vào các thuộc tính được composite nên animation đang chạy không kéo theo layout. Mình làm chủ yếu để hiểu chi phí trong các thư viện animation hiện có đến từ đâu.
TypeScriptReactWAAPIFramer Motion
tsRouter
Route params, search params và navigation đều lấy kiểu từ một định nghĩa route duy nhất bằng template literal types, nên kiểu không thể lệch khỏi route. Thứ thật sự chạy ở runtime chỉ là một matcher nhỏ, phần còn lại bị xóa lúc build.
TypeScriptReactViteESBuild
CanvasFlow
Node được render bằng WebGL qua một vòng lặp render tự viết, còn text và input vẫn là DOM overlay đặt theo cùng một transform. Zoom và pan chạy trên GPU nên canvas vẫn mượt khi số lượng node tăng lên.
TypeScriptWebGLReactZustand