Svelte چیست؟

Svelte
مقالات نرم افزار های تحت وب

Svelte چیست؟

Svelte روز به روز برنامه‌های تحت وب بیشتری ساخته می‌شوند و کاربران، این برنامه‌های رو به ‌رشد را به دلیل سادگی، سرعت زیاد و دسترس‌پذیری بالا انتخاب می‌کنند. اپلیکیشن‌های تک صفحه‌ای (SPA) بخش عظیمی از این جریان را به خود اختصاص داده‌اند که معمولا با فریم ورک‌هایی مانند انگولار، Vue.js و React.js ساخته می‌شوند.

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

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

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

Svelte چیست؟

 

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

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

Svelte
دو ویژگی اصلی 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 مشاهده کرد، نوعی از پردازش های تصویر فرانت اند است که در آن ساخت تصاویر و کار پردازشی به جای اینکه روی سمت سرور انجام شود و به سرور فشار وارد کند، در سیستم مقصد انجام می شود. یعنی از منابع خود کاربر برای نمایش صفحه به آن استفاده خواهد کرد.

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

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

دیدگاه خود را اینجا قرار دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

اعضا

‫بروز رسانی

سمیرا مردانی's بروزسانی مشخصات انجام شد 1 سال, ماه 2 قبل

محمد جواد محمدی's بروزسانی مشخصات انجام شد 1 سال, ماه 2 قبل

مریم نوری's بروزسانی مشخصات انجام شد 1 سال, ماه 2 قبل

محمد امین طاهری's بروزسانی مشخصات انجام شد 1 سال, ماه 2 قبل

نگار حجتی's بروزسانی مشخصات انجام شد 1 سال, ماه 2 قبل

فیلدهای نمایش داده شده را انتخاب کنید. دیگران مخفی خواهند شد. برای تنظیم مجدد سفارش ، بکشید و رها کنید.
  • عکس
  • شناسه محصول
  • امتیاز
  • قیمت
  • در انبار
  • موجودی
  • افزودن به سبد خرید
  • توضیحات
  • محتوا
  • عرض
  • اندازه
  • تنظیمات بیشتر
  • ویژگی ها
  • ویژگی های سفارشی
  • زمینه های دلخواه
برای پنهان کردن نوار مقایسه ، بیرون را کلیک کنید
مقایسه
مقایسه ×
Let's Compare! Continue shopping