‏Qite.js: فریم‌ورک فرانت‌اند بدون بیلد استپ

Qite.js یه فریم‌ورک فرانت‌اند با رویکرد DOM-first هست که هدفش سادگی واقعیه، نه سادگی ظاهری. ایده اصلیش اینه که مرورگر اصلاً بد نیست — ما خودمون بودیم که با Virtual DOM، هیدریشن، باندلر و پایپ‌لاین‌های کامپایل یه لایه پیچیده روش کشیدیم. Qite برعکس این مسیر می‌ره: HTML همون HTML می‌مونه، JavaScript همون JavaScript، و هیچ‌کدوم با هم قاطی نمی‌شن.

برای شروع کار با Qite فقط کافیه دو فایل اسکریپت رو در صفحه بارگذاری کنی. نه npm install، نه webpack، نه Vite — می‌شه Qite رو به عنوان git submodule اضافه کرد یا مستقیم کپی‌اش کرد توی پروژه.

یکی از قابلیت‌های جالبش declarative states یا وضعیت‌های اعلانیه. به‌جای اینکه پر از if و toggle دستی باشه، یه‌بار قوانین نمایش رو تعریف می‌کنی و Qite هر وقت چیزی تغییر کرد اون‌ها رو دوباره ارزیابی می‌کنه. مثلاً می‌گی «اگه status برابر loading بود، #spinner نشون بده» و دیگه کاری نداری.

مدل رویداد (event) در Qite هم یکپارچه‌ست — هم رویدادهای native مرورگر و هم سیگنال‌های کامپوننت‌ها با یه API مشترک مدیریت می‌شن. کامپوننت‌های فرزند رویداد منتشر می‌کنن و کامپوننت‌های والد تصمیم می‌گیرن چی انجام بشه. این یعنی یه ButtonComponent فقط «دکمه بودن» رو بلده و والدشه که بهش معنی می‌ده.

this.events.add([
    ["submit", ">checkout_form", () => this.processCheckout()],
    ["@click", "#retry",        () => this.retry()]
]);

وضعیت کامپوننت‌ها هم به دو نوع تقسیم می‌شه: fields برای مقادیر ساختاریافته مثل status یا price که مستقیم به DOM متصل می‌شن، و flags برای حالت‌های on/off مثل loading یا locked که بیشتر برای کنترل رفتار UI ازشون استفاده می‌شه. وقتی هر کدوم تغییر کنن، DOM و موتور state به‌صورت خودکار آپدیت می‌شن.

Qite با SSR هم خوب کنار میاد — سرور HTML رو رندر می‌کنه و Qite روی کلاینت رفتار رو بهش اضافه می‌کنه. می‌شه بیشتر صفحات رو SSR نگه داشت و فقط بخش‌های خاصی رو مثل یه SPA کوچیک رفتار داد.

نکات کلیدی:

• بدون build step، بدون Virtual DOM، بدون npm
• مستقیم روی DOM واقعی کار می‌کنه، نه یه سایه ذهنی از اون
• سازگار با SSR و قابل ترکیب با صفحات HTML معمولی
• سیستم state اعلانی با fields و flags داخلی
• مدل رویداد یکپارچه برای رویدادهای مرورگر و کامپوننت‌ها
• معماری سلسله‌مراتبی: فرزند رویداد منتشر می‌کنه، والد تصمیم می‌گیره