‏چی به سر فرانت‌اند اومد؟ سفری از FTP تا هوش مصنوعی

نویسنده می‌گه اگه سال ۲۰۰۸ یه فایل index.html رو با FTP آپلود می‌کردی، سایتت بدون هیچ «بیلد»ی کار می‌کرد. ولی حالا یه آموزش مقدماتی با شونزده ابزار ناآشنا شروع می‌شه. به گفتهٔ نویسنده تز کل ماجرا اینه: هیچ‌کدوم از این پیچیدگی‌ها الکی نیست — هر ابزار مثل بافت زخمیه که روی یه جراحت واقعی رشد کرده؛ یکی به مشکلی خورده، براش راه‌حل ساخته و اون راه‌حل مشکل بعدی رو درست کرده.

نویسنده می‌گه اولین زخم ساده بود: می‌خواستی بخشی از صفحه بدون ریلود کامل عوض بشه، و jQuery با AJAX این کارو راحت کرد. ولی زخم عمیق‌تر وقتی باز شد که داده‌ت هم تو متغیرهای جاوااسکریپت بود هم رو صفحه، و خودت باید دستی این دو تا رو هماهنگ نگه می‌داشتی. راه‌حل، ایدهٔ بزرگ رابط اعلانی (declarative UI) بود: به جای نوشتن مرحله‌های به‌روزرسانی، توصیف می‌کنی صفحه برای هر داده‌ای باید چه شکلی باشه و فریم‌ورک بقیه‌شو خودش انجام می‌ده. React سال ۲۰۱۳ با کامپوننت‌ها و JSX و Virtual DOM این دوره رو برد.

نویسنده با یه نمونهٔ ساده نشون می‌ده که دکمه دیگه فقط مارک‌آپ نیست، بلکه جاوااسکریپتیه که ادای مارک‌آپ رو درمیاره:

function Buy() {
  return (
    <button onClick={addToCart}>
      Buy
    </button>
  )
}

حالا این دکمه state و props داره و بدون یه رانتایم فریم‌ورک تو مرورگر اصلاً وجود نداره.

نویسنده می‌گه لایه‌ای که بیشتر از همه ازش بدت میاد مرحلهٔ بیلده، ولی دلیلش واقعیه: جاوااسکریپت سال‌ها راه درستی برای تقسیم کد بین فایل‌ها نداشت، و تو می‌خواستی سینتکس مدرن و JSX بنویسی که مرورگرهای قدیمی نمی‌فهمیدن. برای همین Babel کد رو ترجمه می‌کنه و باندلرهایی مثل webpack کلی فایل کوچیک رو به هم می‌دوزن، مینیفای و tree-shake می‌کنن. هزینه‌ش هم node_modules ـه که یه پروژهٔ خالی راحت ربع میلیون فایل میاره.

بعدش به گفتهٔ نویسنده مسابقهٔ سرعت شروع شد: ابزارها رو با زبون‌های سریع مثل Go و Rust بازنویسی کردن — esbuild و SWC و بعد Vite که الان انتخاب پیش‌فرض خیلی‌هاست. زخم بعدی این بود که اپ تماماً-جاوااسکریپتی یه صفحهٔ سفید خالی نشون می‌داد و گوگل هم چیزی نمی‌دید، برای همین رندر HTML برگشت رو سرور — دقیقاً همون کاری که سال ۲۰۰۸ می‌کردی. اینجا SSR و SSG و متافریم‌ورک‌هایی مثل Next.js و Astro اومدن.

ولی به گفتهٔ نویسنده فرستادن HTML سرور به فریم‌ورکی که برای مرورگر ساخته شده، زخم امضای دوران مدرن رو ساخت: هیدریشن. سرور HTML آماده می‌فرسته و صفحه فوری نقاشی می‌شه، ولی «مرده‌ست» — هیچ دکمه‌ای کار نمی‌کنه تا مرورگر همون اپ رو دوباره دانلود و اجرا کنه تا «بیدارش» کنه. نویسنده اینو تشبیه می‌کنه به دو بار پول‌دادن برای یه غذا. هر چیز مد روزی بعد از این، نقشه‌ایه برای هیدریشن کمتر: Islands، Resumability و React Server Components.

نویسنده جمع‌بندی می‌کنه که بعد از دو دهه گودبرداری تو ابزارها، صنعت یه دور کامل زده و برگشته سر جای اول: مرز ۲۰۲۶ اینه که HTML رو رو سرور رندر کنی، تقریباً هیچ جاوااسکریپتی نفرستی و به جای جنگیدن با پلتفرم وب، ازش استفاده کنی — چیزی که خیلی شبیه همون فایل FTP قدیمیه. حرف آخرش اینه که لازم نیست کل این «کلیسا» رو از نو یاد بگیری، فقط باید بفهمی کدوم ۲۰ درصدش باربره.

نکات کلیدی:

• تز مقاله اینه که هر ابزار فرانت‌اند جواب یه مشکل واقعیه، نه پیچیدگی الکی
• ایدهٔ کلیدی فریم‌ورک‌ها، رابط اعلانیه: داده رو عوض می‌کنی، صفحه خودش دنبالش میاد
• مرحلهٔ بیلد (Babel و باندلرها) برای ترجمهٔ سینتکس مدرن و کنار هم چیدن فایل‌ها لازم شد
• هیدریشن یعنی مرورگر همون اپ رو دوباره اجرا می‌کنه تا HTML سرور تعاملی بشه
• مرز ۲۰۲۶ برگشته سمت رندر رو سرور و جاوااسکریپت کمتر، خیلی شبیه روزهای FTP