‏nanotags: مهاجرت از ری‌اکت به Web Components بومی

یه سایت مارکتینگ با Astro، ری‌اکت، و کتابخانه Ark UI ساخته شده بود. ددلاین سخت بود، تیم ری‌اکت بلد بود، و Ark UI هم کامپوننت‌های accessible آماده داشت. انتخاب طبیعی بود. اما بعد از لانچ، یه سوال مهم مطرح شد: چرا برای یه سایت که بیشتر محتوای ثابت داره و فقط چند تا منو و دیالوگ ساده داره، باید یه فریمورک کامل SPA رو شیپ کرد؟

مشکل اینه که ری‌اکت برای اپ‌های پیچیده با state زیاد طراحی شده، نه سایت‌های مارکتینگ. Virtual DOM، component model، و runtime سنگین ری‌اکت باید دانلود، پارس، و اجرا بشن حتی وقتی فقط یه accordion یا یه theme toggle داری. Astro خودش به‌خوبی این مشکل رو می‌شناسه و پیش‌فرضش اینه که هیچ جاوااسکریپتی شیپ نکنه، اما به‌محض اینکه نیاز به تعامل داری، وسوسه‌ی برگشت به ری‌اکت قوی‌ه.

راه‌حل‌های سبک‌تر مثل Svelte و SolidJS هم بررسی شدن، اما سوال اصلی‌تر اینه که اصلاً چرا باید فریمورک دیگه‌ای اضافه کرد؟ Custom Elements (بخشی از استاندارد Web Components) یه مدل کامپوننت داخل خود مرورگر هستن که از سال ۲۰۱۸ در همه مرورگرهای مدرن پشتیبانی می‌شن. این API نسخه‌ی ماژور نمی‌ده، connectedCallback رو deprecate نمی‌کنه، و نیازی به runtime جداگانه نداره. Astro صفحات رو موقع build به HTML تبدیل می‌کنه، و Web Components همون HTML رو روی client بدون هیچ واسطه‌ای hydrate می‌کنن.

البته نوشتن Web Components خام واقعاً دردناکه. مدیریت event listenerها در connectedCallback و disconnectedCallback، خوندن و نوشتن attribute، و sync کردن state با DOM همه باید دستی انجام بشن. این چالش‌ها منجر به ساخت کتابخانه‌ی کوچیک nanotags شد که این boilerplate رو پاک می‌کنه و نوشتن Web Components رو با تجربه‌ای نزدیک به فریمورک‌های مدرن ممکن می‌کنه:

class MyCounter extends HTMLElement {
  static observedAttributes = ["count"]

  connectedCallback() {
    this.display = this.querySelector("span")
    this.button = this.querySelector("button")
    this.button.addEventListener("click", this.#handleClick)
  }

  disconnectedCallback() {
    this.button.removeEventListener("click", this.#handleClick)
  }
}

نتیجه‌ی نهایی مهاجرت: حذف ۱۰۰ کیلوبایت جاوااسکریپت، بهبود دسترس‌پذیری (a11y)، و حفظ کامل قابلیت‌ها. این تجربه نشون می‌ده که برای سایت‌های مارکتینگ و محتوای ثابت، پلتفرم بومی مرورگر اغلب بهترین انتخابه — نه به‌خاطر اینکه فریمورک‌ها بد هستن، بلکه چون ابزار باید با مسئله مطابقت داشته باشه.

نکات کلیدی:

• سایت مارکتینگ با Astro + ری‌اکت ساخته شده بود و بعد از لانچ مهاجرت انجام شد
• با حذف ری‌اکت و جایگزینی با Web Components بومی، ۱۰۰ کیلوبایت جاوااسکریپت کم شد
• Custom Elements از ۲۰۱۸ در همه مرورگرهای مدرن پشتیبانی می‌شن و API پایداری دارن
• نوشتن Web Components خام boilerplate زیادی داره که کتابخانه nanotags اون رو ساده می‌کنه
• ترکیب Astro (رندر استاتیک) + Web Components (hydration سبک) برای سایت‌های محتوامحور ایده‌آله