‏Kiru: فریم‌ورک رندرینگ سبک‌وزن برای وب مدرن

Kiru یه کتابخونه رندرینگ برای وبه که شعارش «کمتر انجام بده»‌ست — به این معنی که کامپوننت‌ها فقط اون بخش‌هایی از UI رو آپدیت می‌کنن که واقعاً تغییر کردن، نه اینکه کل درخت کامپوننت رو دوباره رندر کنن. این رویکرد رو «reactivity where it matters» می‌نامه.

Signal (سیگنال) مفهوم مرکزی Kiru برای مدیریت state‌ست. یه signal یه مقدار واکنش‌پذیره که وقتی تغییر می‌کنه، فقط اون قطعه‌ای از UI که بهش وابسته‌ست به‌روز می‌شه — نه کل کامپوننت. به همین دلیله که در مثال زیر حتی با تغییر لیست todos، تابع App دیگه اجرا نمی‌شه:

function App() {
  const todos = signal<Todo[]>([]),
    inputText = signal("")

  console.log("Hello from Kiru! This component never rerenders 😉")

  return () => (
    <>
      <form onsubmit={handleSubmit}>
        <input bind:value={inputText} />
        <button type="submit">Add</button>
      </form>
      <ul>
        <For each={todos} fallback={<i>No todos</i>}>
          {(item) => <TodoItem todo={item} />}
        </For>
      </ul>
    </>
  )
}

یکی از ادعاهای اصلی Kiru اینه که واقعاً یه «فریم‌ورک» کامله، نه فقط یه کتابخونه UI. routing، مدیریت state، state غیرهمزمان (async state) و انیمیشن همه داخل خود Kiru هستن و نیازی به نصب بسته‌های جداگانه نیست.

این تفاوت وقتی package.json یه اپ React رو با یه اپ Kiru مقایسه می‌کنیم خیلی واضح می‌شه. پروژه React به react، react-dom، react-router-dom و چند @types جداگانه نیاز داره؛ اما پروژه Kiru فقط یه دیپندنسی داره: "kiru": "1.5.0".

Kiru از نظر ظاهر syntax به JSX/TSX نزدیکه و با TypeScript کار می‌کنه، پس برای کسایی که با React آشنان یادگیریش روانه. در کل، Kiru برای تیم‌ها و توسعه‌دهنده‌هایی جذابه که می‌خوان وابستگی‌هاشون رو به حداقل برسونن و از overhead رندرهای غیرضروری خلاص بشن.

نکات کلیدی:

• مدیریت state با signal: فقط بخش‌های تغییرکرده DOM آپدیت می‌شن، نه کل کامپوننت
• routing، انیمیشن و async state همه داخل خود Kiru هستن
• برخلاف React، کل پروژه به تنها یه دیپندنسی نیاز داره
• syntax مشابه JSX/TSX با پشتیبانی از TypeScript
• مناسب برای کسایی که دنبال فریم‌ورکی سبک و self-contained هستن