تا قبل از اینکه فریمورکهای جاوا اسکریپت معروف شوند، توسعه وب‌اپلیکیشن‌ها و برنامه‌های تحت وب بسیار چالش‌برانگیز بود. یکی از چالش‌ها این بود که فایل‌های جاوا اسکریپت به سادگی قابل مدیریت و سازماندهی نبودند و در نتیجه، ارسال آن‌ها به محیط تولید (محیطی که وبسایت یا برنامه را بر روی سرورهای واقعی به نمایش می‌گذارد) مشکلاتی را ایجاد می‌کرد. این مشکلات باعث عدم صحت عملکرد و اجرای نادرست برنامه‌های وب می‌شد.
Rich Harris، سازنده Svelte، از انتزاعات پیچیده و کدهای استاندارد که توسعه‌دهندگان مجبور بودند یاد بگیرند، خسته شده بود. Svelte ابزاری است که به توسعه‌دهندگان این امکان را می‌دهد که با یک روش ساده‌تر برنامه‌نویسی کنند.
سازندگان Svelte.js در سال ٢٠١٩ یک دیدگاه جدید برای ساخت برنامه‌های وب ارائه کردند. Svelte.js یک فریمورک جاوا اسکریپت است که بسیار محبوب شده است. چرا؟ چیزی که Svelte را دوست‌داشتنی می‌کند چیست؟
در این مقاله، به معرفی فریمورک Svelte و ویژگی‌های آن پرداخته شده است.
بیشتر بخوانید: “فریم ورک چیست و چه ویژگی هایی دارد؟“
آنچه در این نوشته خواهیم داشت
Svelte چیست؟
Svelte یک فریمورک جاوا اسکریپت و مجموعه‌ای از اجزا، ابزارها و قوانین است که برای ایجاد ساختار یک وبسایت یا برنامه با جاوا اسکریپت استفاده می‌شود. Svelte یک رویکرد اصلی و جدید ارائه داده است که به توسعه‌دهندگان اجازه می‌دهد دقیقاً همان چیزی که نیاز دارند، را بسازند. به دلیل همین رویکرد نوآورانه، از Svelte به عنوان یک کامپایلر نیز یاد می‌شود. برخلاف فریمورک‌هایی مثل React و Vue.js، که از یک DOM مجازی در مرورگر استفاده می‌کنند، Svelte از DOM مجازی استفاده نمی‌کند. به‌جای آن، کد جاوااسکریپت را سبک و کم‌حجم می‌کند. این باعث می‌شود که کد از ابتدا با سرعت بیشتری کار کند و در نتیجه برنامه‌های حاصل سبک‌تر و کاربرپسندتر باشند. این اولین و مهم‌ترین تفاوتی است که Svelte در مقایسه با سایر فریمورک‌ها به دنیای برنامه‌نویسی جاوا اسکریپت ارائه داده است.
DOM یک رابط برنامه‌نویسی است که به برنامه‌نویس اجازه می‌دهد تا محتوا و ساختار یک صفحه وب را نمایش دهد. برنامه‌نویس با استفاده از DOM، به اجزای صفحه دسترسی دارد، می‌تواند آن‌ها را تغییر دهد و یا حذف کند.
در مقاله “آشنایی با BOM و DOM در جاوا اسکریپت” به طور کامل راجع به DOM صحبت شده است.
به عبارت دیگر Svelte با استفاده از یک روش منحصربه‌فرد در زمان کامپایل کردن کدها، برنامه‌های خیلی کم‌حجم را ایجاد می‌کند. این به توسعه‌دهندگان این امکان را می‌دهد تا بدون نیاز به اجرای قسمت‌های اضافی در زمان اجرا، برنامه‌های سریع و بهینه‌ای بسازند.
چه زمانی باید از Svelte استفاده کرد؟ وقتی که می‌خواهید برنامه‌های وب سریع، بهینه و قابل نگهداری بسازید، Svelte یک گزینه بسیار خوب است. به‌طور کلی، Svelte به توسعه‌دهندگان این امکان را می‌دهد تا با استفاده از یک رویکرد منحصربه‌فرد، برنامه‌های تحت وب جذاب و با عملکرد بالا بسازند.
برای دسترسی به Svelte و کار با آن، می‌توانید به وبسایت رسمی Svelte یا به GitHub مراجعه کنید و مراحل نصب و شروع کار با این فریمورک را به‌راحتی دنبال کنید.
ویژگی‌های فریمورک Svelte
به عقیده بسیاری از توسعه‌دهندگان، Svelte یک پیشرفت بزرگ در دنیای فریمورکهای جاوا اسکریپت است. چرا که Svelte با ارائه یک رویکرد جدید و نوآورانه، تجربه توسعه برنامه‌نویسی را بهبود می‌بخشد. از دیدگاه توسعه‌دهندگان، برنامه‌نویسی با Svelte ساده‌تر است. در اینجا به هشت ویژگی مهم Svelte اشاره شده است:
۱.برنامه‌نویسی ساده‌تر
همانطور که گفته شد، فرآیند برنامه‌نویسی با Svelte بسیار آسان است و نتیجه‌اش هم این است که پروژه با سرع بالاتر و چالش‌های کمتری انجام می‌شود.
۲. حجم کد کمتر
با Svelte می‌شود با تعداد خطوط کد کمتری برنامه‌نویسی کرد. در نتیجه خطاهای کد کاهش و قابلیت خوانایی کد افزایش می‌یابد. به مثال زیر توجه کنید:
کد مورد نیاز برای نمایش پیام “Hello World” در فریمورک Svelte به شکل زیر است:
<script>
let name = "World";
</script>
<h1>Hello {name}!</h1>
در این کد، درون تگ `<script>` یک متغیر به نام `name` تعریف شده که مقدار پیش‌فرض آن “World” است. سپس در تگ `<h1>` پیام “Hello {name}!” نمایش داده می‌شود. از `name` به عنوان یک متغیر درون متن مورد استفاده قرار گرفته است که مقدار آن درون تگ `<script>` تعیین شده است و می‌تواند تغییر کند. در مقایسه با فریمورکهای دیگر مانند React یا Vue، کد مشابه در Svelte معمولاً حدود ٣٠-۴٠٪ کمتر است.
۳. رابط‌های واکنش‌پذیر
امروزه ایجاد رابط‌های واکنش‌پذیر در برنامه‌های وب یکی از مهم‌ترین بخش‌های هر پروژه محسوب می‌شود. در Svelte، زمانی‌که نیاز باشد مقادیر متغیرها بر اساس مقادیر دیگری که در برنامه هست، به‌روز و مجددا محاسبه شوند، فقط کافیست یک علامت دلار ($) قبل از نام متغیر مورد نظر قرار دهید. این دستورات به‌طور خودکار بروزرسانی می‌شوند.
۴. کمک به تصحیح کدها
در Svelte، نکات ضروری که برنامه‌نویس ممکن است آن را فراموش کند، به‌طور خودکار یادآوری می‌شود. به عنوان مثال، اگر فراموش کنید ویژگی “alt” را برای یک تصویر درج کنید، Svelte به شما یادآوری می‌کند. همچنین، اگر کدهای CSS در برنامه باشد که استفاده نشده، Svelte اعلام می‌کند کدی وجود دارد که به آن نیازی نداریم. این ویژگی Svelte در طول کار، به برنامه‌نویس کمک می‌کند تا اشکالات ریز را تصحیح کند.
۵. سهولت در کار با کامپوننت‌ها
در Svelte، هر زمان که بخواهید کامپوننت A را در کامپوننت B استفاده کنید، باید کدی را برای صادر کردن (export) کامپوننت A بنویسید تا بتواند در کامپوننت B استفاده شود. اما در Svelte، نیازی به این کار نیست. کامپوننت‌های svelte به صورت پیش‌فرض صادر و آماده استفاده در هر کامپوننت دیگری هستند.
۶. قابلیت‌های محلی و Global
در Svelte به طور پیش‌فرض، هر استایل CSS که برای یک قسمت از وبسایت تعریف می‌شود، دارای نام یا علامتی خاص است. این علامت کمک می‌کند تا این استایل تنها بر روی همان قسمت مورد نظر اعمال شود و روی بخش‌های دیگر از وبسایت تأثیر نگذارد.
با این حال امکان اعمال استایل به صورت Global نیز وجود دارد. در این صورت استایل‌ها برای تمام قسمت‌ها و صفحات وبسایت قابل دسترسی باشند.
۷. استفاده از بلوک {await#}
برنامه‌نویس در توسعه وبسایت یا وب اپلیکیشن، نیاز دارد اطلاعاتی را از سرور بخواند و یا نمایش دهد. اما این کارها زمانبر هستند. با استفاده از بلوک‌های {await#} در Svelte، می‌شود به راحتی با داده‌های ناهمگام کار کرد.
به طور مثال، وقتی یک درخواست به سرور برای دریافت اطلاعات ارسال می‌کنید، احتمال دارد که زمانی طول بکشد تا این اطلاعات پاسخ داده شود. با استفاده از بلوک {await#}، می‌توانید بدون نیاز به تعریف وضعیت‌های اضافی برای این درخواست، به راحتی متغیرها و مقادیر را به صورت مستقیم و درون قالب (template) خودتان تعریف و استفاده کنید. این به شما کمک می‌کند که درخواست‌های ناهمگام را ساده‌تر و موثرتر مدیریت کنید و نیازی به بررسی وضعیت‌های اضافی نداشته باشید.
بیشتر بخوانید: “برنامه‌نویسی ناهمگام چیست؟“
۸. افکت و انیمیشن اختصاصی
در Svelte، افکت‌ها و انیمیشن‌های مختلفی به طور پیش‌فرض در دسترس هستند. در نتیجه نیازی به استفاده از ابزارهای خارجی برای ایجاد انیمیشن وجود ندارد، زیرا این افکت‌ها به طور مستقیم در فریمورک Svelte قرار دارند. استفاده از این قابلیت باعث کاهش اندازه وبسایت یا برنامه می‌شود، زیرا نیاز به افزودن ابزارهای جانبی برای انیمیشن‌ها و افکت‌ها وجود ندارد.
معایب Svelte
هر فریمورک یا کتابخانه‌ای، مزایا و معایب خودش را دارد. این موارد بسته به نیازها و موارد استفاده در هر پروژه متفاوت است. برخی از معایب Svelte عبارتند از:
١. Svelte در مقایسه با فریمورک‌هایی مانند React و Vue که سابقه بالایی دارند و به بلوغ رسیده‌اند، درحال گسترش و رشد است. به همین دلیل به مرور زمان نیاز به توسعه و بهبود دارد تا بتواند به جایگاهی مانند فریمورکهای بزرگتر برسد.
٢. به دلیل جدید بودن، مستندات و منابع آموزشی کافی برای Svelte وجود ندارد. این می‌تواند برای کاربران جدید یا برنامه‌نویسان تازه‌کار مشکلاتی را ایجاد کند.
٣. در مقایسه با فریمورک‌هایی که پشتیبانی و اعتبار شرکت‌های بزرگی مانند Facebook را دارند، Svelte هنوز این پشتیبانی و اعتبار را ندارد.
۴. زمانی که یک فریمورک یا کتابخانه جدید وارد بازار می‌شود، مدت زمان بیشتری طول می‌کشد تا توسعه‌دهندگان و صنایع مختلف به آن اعتماد کنند. در نتیجه، استقبال از آن کم است.
کلام آخر
Svelte فریمورک جدید و نوپای جاوا اسکریپت است. با توجه به اینکه زمان زیادی نیست که این فریمورک معرفی شده، روز به روز بر محبوبیت آن در جامعه برنامه‌نویسان و توسعه‌دهندگان جاوا اسکریپت افزوده می‌شود. به همین دلیل در آینده‌ای نه‌چندان دور می‌شود روی آن حساب باز کرد.
اگر به برنامه‌نویسی علاقه دارید و می‌خواهید وارد دنیای جاوا اسکریپت شوید، پیشنهاد می‌کنیم در دوره آموزش جاوا اسکریپت آمانج شرکت کنید اگر هم برنامه‌نویس هستید و با کتابخانه‌های معروف جاوا اسکریپت کار کرده‌اید، می‌توانید به فریمورک Svelte هم فکر کنید.
