به احتمال زیاد الان دارید این فکر رو می کنید:”وای خدای من، یک فریمورک جدید Frontend رو باید یاد بگیرم؟؟؟”

آره! Svelte فریمورک جدید ظاهرا جذابی است که در میان توسعه دهندگان وب بحث و گفتگو زیادی در مورد آن می شود. در بررسی اخیر State of JS survey of 2019 ، پیش بینی شده است که این تکنولوژی به روز در آینده ممکن است موقعیت فریمورک های دیگری مانند React و Vue را در دهه آینده به دست بگیرد.

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

Svelte چیست؟

Svelte یک فریمورک مبتنی بر کامپوننت مشابه React و Vue است.اما تفاوت Svelte چیست؟

Svelte به جای تفسیر کد برنامه در run time ، برنامه شما را در build time به ideal JavaScript تبدیل می کند.

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

ویژگی های کلیدی Svelte

در ادامه برخی از ویژگی های مهم Svelte ، و همچنین تفاوت های کلیدی با سایر فریمورک ها را لیست می کنیم.

استفاده نکردن از Virtual DOM

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

با Svelte کد به vanilla JavaScript بدون چارچوب کامپایل می شود.این عملیات ضمانت میکند که حجم کد کوچکتر واجرای آن سریعتر و نیازی به استفاده از DOM Virtual نیست.

Code کمتر

چه کسی دوست ندارد کد کمتری بنویسد. هرچه کد کمتر باشد ، اشکالات کمتر است.هدف این نیست که شما خوانایی کد را فدای کد کمتر کنید. من در مورد نوشتن کد کمتر صحبت می کنم ، بدون اینکه مانع خوانایی شود. Svelte با هدف کاهش میزان نوشتن کد برای برنامه نویسان ایجاد شده است.در مقایسه با سایر فریم ورک های مدرن Frontend، کد boilerplate به همراه Svelte وجود دارد.

بیایید به یک مثال نگاه کنیم تا ببینیم Svelte و React چگونه کار می کنند.. بیایید نمونه ای را برای به روز کردن state کامپوننت ها با استفاده از React و Svelte بررسی کنیم.

React

// Update state in React
const [count, setCount] = useState(0);

function increment() {
  setCount(count + 1);
}

// Update state in React

const [count, setCount] = useState();

function increment() {

setCount(count + 1);

}

Svelte

// Update state in Svelte

let count = 0;

function increment() {
  count += 1;

// Update state in Svelte

let count = ;

function increment() {

count += 1;

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

متغییر ها در جاوا اسکریپت (JavaScript) و تفاوت بین var و let و const

در React برای بروزرسانی مقدارstate باید از useState hook یا setState استفاده کنیم در حالی که در Svelte این امر به شده ساده شده است.شما می توانید state را به صورت مستقیم با استفاده از assignment operator بروزرسانی کنید.

این جنبه نوشتن کد کمتر با استفاده از Svelte برای من بسیار جذاب است. من مطمئن هستم که این یکی از مهمترین دلایل افزایش علاقه برنامه نویسان به این فریمورک جدید است.

مدیریت stateدر یک برنامه یکی از سخت ترین مشکلات برای حل است. Svelte قصد دارد از روند استفاده از کتابخانه های پیچیده state management مانند Redux دور شود. برای درک بهتر این مفهوم ، می توانید ویدئو یوتیوب که توسط ریچ هریس بنیانگذار Svelte تهیه شده است را تماشا کنید. در این ویدئو او در مورد تجدید نظر در مورد واکنش پذیری در فریمورک های frontend صحبت می کند. این فیلم شروع خوبی برای درک Svelte خواهد بود.

نمونه قطعه کد Svelte

من اخیراً با Svelte شروع به کار کرده ام و مشغول خواندن و بررسی قطعه کدهای آن هستم. اولین چیزی که به ذهنم خطور می کند این است که “وای ، این خیلی ساده است”. کدی که با Svelte نوشته شده ، بسیار ساده و آسان برای درک است. من مطمئن هستم که توسعه دهندگان مبتدی ضمن یادگیری این فریمورک در مقابل برخی از فریمورک های موجود ، مسیر بسیار ساده تری در پیش دارند.

بیایید به برخی از قطعه کدها نگاهی بیندازیم تا احساس Svelte را بدست آوریم.

تمام کد ها در tag های <script> نوشته شده اند.

Rendering HTML

در نمونه کد زیر ، ما نشان می دهیم که چگونه HTML می تواند برای render چیزی ترکیب شود.

<script>
	let string = `here's some <strong>HTML!!!</strong>`;
</script>

<p>{@html string}</p>

// Output
here's some HTML!!!

let string = `here's some <strong>HTML!!!</strong>`;

</script>

<p>{@html string}</p>

// Output

here's some HTML!!!

Styling a component

<style>
	p {
	    color: burlywood; } 
</style>

<style>

p {

color: burlywood; }

</style>

مثال بالا نشان می دهد که شما چطور می توانید به کامپوننت های خود استایل بدهید.استایل های CSS باید درون بلاک <style> قرار بگیرند که برای هر کامپوننت منحصر به فرد است.استایل های موجود در کد بالا فقط به tag های p موجود در این کامپوننت اعمال می شود.

شمارنده با استفاده از Svelte

<script>
	let count = 0;

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

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

let count = ;

function handleClick() {

count += 1;

}

</script>

Clicked {count} {count === 1 ? 'time' : 'times'}

</button>

نتیجه گیری

من کاملاً از Svelte هیجان زده ام. و به نظر می رسد امسال توسعه دهندگان علاقه زیادی به Svelte نشان داده اند. من مشتاقانه منتظر هستم تا ببینم چه چیزی برای Svelte در سال 2020 وجود دارد.

[منبع]