‏Ilha؛ کتابخانهٔ UI با معماری جزیره‌ای

Ilha یه کتابخانهٔ رابط کاربری با معماری جزیره‌ای (island architecture) ه که تازه وارد فاز بتا شده. کاری که می‌کنه اینه: روی سرور HTML ساده تولید می‌کنه و روی کلاینت بدون هیچ پرش و فلیکری هیدریت می‌شه. ادعای جالبش دربارهٔ اندازه‌ست — هستهٔ کتابخونه زیر ۲۵۰۰ خط کده، اون‌قدر کوچیک که به گفتهٔ سازنده‌ها می‌شه کل کدش رو داخل یه پرامپت هوش مصنوعی چسبوند. روتینگ، فرم‌های تایپ‌دار و state مشترک هم هستن، ولی فقط وقتی لازمشون داشته باشی.

چهار ویژگی‌ای که پروژه روشون تأکید می‌کنه اینان: هستهٔ زیر ۲۵۰۰ خط، صفر وابستگی، TypeScript-first بودن و نبود ویرچوال DOM. مدل اجراش هم ساده‌ست — از یه import تنها اجرا می‌شه، بدون ترنسفورم و بدون زنجیرهٔ ابزار. کل پروژه هم متن‌بازه و بخش پولی یا سطح پنهان نداره.

نکتهٔ مهم دیگه اینه که Ilha خودش رو به یه بک‌اند خاص گره نزده. TypeScript، PHP، Ruby، Elixir، Rust یا Go — چون خروجی سمت سرور HTML خالصه، به استکی که داری می‌چسبه. این دقیقاً همون جاییه که معماری جزیره‌ای معنی پیدا می‌کنه: صفحه رو سرور می‌ده و فقط تیکه‌های تعاملی روی کلاینت جون می‌گیرن.

سینتکسش ترکیبیه: واکنش‌پذیری شبیه Svelte و قالب‌نویسی با طعم React. state، اعتبارسنجی، رویدادها و مارک‌آپ همه کنار هم توی یه جزیرهٔ کوچیک می‌مونن. تیکهٔ زیر بخش حالت و اعتبارسنجی و رویدادش رو نشون می‌ده؛ مارک‌آپ هم تو render میاد و فیلدها با bind:value به state وصل می‌شن:

const Signup = ilha
  .state("email", "")
  .derived("ready", ({ state }) => state.email().includes("@"))
  .on("[data-action=join]@click", async ({ state }) => {
    await fetch("/api/waitlist", {
      method: "POST",
      body: JSON.stringify({ email: state.email() }),
    });
  });

موتور به‌روزرسانی‌ش سیگنال‌محوره: سیگنال‌ها دقیقاً همون داده‌ای رو ردیابی می‌کنن که رابط کاربری واقعاً می‌خونه، پس به‌روزرسانی‌ها ریزدانه و قابل پیش‌بینی می‌مونن و هیچ حلقهٔ رندر مجدد سراسری‌ای تو کل اپ راه نمی‌افته. کارهای ناهمگام هم قابل لغو (abortable) ان — تو مثال جست‌وجوی سایت، مقدار derived یه تابع async ه که signal رو به fetch پاس می‌ده تا درخواست قبلی با تایپ‌کردن حرف بعدی کنسل بشه.

بخشی که بیشتر از همه Ilha رو متمایز می‌کنه، انتخاب حالت رندر به‌ازای هر جزیره‌ست، به‌جای اینکه کل اپ رو به یه استراتژی متعهد کنی. همون کامپوننت می‌تونه HTML ایستا بده برای رنگ‌آمیزی فوری صفحه، یا هیدریت‌شدنی بشه فقط جایی که تعامل لازمه:

// Static HTML — instant first paint.
const html = ProductCard.toString({ featured: true });

// Hydrate only where you need interactivity.
const island = await ProductCard.hydratable(
  { featured: true },
  { name: "ProductCard", snapshot: true },
);

برای شروع هم یه دستور npx giget با قالب Vite هست و یه سندباکس آمادهٔ StackBlitz روی قالب Nitro، که می‌شه بدون نصب چیزی امتحانش کرد. با توجه به اینکه پروژه تازه بتا شده، هنوز زوده که برای کار تولیدی روش حساب باز کنی، ولی به‌عنوان یه گزینهٔ سبک برای صفحاتی که بیشترشون ایستان و فقط چند تیکهٔ تعاملی دارن، ایده‌ش تمیزه.

نکات کلیدی:

• Ilha روی سرور HTML خالص می‌ده و روی کلاینت بدون فلیکر هیدریت می‌کنه
• هستهٔ زیر ۲۵۰۰ خط، صفر وابستگی، TypeScript-first و بدون ویرچوال DOM
• چون خروجی سرور HTML ساده‌ست، با هر بک‌اندی از PHP و Ruby تا Go کار می‌کنه
• واکنش‌پذیری سیگنال‌محور با به‌روزرسانی ریزدانه و کار ناهمگام قابل لغو
• برای هر جزیره جداگانه می‌شه بین HTML ایستا، هیدریت سروری و فقط-کلاینت انتخاب کرد
• پروژه متن‌بازه و تازه به بتا رسیده