بهبود تدریجی، این بار داخل خود جاوااسکریپت
جاوااسکریپت
فرانتاندخلاصهٔ کاملتر
رمی شارپ تو این پست تعریف میکنه که سفر با قطار و اینترنت کند، دوباره یادش انداخته سایتها روی اتصال ضعیف چقدر بد از کار میافتن. خودش هم یه ابزار کوچیک داشته که مارکداون رو میگیره و رندر میکنه؛ وقتی تو قطار فایل رو روی صفحه درگ کرده، مرورگر — کاملاً طبیعی — فکر کرده میخواد فایل رو باز کنه و از صفحه خارج شده و مارکداون خام رو نشون داده.
ریشهٔ ماجرا به گفتهٔ نویسنده اینه که کد جاوااسکریپت آخر HTML قرار داشته و اولین کارش وارد کردن ماژول markdown-it از esm.sh بوده، بعدش هم highlight.js که شاید اصلاً لازم نبوده. مجموعش حدود ۶۰۰ کیلوبایت فشرده (۱.۳ مگابایت بازشده) میشه که باید کامل دانلود و پارس بشه قبل از اینکه نوبت به کد خود نویسنده برسه.
نکتهٔ اصلی مقاله اینه که Progressive Enhancement فقط «HTML ساده که با جاوااسکریپت غنی میشه» نیست؛ داخل خود جاوااسکریپت هم جا داره. گاهی شکلش همون تست معروف cut the mustard بوده، ولی گاهی یه نگاه جانبی میخواد: میشه قصد کاربر رو وقتی صفحه هنوز آماده نیست گرفت و نگه داشت.
کاری که نویسنده کرده این بوده که بایند کردن هندلر رویداد، منطق صف و یه بازخورد بصری ساده رو از بدنهٔ اصلی جاوااسکریپت جدا کنه و همونها رو هم اینلاین بذاره و هم درست بعد از اون بخش از HTML که کاربر رو به تعامل دعوت میکنه. حالا درگ فایل روی اتصال «2G خوب» صفحه رو ترک نمیکنه: یه نشانگر Loading میآد، ماژولها تو پسزمینه میرسن و بعد از حدود ۱۰ ثانیه خروجی رندر میشه. روی GPRS هم کار میکنه، فقط نزدیک دو دقیقه طول میکشه.
نویسنده اضافه میکنه که این پروژه عمداً بکاند نداره، ولی اگه داشت میشد مارکداون رو برای رندر به سرور فرستاد — مثلاً با On-demand Builders نتلیفای — و حدس میزنه اون مسیر هم از دو دقیقه روی GPRS سریعتر درمیاومد. تأکیدش هم اینه که این روش هیچ چیز تازهای نیست؛ فقط یه یادآوریه که راحت فراموش میشه.
نکات کلیدی:
- Progressive Enhancement داخل خود جاوااسکریپت هم معنی داره، نه فقط بین HTML و JS
- وابستگیهای سنگین باید کامل دانلود و پارس بشن قبل از اینکه کد خودت اجرا بشه
- هندلر رویداد و منطق صف رو اینلاین و زودتر از بقیهٔ کد بذار
- قصد کاربر رو بگیر و تا آماده شدن ادامهٔ کد، تو صف نگه دار
- بازخورد بصری ساده جلوی خروج ناخواسته از صفحه رو میگیره
