10 دلیل برای اینکه Svelte را به هر توسعه دهنده وب تازه کاری توصیه کنیم

اگرچه نسخه اولیه Svelte در نوامبر 2016 منتشر شد و در بین فریمورک های فرانت-اند جاوا اسکریپت چندان کارایی نداشت، اما اخیرا توجه توسعه دهندگان را به خود جلب کرده است.

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

تا چند سال پیش نوشتن کد با جی کوئری مانند یک مکاشفه بود. بعد از اولین پروژه‌ام، شروع به کار با انگولار 2 کردم و پس از مدتی احساس خستگی شدیدی داشتم. اکنون ری‌اکت نشان می‌دهد که چقدر انعطاف‌پذیر است و انگولار در مقایسه با آن خیلی پیچیده‌تر است. شما احتمالا می‌توانید حدس بزنید که این جریان به کجا می‌رود.

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

حال ممکن است این سوال را از خود بپرسید:

چه چیزی Svelte را متفاوت می‌کند؟

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

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

اکنون پس از چند ماه، می‌توانم به شما پاسخ قطعی بدهم. Svelte ساده، قدرتمند و زیبا است و قطعا شما آن را دوست خواهید داشت.

در اینجا 10 دلیل اصلی آورده شده است که Svelte را به هر توسعه دهنده وب جدیدی که شروع به یادگیری برنامه نویسی می‌کند، توصیه می‌کنم.

1 – یادگیری کامپوننت‌های Svelte آسان است

اگر قبلا سینتکس Svelte را ندیده‌اید، در زیر یک مثال ساده آورده‌ایم:

<style>
  h1 {
    color: green;
  }

  p {
    font-style: italic;
  }
</style>

<script>
  let role = 'developer';
</script>

<h1>Hello, {role}!</h1>

<p>I hope you are having a good day!</p>

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

2 - به سادگی کد مختصر بنویسید

همانطور که در مثال کد بالا مشاهده می‌کنید، منطقی که می‌نویسید ساده و به راحتی قابل خواندن است. به هر حال هرچه کد کمتری بنویسید، اشکالات کمتری هم می‌تواند داشته باشد، درست است؟

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

3 - واکنش پذیری با عبارات برچسب دار

هر زمان که می‌خواهید مقادیر متغیر خود را بر اساس متغیرهای دیگر به روز کرده و دوباره محاسبه کنید، می‌توانید از اعلان‌های واکنشی استفاده کنید. تنها کافی است یک علامت دلار ($) در مقابل متغیری قرار دهید که می‌خواهید واکنش‌پذیر باشد.

<script>
  let count = 0;
  $: doubled = count * 2;

  function handleClick() {
    count += 1;
  }
</script>

<button on:click="{handleClick}">Click me!</button>

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

هر زمان روی دکمه کلیک شود، شمارنده 1 واحد افزایش می‌یابد و دو برابر می‌شود که مقدار شمارش تغییر کرده و بر این اساس به روز می‌شود. واقعا فکر کردن در مورد واکنش‌پذیری جذاب است و نوشتن آن به خوبی حس می‌شود.

4 – مدیریت آسان عبارات گلوبال

نیازی به ابزارهای پیچیده مدیریت شخص ثالث مانند Redux یا Vuex نیست.

شما فقط یک متغیر را به عنوان یک محل ذخیره قابل نوشتن / خواندن تعریف می‌کنید:

// stores.js
import { writable } from 'svelte/store';

export const isDev = writable(NODE_ENV === 'development');

و از آن در هر فایلی با پسوند svelte. استفاده کنید.

<!-- Main.svelte -->
<script>
  import { isDev } from '../helpers/stores.js';
  import CookieNotice from '../components/CookieNotice.svelte';
</script>

{#if !$isDev}
<CookieNotice />
{/if}

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

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

5 - قابلیت دسترسی داخلی و بررسی CSS استفاده نشده

Svelte می‌خواهد اینترنت را به مکان بهتری تبدیل کند و با نکات مفید در کد به شما کمک می‌کند.

هر وقت فراموش کنید که خصوصیت alt را روی تگ‌های <img> قرار دهید، Svelte یک A11y نمایش می‌دهد: عنصر <img> باید یک یادآوری ویژگی alt برای شما داشته باشد. یک لیست طولانی از بررسی‌های دسترسی وجود دارد که در Svelte اجرا می‌شود و بدون اینکه آزاردهنده باشند برای شما نمایش داده می‌شوند.

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

6 – کامپوننت‌ها به طور خودکار صادر می‌شوند

هر زمان که بخواهید از کامپوننت A در کامپوننت B استفاده کنید، معمولا برای صادر کردن کامپوننت A ابتدا باید کدی بنویسید تا بتواند توسط کامپوننت B وارد شود. در Svelte دیگر نیازی به نگرانی در مورد فراموش کردن صادرات نخواهید داشت. یک کامپوننت svelte. همیشه به طور پیش فرض برای شما به صورت خودکار صادر می‌شود و برای وارد شدن توسط هر کامپوننت دیگری آماده است.

7 - به طور پیش فرض یک ظاهر طراحی می‌شود

مشابه با کتابخانه‌های CSS-in-JS، استایل‌های Svelte به طور پیش فرض دارای محدوده استانداردی هستند، به این معنی که نام یک کلاس <svelte-<unique-hash به استایل‌های شما پیوست می‌شود. بنابراین آنها سرریز نمی‌شوند و بر استایل دیگری از کامپوننت تأثیر نمی‌گذارند. البته شما این گزینه را دارید که به صورت گلوبال با پیشوند دادن آنها توسط مادیفایر ()global: یا در صورت تمایل فقط با استفاده از یک فایل css. در سطح گلوبال اعمال کنید.

8 – بلوک‌های #await

در اکثر برنامه‌های وب، شما باید داده‌های ناهمزمان را مدیریت کنید تا آمار مفیدی را برای کاربران خود به نمایش بگذارید.

{#await promise}
<p>...waiting</p>
{:then number}
<p>The number is {number}</p>
{:catch error}
<p style="color: red">{error.message}</p>
{/await}

مزیت بلوک‌های {await#} این است که شما نیازی به تعریف state اضافی برای promise های حل نشده یا رد شده ندارید و فقط می‌توانید متغیرها را به صورت inline در الگوی خود تعریف کنید.

9 – ویژگی‌های مختصر برای عبور از prop ها

در صورت وجود نام prop که همان نام متغیر می‌باشد، می‌توانیم آن را به عنوان یک ویژگی مختصر مانند {message} به کامپوننت منتقل کنیم. استفاده از "message="{message} هیچ مزیتی ندارد، اما مختصرتر است و منجر به نوشتن کد کمتر می‌شود.

<!-- Parent.svelte -->
<script>
  let message = 'hello child!';
</script>

<Child {message} />

برای اختصاص کلاس‌ها می‌توانیم از اختصار نیز استفاده کنیم:

<!-- Child.svelte -->
<script>
  let round = true;
</script>

<style>
  .round {
    border: 1px solid black;
    border-radius: 50%;
  }
</style>

<button class:round>C</button>

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

10 – جلوه‌ها و انیمیشن‌های داخلی

Svelte با ماژول‌های افکت قدرتمند همراه است:

• جلوه‌های حرکتی مانند tweened و spring
• جلوه‌های عبوری مانند محو شدن، تاری، پرواز، اسلاید، مقیاس، رسم
• جلوه‌های انیمیشنی مانند flip
• جلوه‌های متحرک مانند جهش، مکعب، الاستیک و موارد دیگر

چند مثال در آموزش رسمی Svelte وجود دارد، اما من مثال نوار پیشرفت را بیشتر به دلیل سادگی آن دوست دارم.

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

دلایل منصفانه برای عدم پذیرش Svelte

برای جلوگیری از طولانی شدن مقاله، تنها چند مورد منفی را که تاکنون با Svelte تجربه کرده‌ام، در زیر می‌بینید:

فایل‌های svelte. نمی‌توانند چندین کامپوننت را صادر کنند

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

سینتکس کلی

برای نمایش منطق شرطی، Svelte از سینتکسی استفاده می‌کند که شبیه سینتکس مشهور Handlebars است.

<script>
  let value = 5;
</script>

{#if value > 10}
<p>{value} is greater than 10</p>
{:else}
<p>{value} is smaller than 10</p>
{/if}

من با این روش نوشتن به هیچ مشکلی برخورد نکردم، اما یک سینتکس مختصر را ترجیح می‌دهم.

دریافت ویژگی‌ها در کامپوننت فرزند با export let

وقتی می‌خواهید مقادیر را از والدین به کامپوننت فرزند منتقل کنید، باید مقداری را به عنوان یک خصوصیت منتقل کنید و آن را با استفاده از export let با نام متغیر منطبق دریافت کنید.

<!-- Parent.svelte -->
<Child message="hello child!" />

<!-- Child.svelte -->
<script>
  export let message;
</script>

<p>{message}</p>

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

سرعت توسعه

این مورد ارتباط مستقیمی با تجربه توسعه Svelte ندارد، اما قطعا باید توجه داشته باشید که Svelte از نظر پشتیبانی مالی و تعداد همکاران نمی‌تواند با پروژه‌های متن باز بزرگتر و تحت حمایت مانندReact ،Angular ، Vue.js و دیگران رقابت کند.

با این وجود، جامعه به سرعت در حال رشد است و لیستی از پروژه‌های شخص ثالث که توسط انجمن برای Svelte ساخته شده است، در حال افزایش‌اند. توسعه دهندگانی که روی ابزارهای مرتبط با Svelte کار می‌کنند نابغه هستند و همیشه می‌توانید از کانالDiscord ، Twitter یا Reddit درخواست کمک کنید. Svelte اخیرا پشتیبانی از TypeScript را نیز اضافه کرده و بسیار عالی عمل می‌کند.

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

کمبود شغل‌

اکثر شرکت‌ها هنوز به دنبال توسعه دهندگانی هستند که در سه فریمورک اصلی فرانت-اند تجربه کاری داشته باشند، اما وب سایت‌های مطرح مختلفی هم وجود دارند که با Svelte ساخته شده‌اند. مانندIBM ،Apple ،Philips ،GoDaddy ،1Password  و The New York Times. همچنین می‌توانید لیست گسترده‌ای از شرکت‌هایی که از Svelte استفاده می‌کنند را در پایین وب سایت Svelte بیابید.

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

جمع‌بندی

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

همه چیز می‌تواند در دنیای فریمورک های جاوا اسکریپت به سرعت تغییر کند و امیدوارم شما نیز به اندازه من اطمینان داشته باشید که Svelte از مزایا و پتانسیل‌هایی برخوردار است که می‌تواند آن را به برترین فریمورک فرانت-اند جاوا اسکریپت تبدیل کند.

آیا قبلا با Svelte کار کرده‌اید؟ تجربه شما چطور بوده؟

نظرات خود را در بخش زیر با ما در میان بگذارید.

منبع