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

سریع بودن

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

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

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

کم‌حجم بودن

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

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

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

مزایای 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 چیست و چطور کار می کند باید گفت که این فریم ورک از دسته فریم ورک های کامپایلری می باشد که توانسته است هم از نظر سرعت لود شدن و هم کاهش بار پردازشی به خوبی عمل کند. در رابطه با اینکه این موضوع چطور می تواند روی کار فریم ورک مورد نظر ما تاثیر بگذارد لازم است کمی در مورد پردازش هایی که روی فرانت اند اتفاق می افتد صحبت کنیم.

در کل میا می توانیم صفحات سایت های مختلف را به دو صورت پویا و ایستا تقسیم کنیم. در نوع ایستا یک صفحه به صورت از پیش تعیین شده با کدهای HTML ایجاد شده است و یک فایل HTML برای کاربر ارسال می شود که در مرورگر به سادگی ترجمه شده و به نمایش در می آید.

مکانیزم کاری Svelte چیست؟

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

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

پردازش به صورت Native یا محلی: این نوع از پردازش که می توان آن را در سیستم هایی مانند Vue JS و همینطور React مشاهده کرد، نوعی از پردازش های تصویر فرانت اند است که در آن ساخت تصاویر و کار پردازشی به جای اینکه روی سمت سرور انجام شود و به سرور فشار وارد کند، در سیستم مقصد انجام می شود. یعنی از منابع خود کاربر برای نمایش صفحه به آن استفاده خواهد کرد.

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

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