مقدمه‌ای بر Svelte

Svelte یک فریمورک مدرن برای ساخت رابط کاربری وب است که با رویکرد متفاوتی نسبت به دیگر کتابخانه‌ها مانند React یا Vue عمل می‌کند. به جای اجرای کد در مرورگر، Svelte در زمان ساخت (build time) کد را به JavaScript خالص تبدیل می‌کند، که منجر به بارگذاری سریع‌تر و کارایی بالاتر می‌شود.

چرا Svelte انتخاب خوبی برای پروژه‌های وب است؟

بدون نیاز به runtime بزرگ – کد نهایی فقط شامل JavaScript خالص است.
قابلیت واکنش‌پذیری (reactivity) به‌صورت بومی، بدون نوشتن توابع یا هوک‌های پیچیده.
اندازهٔ بستهٔ نهایی کمتر، که سرعت بارگذاری صفحات را بهبود می‌بخشد.
سینتاکس ساده و خوانا که یادگیری آن برای توسعه‌دهندگان تازه‌کار راحت است.

ویژگی‌های کلیدی Svelte

واکنش‌پذیری خودکار: با تغییر مقادیر متغیرها، UI به‌صورت خودکار به‌روز می‌شود.
کامپایل در زمان ساخت: تمام بهینه‌سازی‌ها در مرحلهٔ build انجام می‌شود.
حلقه‌ها و شرط‌ها در قالب HTML: می‌توانید از {#if}، {#each} و سایر دستورات قالب‌گذاری استفاده کنید.
استایل‌های محلی: استایل‌ها به‌صورت scoped بر روی کامپوننت اعمال می‌شوند.

مقایسهٔ Svelte با فریمورک‌های دیگر

ویژگی	Svelte	React	Vue
اندازهٔ بستهٔ نهایی	کمترین	متوسط	متوسط
نیاز به runtime	خیر	بله	بله
شیوهٔ واکنش‌پذیری	در زمان کامپایل	Virtual DOM	Virtual DOM
یادگیری	آسان	متوسط	متوسط

شروع سریع با Svelte

برای ایجاد یک پروژهٔ جدید می‌توانید از قالب رسمی create-svelte استفاده کنید:

npm init svelte@next my-svelte-app
cd my-svelte-app
npm install
npm run dev

پس از اجرای این دستورات، مرورگر شما به آدرس http://localhost:5173 هدایت می‌شود و می‌توانید به‌سرعت اولین کامپوننت Svelte خود را مشاهده کنید.

نمونهٔ یک کامپوننت ساده

<script>
    let count = 0;
    function increment() {
        count += 1;
    }
</script>

<button on:click={increment}>
    شمارش: {count}
</button>

در این مثال، تنها با تعریف یک متغیر و یک تابع، می‌توانید یک دکمهٔ واکنش‌پذیر بسازید. هر بار که کاربر روی دکمه کلیک می‌کند، مقدار count افزایش یافته و UI به‌طور خودکار به‌روز می‌شود.

نتیجه‌گیری

Svelte به‌دلیل معماری منحصربه‌فرد خود که در زمان ساخت کد را به JavaScript بهینه تبدیل می‌کند، گزینهٔ جذابی برای توسعه‌دهندگان وب محسوب می‌شود. اگر به دنبال کاهش حجم بسته، بهبود سرعت بارگذاری و نوشتن کدی ساده و خوانا هستید، حتماً Svelte را در پروژه‌های آینده‌تان امتحان کنید.