‏کانواس به‌جای HTML برای وب‌اپ‌های سنگین

نویسنده که خودش روی رابط زمان‌بندی Hivekit کار کرده، تو این مقاله می‌گه چیزی که تو گوگل داکس می‌بینی یه سند HTML نیست؛ یه Canvas ـه. همین‌طور شیت گوگل‌شیتس و نسخهٔ وب اکسل، بوم Canva و برد Miro. خود Canvas بیشتر از بیست ساله وجود داره و چیزی نیست جز یه فضای خالی توی صفحه که با یه API جاوااسکریپتی روش نقاشی می‌کنی — از متدهای سطح‌بالا مثل fillRect() تا دسترسی مستقیم به پیکسل‌ها با getImageData().

چیزی که آخرش می‌مونه عملاً یه تصویر ثابته: نه درخت المان و DOMی در کاره، نه هندلر کلیک و بابلینگ رویداد، نه ری‌فلو خودکار. پس چرا؟ نویسنده چهار دلیل می‌آره: سرعت، چون پارس HTML و ساخت DOM و اعمال CSS کار سنگینیه و یه API ساده بار کمتری رو دوش مرورگر می‌ذاره؛ کنترل، چون تو فضای بی‌نهایت یا جدولی با هزاران ردیف بالاخره خودت باید رندر رو دست بگیری؛ یکدستی خروجی روی همهٔ دستگاه‌ها؛ و قابل‌حمل بودن، چون Flutter Web و بعضی پیاده‌سازی‌های WebAssembly بافر تصویرشون رو روی Canvas می‌ریزن.

در مقابل، نویسنده تأکید می‌کنه دلایل استفاده‌نکردن خیلی بیشتره و برای اکثر وب‌اپ‌ها همون DOM انتخاب بهتریه. یه فیلد متنی سادهٔ HTML رندر تمیز تو هر رزولوشنی، تب و فوکوس و انتخاب متن، ناوبری با کلیدهای جهت، پشتیبانی از متن راست‌به‌چپ و کاراکترهای ترکیبی آسیایی و دسترس‌پذیری برای اسکرین‌ریدرها رو مجانی بهت می‌ده. با Canvas همهٔ این‌ها می‌افته گردن خودت.

به نظر نویسنده Canvas وقتی انتخاب بهتریه که اپ از جریان معمول چیدمان HTML بیرون زده باشه: کلی المان با موقعیت مطلق، شکل‌های نامنظم، ترتیب رندر پیچیده، یا زوم و پن و تایلینگ و مجازی‌سازی. الگویی هم که براشون جواب داده یه رندرر مرکزیه که کلاس‌های تخصصی مثل backgroundRenderer و rowRenderer رو صدا می‌زنه و هر کدوم می‌تونن یه پاس رندر برای فریم بعدی زمان‌بندی کنن:

scheduleRender(){
    if(this.renderScheduled) return;
    this.renderScheduled = true;
    requestAnimationFrame(this.render.bind(this));
}

از بقیهٔ نکات عملی‌شون: پاک کردن و کشیدن دوبارهٔ کل بوم تو هر فریم هیچ‌وقت براشون دردسر نشده؛ افکت‌های هاور و هایلایت روی یه Canvas دوم و هم‌اندازه سبک‌تر درمی‌آد؛ استایل‌ها مثل CSS تو یه فایل جدا بمونن؛ بوم به نسبت پیکسل دستگاه اسکیل بشه تا خروجی تیز بمونه؛ و برای تشخیص کلیک و هاور یه ایندکس از باندینگ‌باکس‌ها ساخته بشه. جمع‌بندی نویسنده هم اینه که Canvas رو چون سریع به‌نظر می‌رسه انتخاب نکن — وقتی سراغش برو که رابطت دیگه مثل یه سند رفتار نمی‌کنه و شبیه یه صحنه شده.

نکات کلیدی:

• سطح اصلی گوگل داکس، گوگل‌شیتس، نسخهٔ وب اکسل، Canva و Miro روی Canvas ساخته شده، نه DOM
• مزیت‌ها: سرعت بیشتر، کنترل کامل رندر، خروجی یکسان بین دستگاه‌ها و قابل‌حمل بودن
• هزینه‌ش اینه که دسترس‌پذیری، انتخاب متن، فوکوس و مدیریت ورودی رو خودت باید بسازی
• الگوی پیشنهادی: یه رندرر مرکزی که یه پاس رندر برای فریم بعدی زمان‌بندی می‌کنه
• یه Canvas دوم برای هاور و هایلایت، و ایندکس باندینگ‌باکس برای تشخیص برخورد