آشنایی با Svelte

همانطور که می دانید دنیای جاوا اسکریپت پر از انواع و اقسام فریم ورک های مختلف است که هیچ کدام پایانی ندارند. Svelte نسبتا یکی از تازه کارهای این میدان است. معمولا ابزارهای جاوا اسکریپتی به دلیل تعداد بالای آن ها در حوزه وب سریعا به فراموشی سپرده می شوند یا اصلا هیچگاه شناخته نمی شوند اما Svelte شناخته شد و هنوز هم به شناخته شده باقی مانده است (۴۸ هزار ستاره در گیت هاب).

ما در این مقاله می خواهیم در رابطه با ویژگی های مثبت Svelte صحبت کنیم اما قبل از آن باید در رابطه با تفاوت اصلی آن با فریم ورک هایی مانند react و vue صحبت کنیم چرا که در دنیای جاوا اسکریپت فریم ورک های زیادی وجود دارند و همگی یک کار را انجام می دهند اما Svelte متفاوت است.

۱. تفاوت اصلی Svelte با دیگر فریم ورک ها

Svelte مانند react و vue یک فریم ورک کامپوننت است اما جذاب ترین ویژگی آن وجود یک کامپایلر برای کدهای شما است! فریم ورک Svelte در این دو زمینه تفاوت بزرگی را با فریم ورک های Vue و React ایجاد کرده است و به همین دلیل است که تا این حد نیز مورد توجه قرار گرفته است. بیایید در این باره صحبت کنیم.

۱.۱. تاریخچه ویرایش DOM

در قلب برنامه های امروزی وب مفهومی به نام reactivity یا واکنش پذیری را پیدا خواهید کرد. واکنش پذیری یعنی تغییر در داده ها (مثلا state برنامه) باعث تغییر لحظه ای در DOM شود. DOM همان ساختار درختی صفحات HTML است. در سال های گذشته (حدود ۵ تا ۱۰ سال پیش) کتابخانه ای به نام jQuery محبوبیت بسیار زیادی پیدا کرد و دلیل این محبوبیت نیز حل مسئله واکنش پذیری بود. شما می توانستید با استفاده از jQuery درخت DOM را ویرایش کنید گرچه این ویرایش کُند بود.

در سال های بعد فریم ورک هایی مانند react با ارائه مفهوم جدیدی به نام Virtual DOM دنیای توسعه وب را دگرگون کردند. Virtual DOM به شما اجازه می دهد نسخه ای مجازی از DOM را داشته باشید و قبل از اعمال تغییرات در صفحه وب، آن تغییر را با نسخه مجازی مقایسه کنید. در این حالت اگر نیازی به ویرایش DOM نبود اصلا DOM را به روز رسانی نمی کردیم بنابراین عملیات ها سریع تر انجام می شد.

مشکل Virtual DOM این است که مموری بسیار زیادی مصرف می کند تا یک نسخه کپی از DOM باشد. همچنین نیاز به قدرت پردازشی برای پردازش تمام این درخواست ها و اجرای کدها نیز بیشتر از یک برنامه عادی است. مسئله بعدی کدهایی است که توسط شما در React یا Vue نوشته می شود. کدهای شما بدون همراهی سورس کد React یا Vue اجرا نمی شوند بنابراین باید هم کدهای خودتان و هم سورس کد فریم ورک خود را به سمت کاربر ارسال کنید و این خودش به معنی دانلود فایل های بزرگتر در زمانی طولانی تر است.

باید توجه داشته باشید که اکثر سیستم های امروزی بدون هیچ مشکلی با React یا Vue کار می کنند و اصلا اینطور نیست که کُند باشند یا نتوانند مشتریان شما را راضی نگه دارند. بحث اصلی ما بر سر این است که آیا راه بهتری نیز وجود دارد؟

۱.۲. کامپایلر Svelte

Svelte برای حل مشکلاتی که در بخش قبل ذکر شد دست به پیاده سازی یک کامپایلر برای کدهای خود زد. اگر به وب سایت Svelte بروید در این باره توضیحاتی داده شده است:

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

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

در واقع فریم ورک های دیگر کدهای شما را interpret (تفسیر) می کنند اما Svelte آن ها را کامپایل می کند. باید در نظر داشته باشید که این عملیات کامپایل کاملا بهینه بوده و کدهای جاوا اسکریپتی را تولید می کند که سریع باشند. با این حساب دیگری هیچ نیازی به Virtual DOM نیست و Svelte نیز هیچ Virtual DOM ای ندارد. از طرفی دیگر نیازی نیست که سورس کد Svelte را درون برنامه خود گذاشته و به سمت کاربر ارسال کنید. کدهای شما به جاوا اسکریپت خالص تبدیل می شوند و فقط بخش بسیار کوچکی از کدهای Svelte در برنامه شما قرار می گیرد نه کل سورس کد آن!

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

۲. مزایای استفاده از Svelte

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

۲.۱. حذف Virtual DOM

حذف Virtual DOM تاثیرات مختلفی روی کارکرد Svelte دارد. اولین تاثیر آن سبک تر بودن کدهای نهایی پروژه و همچنین بالا رفتن سرعت برنامه شما است. طبیعتا عدم وجود یک کپی از DOM باعث می شود مموری مصرف شده توسط برنامه ما بسیار کمتر شود. از طرفی نیز سورس کد Svelte در کدهای ما حضور ندارد بنابراین سرعت راه اندازی اولیه و بالا آمدن برنامه سریع تر می شود. برای مطالعه تست های کامل بین فریم ورک های جاوا اسکریپتی می توانید به این benchmark بزرگ مراجعه نمایید.

تاثیر دوم حذف Virtual DOM این است که کدهای boilerplate (کدهای اولیه برای راه اندازی) را نداریم و نیازی به نوشتن هوک های مختلف یا نوشتن منطق پیچیده برای مدیریت state برنامه نیست. کدهای اولیه ای که برای تعریف هر کامپوننت می نویسید بسیار کوچک و کم هستند بنابراین زمان کمتری را صرف نوشتن کدهای تکراری خواهید کرد. به طور مثال اگر بخواهیم یک کامپوننت ساده را تعریف کنیم که از two-way-binding پشتیبانی کند فقط به کدی مانند کد زیر نیاز داریم:

<style>

  h1 {

    color: blue;

  }

</style>

<script>

  let name = "world";

</script>




<input bind:value="{name}" />




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

طبیعتا نوشتن چنین کدی بسیار ساده تر از نوشتن آن در Vue یا React است و تقریبا شبیه به HTML ساده به نظر می رسد!

تاثیر سوم حذف Virtual DOM این است که Svelte مستقیما DOM را ویرایش می کند و حقیقتا واکنش پذیر است. هر متغیر سطح اولی که در کامپوننت شما تغییر کند، به صورت خودکار توسط Svelte تشخیص داده شده و در DOM اعمال می شود. از طرفی تغییراتی مانند array.push  به صورت خودکار در DOM اعمال نمی شوند بنابراین mutation ها صریح بوده و درک آن ها ساده تر است.

البته Svelte از نوع خاصی از متغیر ها به نام derived declaration پشتیبانی می کند که با علامت $ مشخص می شوند و با هر بار تغییر state برنامه به صورت خودکار دوباره حساب می شوند:

<script>

  let count = 0; // متغیر سطح اول

  $: doubled = count * 2; // derived declaration




  // derived statement

  $: {

    console.log(`the count is ${count}`);

  }




  // نیز به روز رسانی می شود DOM با تغییر متغیر ها

  function handleClick() {

    count += 1;

  }

</script>




<button on:click="{handleClick}">

  <p>{count} doubled is {doubled}</p>

</button>

تاثیر مهم دیگر حذف Virtual DOM این است که شیب یادگیری Svelte بسیار کُند است بنابراین همه افرادی که کمی با دنیای برنامه نویسی آشنا باشند می توانند آن را به سادگی یاد بگیرند. Svelte هیچ نحو و قاعده خاصی مانند JSX در react یا API های پیچیده در Angular ندارد. همانطور که در مثال های قبل مشاهده کردید نوشتن کامپوننت های Svelte بسیار ساده است. در عین حال یاد داشتن فریم ورک های دیگر مانند React کمک بسیار زیادی به یادگیری Svelte می کند. اگر با فریم ورک های دیگر آشنا باشید معمولا ظرف یک هفته Svelte را یاد می گیرید!

۲.۲. الگوی کامپوننت محور

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

۲.۳. انیمیشن های آماده

Svelte به صورت پیش فرض چندین انیمیشن آماده را برای برنامه نویسان آماده کرده است تا نیازی به پکیج های خارجی نداشته باشند. جالب اینجاست که بدانید Svelte در ابتدا به عنوان یک ابزار ساخت گرافیک های تعامل پذیر برای روزنامه گاردین نوشته شده بود! این موضوع باعث می شود تجربه توسعه دهندگان در هنگام استفاده از Svelte بسیار بهتر باشد. مثلا برای ساخت یک transition ساده بدین شکل عمل می کنیم:

<script>

  import { fade } from "svelte/transition";

  let visible = true;

</script>




<label>

  <input type="checkbox" bind:checked="{visible}" />

  visible

</label>




{#if visible}

<p transition:fade>Fades in and out</p>

{/if}

۲.۴. مدیریت state ساده تر

Svelte به صورت پیش فرض و از همان ابتدا ابزار های مختلفی را برای مدیریت state به شما ارائه می دهد. به طور مثال پشتیبانی از subscription ها و two-way binding ها به راحتی در اختیار شما است و با سیستم خاص و سراسری خود می تواند به شما گزینه های مختلفی را برای مدیریت state ارائه دهد بدون اینکه نیازی به استفاده از ابزار های خارجی داشته باشید.

در فریم ورک های مانند React از Redux برای کنترل سراسری state استفاده می شود. چرا؟ به دلیل اینکه در بسیاری از مواقع state یک کامپوننت باید به صورت سراسری در اختیار همه کامپوننت های دیگر باشد و فقط مختص به آن کامپوننت نیست. البته اخیرا تیم React برای حل این مشکل Context API را به آن اضافه کرده اند. Svelte برای حل این مشکل و عدم استفاده از ابزار های خارجی از مفهومی به نام stores ها استفاده می کند. هر store یک شیء ساده است که متدی به نام subscribe را در خود دارد. هر کامپوننتی که بخواهد از تغییرات این شیء با خبر شود باید این متد را صدا بزند. در این حالت تمام کامپوننت های دیگر می توانند داده های این store را ویرایش کنند به همین دلیل به آن ها writable store می گوییم. اگر بخواهیم store ما فقط قابلیت خوانده شدن را داشته باشد باید از نوع دیگری از store ها به نام readable store ها استفاده کنیم.

من در کد زیر یک مثال از writable store ها را برایتان آورده ام:

<script>

  import { fade } from "svelte/transition";

  let visible = true;

</script>




<label>

  <input type="checkbox" bind:checked="{visible}" />

  visible

</label>




{#if visible}

<p transition:fade>Fades in and out</p>

{/if}

۲.۵. هدف های خروجی چندگانه

از آنجایی که Svelte یک کامپایلر است، تغییر دادن هدف خروجی در آن بسیار آسان است. هدف خروجی یعنی مشخص کردن اینکه کدهای شما برای چه هدفی نوشته شده اند و باید به چه صورتی از آن ها خروجی گرفته شود. در Svelte در حالت عادی هدف خروجی شما dom است که یعنی کدهایتان باید در مرورگر اجرا شوند اما یک هدف خروجی دیگر به نام ssr را نیز داریم که بدون استفاده از پکیج های خارجی به شما قابلیت server-side rendering را ارائه می دهد.

حتی یک افزونه برای ترکیب Svelte و NativeScript integration نیز ساخته شده است بنابراین می توانید هدف خروجی خود را روی NativeScript نیز تعیین کنید. فریم ورک Sapper نیز برای Svelte وجود دارد که تقریبا مانند Next.js برای React است و قابلیت SSR را به شما می دهد.

۳. معایب استفاده از Svelte

هیچ ابزاری در سطح وب وجود ندارد که بدون معایب خودش باشد بنابراین بعد از آشنایی با مزایای Svelte حالا نوبت به آشنایی با معایب آن می شود.

۳.۱. جوان بودن Svelte

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

۳.۲. جامعه آماری کوچک تر

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

شاید در ابتدا جامعه آماری برایتان مهم نباشد اما معمولا اینطور نیست. جامعه آماری دلیل اصلی رشد یک فریم ورک است و بالاتر بودن آن باعث کمک به موارد زیر می شود:

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

۳.۳. زمان کامپایل

از آنجایی که Svelte وابستگی کاملی به کامپایلر خود دارد باید در نظر داشت که برای اجرای برنامه های Svelte باید آن ها را کامپایل کرد. از طرفی برنامه های front-end روز به روز پیچیده تر و سنگین تر می شوند بنابراین اگر سیستم ضعیفی داشته باشید کامپایل کردن کدهایتان ممکن است زمان زیادی از شما بگیرد. همچنین در هنگام استفاده از Server-Side Redering باید توجه ویژه ای به این موضوع داشته باشید تا سرور خود را بیش از حد درگیر نکنید.

۳.۴. documentation ضعیف تر

از آنجایی که Svelte جوان تر است، هنوز documentation آن به اندازه فریم ورک های دیگر پخته نیست و ممکن است برای توسعه دهندگان تازه کار باعث دردسر شود. به طور مثال اگر بخواهید Server-Side Rendering انجام بدهید و Scrapper را نیز وارد کار خود کنید، پروژه سخت خواهد شد چرا که توضیحات مفصلی درباره نحوه انجام آن نیست. تیم توسعه Svelte دائما در حال کار روی این پروژه هستند بنابراین این موضوع در آینده نزدیک حل خواهد شد.

۳.۵. عمر کوتاه dev tools

همانطور که می دانید فریم ورک هایی مانند React و Vue یک افزونه dev tools دارند که روی مرورگر شما سوار شده و به شما اجازه می دهد برنامه های خود را در سمت مرورگر دیباگ کنید یا چرخه رفتار آن ها را زیر نظر داشته باشید. متاسفانه تا چند وقت پیش افزونه رسمی برای Svelte وجود نداشت و افزونه جدید نیز به تازگی ساخته شده است که ممکن است دارای مشکل باشد.

تمام این مسائل را باید با این مسئله در نظر داشت که هنوز هیچ کمپانی یا گروه بزرگی به صورت فعال از Svelte پشتیبانی نمی کند.

در عین حال Svelte می تواند یکی از بهترین گزینه های شما برای توسعه برنامه هایتان باشد.

منبع: وب سایت deepu