‏Yawn: واکنش‌گرایی فرانت‌اند فقط با Async Iterable

نویسنده‌ی این مقاله، که ده ساله با فریم‌ورک‌های فرانت‌اند کار می‌کنه، می‌گه یه شب فهمیده جاوااسکریپت از ۲۰۱۸ یه ابزار واکنش‌گرایی (یعنی سازوکاری که وقتی state عوض می‌شه رابط کاربری خبردار بشه) داره: Async Iterable، یعنی چیزی که می‌شه با for await مقدارهاشو یکی‌یکی و به‌صورت ناهمگام گرفت. ایده‌ش اینه که اولین مقدار، state اولیه‌ست و هر مقدار بعدی یه به‌روزرسانی. پس یه state فقط‌خوندنی چیزی بیشتر از یه AsyncIterable نیست.

مثلاً تو مقاله یه async generator به اسم fetchTodo هست که اول وضعیت pending رو yield می‌کنه، بعد از fetch یا success با داده‌ی todo می‌ده یا failure با خطا. همین خروجی یه state معتبره. ترکیب stateها هم با yield کردن از یه iterable دیگه انجام می‌شه:

async function* fetchPageTodo(todoIds: AsyncIterable<TodoId>) {
  for await (const todoId of todoIds) {
    yield* fetchTodo(todoId)
  }
}

به گفته‌ی نویسنده، هر کتابخونه‌ی رندر سمت کلاینت مجبور بوده سیستم واکنش‌گرایی خودشو بسازه: React با useState، Vue با ref، Angular اول با RxJS و حالا Signals، Svelte از store به runes. نتیجه‌ش همون JavaScript Fatigue شده، یعنی هر چند سال باید API تازه یاد گرفت. نویسنده تأکید می‌کنه این‌ها نقد هستن نه حمله، چون همین فریم‌ورک‌ها باعث شدن قابلیت‌های جدید به خود وب اضافه بشه. پیشنهاد Signal تو TC39 هم هنوز به اجماع نرسیده.

جواب نویسنده، کتابخونه‌ی آزمایشی Yawn هست که API خودشو روی استانداردهای وب بنا کرده. JSX واقعاً عنصر HTML برمی‌گردونه، event listenerها حروف کوچیک دارن مثل HTML، به‌جای className و htmlFor همون class و for نوشته می‌شه، و به‌جای useEffect دو تابع onConnected و onDisconnected هست. برای state قابل‌نوشتن هم یه کلاس State با دو متد set و update داره:

const count = new State(0)
const increment = () => count.update((count) => count + 1);
const reset = () => count.set(0);

نویسنده مزیت‌ها رو این‌طور می‌شمره: چیز جدیدی برای یاد گرفتن نیست، helperهای آینده‌ی iterator مثل map و filter رایگان به دست میان، ارزیابی تنبل (lazy) باعث واکنش‌گرایی ریز و pull-based می‌شه، و چیزهایی مثل WebSocket و ReadableStream مستقیم می‌تونن state رو تغذیه کنن. کل JSX runtime حدود ۱.۵ کیلوبایت gzip هست.

خودش عیب‌ها رو هم می‌گه: رندر کردن آرایه و نشت حافظه هنوز بررسی نشده، Async Iterator تکنولوژی سختیه و دام‌های زیادی داره، و برخلاف Signals ردیابی خودکار وابستگی‌ها وجود نداره. پروژه فعلاً در حد اثبات ایده‌ست و نویسنده گفته اگه مخزن به ۵۰۰۰ ستاره برسه، آماده‌ی production کردنشو شروع می‌کنه.

نکات کلیدی:

• Async Iterable از سال ۲۰۱۸ تو جاوااسکریپت هست و Yawn ازش به‌عنوان سیستم state استفاده می‌کنه.
• کلاس State تو Yawn فقط دو متد set و update اضافه می‌کنه.
• JSX runtime پروژه حدود ۱.۵ کیلوبایت gzip حجم داره.
• برخلاف Signals، ردیابی خودکار وابستگی‌ها نداره و رندر آرایه هنوز حل نشده.
• پروژه آزمایشیه و آماده شدنش برای production به رسیدن به ۵۰۰۰ ستاره گره خورده.