Svelte چیست؟ فریم ورکی دیگر از جاوا اسکریپت

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

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

 

دو ویژگی اصلی Svelte

• سریع بودن

این فریمورک به دلیل کامپایل شدن، تنها بخشی‌هایی از رابط کاربری را نشان می‌دهد که تغییر کرده است و برخلاف Vue.js و دیگر چارچوب‌ها از DOM مجازی استفاده نمی‌کند.

حالا DOM مجازی چیست؟ 

با ساخته شدن یک صفحه در مرورگر کاربر، المان‌هایی روی صفحه نمایش داده می‌شود که UI سایت را به نمایش میگذارند. اما این المان‌ها به صورت یک ساختار درختی هستند. هنگامی که یک صفحه در مرورگر کاربر ساخته می‌شود، المان‌هایی روی صفحه‌ به نمایش درمی‌آید که به آن‌ها UI می‌گویند. این المان‌ها در قالب یک درخت ساخته می‌شوند که به آن DOM یا Document Object Model گویند.

به دلیل درختی بودن این ساختار نیاز است تا برای شناسایی هر تغییر، درخت از ریشه پیمایش خود را شروع کند تا به گره‌ی مورد نظر برسد و دوباره برای اعمال تغییرات، باید این مسیر را از اول پیمایش میکرد. DOM مجازی با هدف بهینه کردن این عملیات به وجود آمد. به این صورت، عملیات شناسایی گره توسط DOM مجازی انجام شده و سپس گره و تغییراتی که باید صورت بگیرد به DOM اصلی فرستاده می‌شود. اما Svelte همین عملیات را بهینه‌تر انجام می‌دهد.

 

پیشنهاد ویژه: اگر قصد یادگرفتن و پیاده سازی وب سایت ها را دارید، پیشنهاد ما دوره آموزش html css است که به صورت جامع برای شما عزیزان تهیه شده است

 

• کم‌حجم بودن

یک برنامه‌ی کامپایل شده در Svelte نسبت به سایر فریمورک‌های جاوا اسکرپت از حجم کمتری برخوردار است. به طوری که حجم یک برنامه‌ی ساده‌ی hello world ساخته شده در آن حدود 124 کیلوبایت است. این حجم کم برای برنامه‌های تلفن همراه بسیار مناسب می‌باشد. به نظر شما دلیل آن چیست؟ Svelte علاوه بر فریمورک، یک کامپایلر هم هست.

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

مزایای Svelte چیست؟

• پشتیبانی Svelte از SSR یا Server Side Rendering باعث میشود تا اجرای برنامه به سرور منتقل شده و برای نمایش حالت قبلی یک صفحه نیاز به رندر کردن دوباره‌ آن نباشد.

• بار دیگر میگوییم که Svelte کم‌ حجم و سریع است.

• برنامه‌نویسان سایر فریمورک‌ها در زمان کوتاهی به راحتی با آن ارتباط برقرار کرده و برای تشکیل تیم مشکلی نخواهد بود.

• جامعه‌ی برنامه‌نویسان Svelte، فضای به شدت دوستانه و روبه‌رشدی دارند.

• با جدا بودن بخش‌های مختلف برنامه تا حدودی، به راحتی می‌توانید به صورت تیمی روی یک پروژه فعالیت و کدهای خود را به سرعت یکجا جمع کنید.

معایب Svelte چیست؟

• تعریف نشدن هیچ نوع داده‌ای در Svelte؛ این مشکل برای افرادی که عادت کرده‌اند از تفاوت‌های میان انواع داده مانند رشته‌ها، اعداد و آرایه‌ها در کدنویسی استفاده کنند، دردسرساز میباشد. البته کتابخانه‌هایی برای رفع این مشکل نوشته شده است که میتوان از آنها استفاده کرد مانند: svelte-typescript-rollup، svelte-typescript-parcel و svelte-preprocess.

• کامپایل شدن پروژه با خطاهای import و export به خاطر کامپایلر بودن Svelte. این در حالیست که سایر فریمورک‌ها در همان مرحله‌ی کدنویسی شما را باخبر خواهند کرد.

• آشنا بودن برنامه‌نویس با با ابزارهایی نظیر Webpack برای کار با وابستگی‌های فایل‌هایی مانند تصاویر، فونت‌ها، استایل‌ها و... در صفحات وب.

• کوچک بودن جامعه آن به یک امر استرس‌زا برای افرادی که میخواهند تازه وارد کار شوند، تبدیل شده است.

• نسبت به سایر فریمورک‌ها، کتابخانه‌های کمتری وجود دارد. مثلا برای React بسته‌های بیشتری با NPM در دسترس است. اما در Svelte مجبور خواهید بود که کتابخانه‌ی مورد نیاز را، شخصا خودتان بنویسید.

ساختار یک کامپوننت در Svelte

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

•  تگ script: این تگ، یک بلوک جاوا اسکریپت است که متغیرها، توابع و شرط‌های لازم در آن تعریف می‌شوند.

• تگ style: استایل‌ها و ویژگی‌های ظاهری یک کامپوننت و نحوه‌ نمایش آن به کاربر در این تگ تعریف میشود؛ درست مشابه با فایل‌های CSS.

• تگ template: این تگ نقش رابط را دارد که دو بخش قبل را به یکدیگر متصل میکند درست مثل بخش Html.

جمع بندی:

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

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