آشنایی با Svelte: فریمورکی که ناپدید می‌شود!

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

Svelte دقیقا با همین ایده ساخته شده است. برخلاف بسیاری از فریمورک‌های محبوب، Svelte بخش زیادی از کارها را در زمان کامپایل انجام می‌دهد، نه در زمان اجرای برنامه. نتیجه این رویکرد، کد کمتر، حجم نهایی پایین‌تر و عملکردی سریع‌تر است.

همین تفاوت باعث شده Svelte را با عنوان «فریمورکی که ناپدید می‌شود» بشناسند: فریمورکی که به‌جای اجرای یک Runtime سنگین در مرورگر، کد شما را به جاوااسکریپت بهینه تبدیل می‌کند و سپس خودش تا حد زیادی از فرآیند اجرا کنار می‌رود.

در این مطلب با Svelte، فلسفه طراحی آن، مهم‌ترین قابلیت‌ها و تفاوتش با فریم‌ورک‌هایی مانند React و Vue آشنا می‌شویم تا ببینیم چرا این فریمورک در سال‌های اخیر توجه بسیاری از توسعه‌دهندگان را به خود جلب کرده است.

Svelte چیست؟

Svelte یک فریمورک متن‌باز جاوااسکریپت برای ساخت رابط‌های کاربری است که توسط Rich Harris در سال ۲۰۱۶ معرفی شد. هدف اصلی آن، ساده‌تر کردن توسعه رابط کاربری و در عین حال افزایش عملکرد برنامه‌های وب است.

از دید توسعه‌دهنده، کار با Svelte ساده و روان است. هر کامپوننت معمولا در یک فایل با پسوند .svelte نوشته می‌شود که شامل HTML، سی‌اس‌اس و JavaScript است. این ساختار باعث می‌شود منطق، ظاهر و رفتار یک کامپوننت در یک محل متمرکز باشد و توسعه و نگهداری آن آسان‌تر شود.

امروزه Svelte تنها یک فریمورک برای ساخت رابط کاربری نیست. با معرفی SvelteKit، این اکوسیستم به بستری کامل برای توسعه اپلیکیشن‌های مدرن وب تبدیل شده و از قابلیت‌هایی مانند مسیردهی، رندر سمت سرور (SSR)، تولید سایت‌های استاتیک (SSG) و ساخت API نیز پشتیبانی می‌کند.

چرا می‌گویند Svelte «ناپدید می‌شود»؟

عبارت «فریمورکی که ناپدید می‌شود» شاید در نگاه اول اغراق‌آمیز به نظر برسد، اما دقیقا به مهم‌ترین ویژگی Svelte اشاره دارد.

در فریمورک‌هایی مانند ری‌اکت بخشی از خود فریمورک به همراه برنامه در مرورگر اجرا می‌شود. این Runtime مسئول مدیریت وضعیت، به‌روزرسانی رابط کاربری و هماهنگ کردن تغییرات است. به همین دلیل، مرورگر علاوه بر اجرای کد برنامه، باید بخشی از کد فریمورک را نیز اجرا کند. اما Svelte رویکرد متفاوتی دارد. هنگام Build، کامپایلر Svelte کدهای نوشته‌شده توسط توسعه‌دهنده را تحلیل می‌کند و آن‌ها را مستقیما به جاوااسکریپت بهینه تبدیل می‌کند. در نتیجه، هنگام اجرای برنامه دیگر نیازی به Runtime سنگین برای مدیریت رابط کاربری وجود ندارد.

این رویکرد چند مزیت مهم به همراه دارد. از آنجا که کد اضافی کمتری به مرورگر ارسال می‌شود، حجم فایل نهایی (Bundle Size) کاهش پیدا می‌کند، زمان بارگذاری اولیه کمتر می‌شود و به‌روزرسانی رابط کاربری نیز با سربار کمتری انجام می‌شود.

به همین دلیل گفته می‌شود Svelte پس از کامپایل «ناپدید می‌شود». البته این به معنای حذف کامل فریمورک نیست، بلکه بخش عمده مسئولیت آن پیش از اجرای برنامه انجام شده و در زمان اجرا تنها کد بهینه‌ای باقی می‌ماند که مستقیما با DOM تعامل دارد. این تفاوت، یکی از مهم‌ترین دلایل عملکرد بالای Svelte در مقایسه با بسیاری از فریمورک‌های مبتنی بر Runtime است.

مهم‌ترین ویژگی‌های Svelte

Svelte با هدف ساده‌تر کردن توسعه رابط کاربری طراحی شده است و مجموعه‌ای از ویژگی‌ها را ارائه می‌دهد که آن را از بسیاری از فریمورک‌های دیگر متمایز می‌کند.

• کامپایلری بودن: به‌جای اجرای یک Runtime در مرورگر، کدها در زمان Build به جاوااسکریپت بهینه تبدیل می‌شوند.

• عملکرد بالا: به‌دلیل حذف سربار Runtime و به‌روزرسانی مستقیم DOM، برنامه‌های Svelte معمولا عملکرد بسیار خوبی دارند.

• عدم استفاده از Virtual DOM: برخلاف دیگر فریمورک‌ها، Svelte مستقیما بخش‌های موردنیاز DOM را به‌روزرسانی می‌کند و نیازی به Virtual DOM ندارد.

• Reactivity داخلی: تنها با تغییر مقدار یک متغیر، رابط کاربری به‌صورت خودکار به‌روزرسانی می‌شود و معمولا نیازی به Hookها یا APIهای پیچیده نیست.

• سینتکس ساده و خوانا: ساختار فایل‌های .svelte بسیار شبیه HTML، سی‌اس‌اس و جاوا اسکریپت استاندارد است و یادگیری آن را آسان‌تر می‌کند.

• Bundle Size کوچک: به‌دلیل حذف بخش بزرگی از کد Runtime، حجم فایل نهایی کمتر از بسیاری از فریمورک‌های مشابه است.

• پشتیبانی از TypeScript: فریمورک Svelte به‌صورت رسمی از تایپ اسکریپت پشتیبانی می‌کند و می‌توان پروژه‌ها را با تایپ ایمن توسعه داد.

مجموعه این ویژگی‌ها باعث شده است Svelte به گزینه‌ای جذاب برای توسعه‌دهندگانی تبدیل شود که به دنبال سادگی، عملکرد بالا و تجربه توسعه روان هستند.

ساخت اولین پروژه Svelte

شروع کار با Svelte بسیار ساده است و تنها در چند دقیقه می‌توانید اولین پروژه خود را اجرا کنید. امروزه روش پیشنهادی تیم Svelte، استفاده از SvelteKit است که علاوه بر امکانات Svelte، قابلیت‌هایی مانند مسیردهی، رندر سمت سرور و مدیریت پروژه را نیز در اختیار شما قرار می‌دهد.

برای ایجاد یک پروژه جدید، دستور زیر را اجرا کنید:

npx sv create my-app

سپس وارد پوشه پروژه شوید و وابستگی‌ها را نصب کنید:

cd my-app
npm install

در نهایت، سرور توسعه را اجرا کنید:

npm run dev

پس از اجرای پروژه، آدرس نمایش‌داده‌شده در ترمینال (معمولا http://localhost:5173) را در مرورگر باز کنید تا صفحه پیش‌فرض Svelte را ببینید.

یکی از اولین فایل‌هایی که با آن سروکار خواهید داشت، src/routes/+page.svelte است. این فایل صفحه اصلی برنامه را نمایش می‌دهد و می‌توانید محتوای آن را به دلخواه تغییر دهید.

برای مثال، کد زیر یک کامپوننت ساده را نمایش می‌دهد:

<script>
  let name = "Svelte";
</script>

<h1>Hello {name}!</h1>

با ذخیره فایل، تغییرات بلافاصله در مرورگر نمایش داده می‌شوند و نیازی به راه‌اندازی مجدد پروژه نیست. این قابلیت که Hot Module Replacement (HMR) نام دارد، سرعت توسعه و تست تغییرات را به شکل قابل توجهی افزایش می‌دهد.

مفاهیم اصلی در Svelte

یادگیری Svelte نسبت به بسیاری از فریمورک‌های دیگر ساده‌تر است، زیرا بیشتر قابلیت‌های آن به‌صورت استاندارد ساخته شده‌اند. با این حال، آشنایی با چند مفهوم کلیدی برای شروع توسعه با Svelte ضروری است.

• Component: هر بخش از رابط کاربری در Svelte یک کامپوننت است که معمولا در یک فایل با پسوند .svelte قرار می‌گیرد.

• Props: برای ارسال داده از یک کامپوننت به کامپوننت دیگر از Props استفاده می‌شود. این ویژگی امکان ساخت کامپوننت‌های قابل استفاده مجدد را فراهم می‌کند.

• Reactivity: یکی از مهم‌ترین ویژگی‌های Svelte، واکنش‌پذیری داخلی آن است. با تغییر مقدار یک متغیر، رابط کاربری به‌صورت خودکار به‌روزرسانی می‌شود، بدون اینکه نیاز به APIهای پیچیده باشد.

• Event Handling: مدیریت رویدادهایی مانند کلیک، ارسال فرم یا ورود اطلاعات با سینتکسی ساده و نزدیک به HTML انجام می‌شود.

• Conditional Rendering: فریمورک Svelte امکان نمایش یا مخفی کردن بخش‌هایی از رابط کاربری را بر اساس شرط، با استفاده از دستوراتی مانند {#if} فراهم می‌کند.

• List Rendering: برای نمایش مجموعه‌ای از داده‌ها از بلوک {#each} استفاده می‌شود که روشی ساده و خوانا برای رندر لیست‌ها ارائه می‌دهد.

• Stores: زمانی که چندین کامپوننت نیاز به استفاده از داده‌های مشترک داشته باشند، می‌توان از Storeها برای مدیریت وضعیت (State Management) استفاده کرد.

• Lifecycle: فریمورک Svelte مجموعه‌ای از توابع چرخه حیات را در اختیار توسعه‌دهنده قرار می‌دهد تا بتوان در زمان ایجاد، به‌روزرسانی یا حذف کامپوننت، منطق موردنظر را اجرا کرد.

مقایسه Svelte با React و Vue

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

اگر اولویت شما اکوسیستم بزرگ، فرصت‌های شغلی و جامعه کاربری گسترده باشد، React همچنان یکی از بهترین انتخاب‌ها است. Vue نیز با سادگی و ساختار منظم خود، گزینه‌ای محبوب برای بسیاری از پروژه‌های فرانت‌اند محسوب می‌شود.

در مقابل، اگر به دنبال فریمورکی با سینتکس ساده، حجم خروجی کمتر و عملکرد بالا هستید، Svelte می‌تواند انتخاب جذابی باشد. هرچند اکوسیستم آن هنوز به اندازه React یا Vue گسترده نیست، اما رشد سریع آن در سال‌های اخیر نشان می‌دهد که جایگاهش در دنیای توسعه وب روزبه‌روز پررنگ‌تر می‌شود.

چه زمانی از Svelte استفاده کنیم؟

اگرچه Svelte در طیف گسترده‌ای از پروژه‌های فرانت‌اند قابل استفاده است، اما در برخی سناریوها می‌تواند انتخاب مناسب‌تری نسبت به سایر فریمورک‌ها باشد.

Svelte گزینه‌ای ایده‌آل برای توسعه اپلیکیشن‌های تک‌صفحه‌ای (SPA)، داشبوردهای مدیریتی، پنل‌های داخلی و پروژه‌هایی است که عملکرد بالا و حجم کم فایل‌های نهایی اهمیت زیادی دارند. همچنین اگر به‌دنبال فریمورکی با یادگیری سریع و کدنویسی ساده هستید، Svelte تجربه‌ای روان و نزدیک به JavaScript استاندارد ارائه می‌دهد.

از سوی دیگر، اگر قرار است روی پروژه‌ای بسیار بزرگ با تیمی چندده‌نفره کار کنید یا به اکوسیستم گسترده‌ای از کتابخانه‌ها، ابزارها و فرصت‌های شغلی نیاز دارید، React یا Vue ممکن است انتخاب منطقی‌تری باشند. این فریمورک‌ها جامعه کاربری بزرگ‌تری دارند و برای بسیاری از نیازهای خاص، راهکارهای آماده در اختیار توسعه‌دهندگان قرار می‌دهند.

در نهایت، انتخاب بهترین فریمورک به نیاز پروژه بستگی دارد. Svelte تلاش نمی‌کند جایگزین همه گزینه‌های موجود باشد، بلکه با رویکرد متفاوت خود، راهکاری سریع، ساده و بهینه برای ساخت رابط‌های کاربری مدرن ارائه می‌دهد.

جمع‌بندی

Svelte با یک ایده متفاوت وارد دنیای فرانت‌اند شده است، اینکه بخش بزرگی از کار فریمورک را از زمان اجرا به زمان کامپایل منتقل کند. نتیجه این رویکرد، کدی سبک‌تر، سریع‌تر و نزدیک‌تر به جاوااسکریپت خام است.

در این مطلب دیدیم که Svelte چگونه با حذف Virtual DOM، ساده‌سازی سینتکس و ارائه یک مدل واکنش‌پذیری داخلی، تجربه توسعه رابط کاربری را تغییر می‌دهد. همچنین با مفاهیم اصلی، ساختار پروژه، و اکوسیستم آن آشنا شدیم و جایگاهش را در مقایسه با React و Vue بررسی کردیم.