‏Warper: کتابخانه ویرچوالایزیشن ری‌اکت با Rust و WebAssembly

Warper یه کتابخانه ویرچوالایزیشن (virtualization) برای ری‌اکته. ویرچوالایزیشن یعنی به‌جای اینکه همه آیتم‌های یه لیست بزرگ رو همزمان توی DOM بذاری، فقط همون‌هایی رو رندر می‌کنی که کاربر داره می‌بینه — این تکنیک وقتی با هزاران یا میلیون‌ها ردیف سروکار داری، فرقش رو حس می‌کنی. چیزی که Warper رو از رقباش مثل react-window یا @tanstack/virtual جدا می‌کنه اینه که هسته اصلی محاسباتش با Rust نوشته شده و از طریق WebAssembly توی مرورگر اجرا می‌شه.

Warper ادعا می‌کنه می‌تونه بیش از ده میلیون آیتم رو با سرعت ۱۲۰+ فریم بر ثانیه مدیریت کنه. برای آیتم‌هایی با ارتفاع ثابت، محاسبات موقعیت‌ها با پیچیدگی O(1) انجام می‌شه — یعنی صرف‌نظر از تعداد آیتم‌ها، سرعت ثابته. برای ارتفاع‌های متغیر هم از Fenwick tree استفاده می‌کنه که پیچیدگی‌اش O(log n) هست.

از نظر بهینه‌سازی‌های فنی، Warper چند تکنیک جالب داره: انتقال داده مستقیم از WASM به جاوااسکریپت بدون کپی اضافه (Zero-Copy)، شتاب‌دهی GPU با CSS transform3d و contain: strict، و یه سیستم overscan هوشمند که بر اساس سرعت اسکرول کاربر، آیتم‌های بیشتری رو از قبل آماده می‌کنه. همچنین فقط وقتی بازه آیتم‌های قابل‌مشاهده عوض بشه، رندر مجدد اتفاق می‌افته.

دو روش برای استفاده وجود داره: یکی هوک useVirtualizer برای کنترل بیشتر، و یکی کامپوننت آماده WarperComponent که سریع‌تر راه‌اندازی می‌شه. مثال زیر نشون می‌ده چطور با هوک می‌شه یه لیست یه میلیون آیتمی ساخت:

const { scrollElementRef, range, totalHeight } = useVirtualizer({
  itemCount: 1_000_000,
  estimateSize: () => 50,
  overscan: 5,
});

در مقایسه با رقبا، Warper تنها کتابخانه‌ای‌ست که هسته WASM داره و Zero-Copy arrays رو پشتیبانی می‌کنه. حجم نهایی بسته حدود ۸.۷ کیلوبایت gzipped هست که در مقایسه با react-virtuoso که ~۲۵ کیلوبایته، خیلی سبک‌تره. پشتیبانی از مرورگرها هم خوبه: Chrome، Firefox، Safari و Edge از نسخه‌های ۸۹ به بعد (برای Safari از ۱۵+).

نکات کلیدی:

• هسته محاسباتی با Rust نوشته شده و از طریق WebAssembly اجرا می‌شه
• پشتیبانی از بیش از ۱۰ میلیون آیتم با ۱۲۰+ FPS
• O(1) برای ارتفاع ثابت، O(log n) برای ارتفاع متغیر با Fenwick tree
• دو API در اختیار داره: هوک useVirtualizer و کامپوننت WarperComponent
• حجم ~۸.۷KB gzipped، پشتیبانی کامل از TypeScript
• Zero-Copy انتقال داده از WASM به JS و GPU acceleration با CSS transform3d