svelte چیست

امروزه با توجه به وجود کتابخونه ها و فریمورک های قوی جاوا اسکریپتی مثل react,vue و Angular کسی فکر نمی کرد که یک فریمورک جدید در حوزه وب معرفی بشه.اما با معرفی svelte و رشد سریع اون، ارزش این رو داره که یکبار دیگه بگیم : یک فریمورک جدید جاوا اسکریپت برای کمک به توسعه دهندگان و شرکت های فعال در حوزه IT آمده است.

در این مقاله قصد دارم svelte که یک فریمورک front-end جدید برای تولید برنامه هایی با عملکرد عالی معرفی کنم.امیدوارم تا پایان بدون تفریط و افراط این معرفی را پیش ببرم.اما قبل از آن به reactivity در توسعه app رو مورد بحث قرار میدیم.

reactivity در app development چیست؟

زمانی یک برنامه reactive است که هر گونه تغییری در مقادیر به عنوان مثال در user input به صورت خودکار در DOM که یک ساختار درختی برای نمایش صفحه HTML به کاربر را ارائه می دهد، قرار گیرد.

با معرفی فریمورک ها و کتابخونه های مدرن وب مثل react,vue و Angular برای ساخت برنامه های غیرهمزمان و رویداد محور،امکان ایجاد اپلیکیشن های reactive فراهم گردید.برای این منظور آن ها از تکنیک هایی مثل Virtual DOM استفاده می کنند که برای هر تغییر نیازی به بروزرسانی کل DOM نیست و فقط مواردی که مورد نیاز است بروز رسانی میگردد.پیشنهاد میکنم مقاله Virtual DOM در React رو برای درک این موضوع بخونید.

هدف نهایی Svelte’s نیز ایجاد برنامه های reactive است.اما برای رسیدن به این هدف از تکنیک های دیگری استفاده می کند.

Svelte چگونه کار می کند؟

وقتی که می بینید رویکرد Svelte’s با تمامی فریمورک ها و کتابخونه های محبوبی که در بالا معرفی شد، متفاوت است متوجه می شوید که چرا این همه در مورد آن در چند سال اخیر صحبت بوده است.Svelte کدی که شما می نویسید رو در زمان build کامپایل می کند، بنابراین تنها pure JavaScript به صورت مستقیم در DOM دستکاری میکند تا در مرورگر نمایش داده شود.به همین دلیل disappearing framework نامیده می شود و تا زمانی که کدهای برنامه در مرورگر نمایش داده نشود، هیچ فریمورکی وجود ندارد.

یک Svelte app از یک یا چند کامپوننت که ترکیبی از HTML , CSS و Javascript در فایل هایی با پسوند svelte . ایجاد می شود.
درست مانند React یا Vue فریمورک Svelte نیز reactivity برنامه را با همگام سازی DOM با app state مدیریت می کند.
اما به جای انجام دادن آن در مرورگر،کدهای HTML,CSS و JavaScript را در زمان Build به vanilla JavaScript کامپایل می کند.
Svelte را می توان برای تهیه یک app مستقل یا به عنوان بخشی از app دیگر ، به همراه فریمورک ها و کتابخانه های دیگر استفاده کرد (یک ویژگی منحصر به فرد نیست ، زیرا همین کار را می توان با React ، Vue یا Angular انجام داد) یا حتی برای توسعه مستقل کامپوننت هایی که در هر جایی کار می کنند ، بدون اینکه به هیچ فریمورک متعارف وابسته باشند، استفاده کرد.

به قطعه کد زیر برای درک ساختار svelte توجه کنید:

<script>
	import { quintOut } from 'svelte/easing';
	import { fade, draw, fly } from 'svelte/transition';
	import { expand } from './custom-transitions.js';
	import { inner, outer } from './shape.js';

	let visible = true;
</script>

<style>
	svg {
		width: 100%;
		height: 100%;
	}

	path {
		fill: white;
		opacity: 1;
	}

	label {
		position: absolute;
		top: 1em;
		left: 1em;
	}

	.centered {
		font-size: 20vw;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		font-family: 'Overpass';
		letter-spacing: 0.12em;
		color: #676778;
		font-weight: 400;
	}
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://reactapp.ir/5-es2019-features-you-can-use/" target="_blank" class="IRPP_ruby"><!-- INLINE RELATED POSTS 1/1 //--><style> .IRPP_ruby , .IRPP_ruby .postImageUrl , .IRPP_ruby .centered-text-area { height: 130px; position: relative; } .IRPP_ruby , .IRPP_ruby:hover , .IRPP_ruby:visited , .IRPP_ruby:active { border:0!important; } .IRPP_ruby .clearfix:after { content: ""; display: table; clear: both; } .IRPP_ruby { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #2C3E50; } .IRPP_ruby:active , .IRPP_ruby:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #34495E; } .IRPP_ruby .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 31.59%; } .IRPP_ruby .centered-text-area { float: left; width: 65.65%; padding:0; margin:0; } .IRPP_ruby .centered-text { display: table; height: 130px; right: 0; top: 0; padding:0; margin:0;float: left;width: 100%; } .IRPP_ruby .IRPP_ruby-content { display: table-cell; margin: 0; padding: 0 0px 0 74px; position: relative; vertical-align: middle; width: 100%; } .IRPP_ruby .ctaText { border-bottom: 0 solid #fff; color: #3498DB; font-size: 13px; font-weight: bold; margin: 0; padding: 0; } .IRPP_ruby .postTitle { color: #ECF0F1; font-size: 16px; font-weight: 600; margin: 0; padding: 0; } .IRPP_ruby .ctaButton { background: url(https://reactapp.ir/wp-content/plugins/intelly-related-posts-pro/assets/images/next-arrow.png)no-repeat; display: inline-block; height: 130px; width: 54px; } .IRPP_ruby .ctaButton { background-color: inherit; margin-left: 10px; position: absolute; left: 0; top: 0; } .IRPP_ruby:after { content: ""; display: block; clear: both; } </style><div data-bg="https://reactapp.ir/wp-content/uploads/es2019-300x169.png" class="postImageUrl rocket-lazyload" style=""></div><div class="centered-text-area"><div class="centered-text"><div class="IRPP_ruby-content"><div class="ctaText"></div><div style="clear:both"></div><div class="postTitle">5 ویژگی ES2019</div></div></div><div class="ctaButton"></div></div></a></div>
	.centered span {
		will-change: filter;
	}
</style>

{#if visible}
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
		<g out:fade="{{duration: 200}}" opacity=0.2>
			<path
				in:expand="{{duration: 400, delay: 1000, easing: quintOut}}"
				style="stroke: #ff3e00; fill: #ff3e00; stroke-width: 50;"
				d={outer}
			/>
			<path
				in:draw="{{duration: 1000}}"
				style="stroke:#ff3e00; stroke-width: 1.5"
				d={inner}
			/>
		</g>
	</svg>

	<div class="centered" out:fly="{{y: -20, duration: 800}}">
		{#each 'SVELTE' as char, i}
			<span
				in:fade="{{delay: 1000 + i * 150, duration: 800}}"
			>{char}</span>
		{/each}
	</div>
{/if}

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

<link href="https://fonts.googleapis.com/css?family=Overpass:100,400" rel="stylesheet">

import { quintOut } from 'svelte/easing';

import { fade, draw, fly } from 'svelte/transition';

import { expand } from './custom-transitions.js';

import { inner, outer } from './shape.js';

let visible = true;

</script>

<style>

svg {

width: 100%;

height: 100%;

}

path {

fill: white;

opacity: 1;

}

label {

position: absolute;

top: 1em;

left: 1em;

}

.centered {

font-size: 20vw;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

font-family: 'Overpass';

letter-spacing: 0.12em;

color: #676778;

font-weight: 400;

}

.centered span {

will-change: filter;

}

</style>

{#if visible}

<path

in:expand="{{duration: 400, delay: 1000, easing: quintOut}}"

style="stroke: #ff3e00; fill: #ff3e00; stroke-width: 50;"

d={outer}

<path

in:draw="{{duration: 1000}}"

style="stroke:#ff3e00; stroke-width: 1.5"

d={inner}

</g>

</svg>

{#each 'SVELTE' as char, i}

<span

in:fade="{{delay: 1000 + i * 150, duration: 800}}"

>{char}</span>

{/each}

</div>

{/if}

<label>

toggle me

</label>

مزایای Svelte

Svelte امکانات کاملی را برای کیفیت و سرعت توسعه ارائه می دهد که :

یکی از مزایای اصلی Svelte را میتوان وابستگی کم اون به dependencies اضافی دانست و شما می توانید تمرکز خود را بر روی کد های خود بگذارید تا اینکه درگیر درک مفاهیم پیچیده ای مثل Redux شوید.
وجود نداشتن virtual DOM- از آنجایی که app به vanilla JS کامپایل میشود،سرعت بالایی خواهد داشت.
Scope شدن استایل ها در Js به جای Css.
استفاده نکردن از کتابخانه های state management – این فریمورک یک minimalistic state management را در درون خود دارد.

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

آیا باید وقت خود را برای یادگیری Svelte سرمایه گذاری کنم؟

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

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