10 دلیل برای اینکه Svelte را به هر توسعه دهنده وب جدیدی پیشنهاد دهیم

بلوک‌های کد در حال حاضر با Svelte برجسته نشده‌اند، بنابراین برجسته سازی سینتکس و قالب بندی ممکن است 100٪ صحیح نباشد.

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

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

چند سال پیش، نوشتن کد با jQuery وقتی از جاوااسکریپت خالص ناشی می‌شد، به عنوان یک مکاشفه بود. بعد از اولین پروژه‌ام، کار با Angular 2 را شروع کردم و با jQuery ناگهان احساس خستگی شدیدی به من دست داد. در حال حاضر، React چیز جالبی است و انگولار در مقایسه با او بسیار پیچیده است. احتمالا می‌توانید حدس بزنید که به کجا می‌رود.

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

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

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

شاید در مورد Svelte در مقاله‌هایی مانند مقایسه RealWorld از Front-End Frameworks و نظرسنجی‌های توسعه دهندگان مانندState of JS Survey به عنوان یکی از بهترین فریمورک‌های رتبه بندی در مورد اندازه بسته نرم‌افزار، عملکرد، خطوط کد و مهمتر از همه رضایت توسعه دهنده شناخته شده است.

در مقایسه با کتابخانه‌های معروف 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 ارائه داد. با توجه به بررسی او از کاراکترهای مورد نیاز برای نوشتن منطق جمع ساده دو عدد، یک کامپوننت React حدود 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>

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

4 - مدیریت آسان عبارات global خارج از چارچوب

نیازی به ابزار پیچیده مدیریت state شخص ثالث مانند 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}

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

با استورهای 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 های حل نشده / رد شده ندارید، فقط می‌توانید متغیرهای درون قالب خود را تعریف کنید.

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
• افکت‌های easing مانند bounce، cubic، elastic و موارد دیگر

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

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

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

برای جلوگیری از تعصبانه به نظر رسیدن این مقاله، چند مورد منفی در Svelte نیز آورده‌ایم :

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

از یک طرف ما از صادرات پیش فرض فایل‌های 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}

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

دریافت props در کامپوننت فرزند با export let

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

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

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

<p>{message}</p>

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

سرعت توسعه

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

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

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

کمبود پروژه‌های موجود

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

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

جمع‌بندی

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

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

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

نظرات خود را در بخش زیر با ما در میان بگذارید. امیدوارم این مقاله برایتان مفید واقع شود.

منبع