اسولت ( Svelte )! فریم ورک رویایی برای ساخت وب اپلیکیشن و وبسایت های سریع!

در این روزگار که بازار استفاده از فریم ورک های جاوا اسکریپت برای ساخت وب اپلیکیشن خیلی داغ است بد نیست نگاهی به فریم ورک خوش ساخت و خلاقانه ی اسولت بی اندازیم.

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

اما اسولت ( Svelte ) کامپایلر، فریمورک و ابزار نوظهور دنیای فرانت اند است که حرف های جدیدی برای گفتن دارد! در می 2013 درحالیکه کتابخانه ری اکت اولین نسخه اپن سورس خود را منتشر کرده بود در همان حوالی اولین نسخه کتابخانه Reactive.js توسط ریچ هریس ادیتور گرافیست روزنامه نیویورک تایمز منتشر شد و چون از مفهوم ری اکتیو بودن همانند کتابخانه ری اکت پشتیبانی میکرد تبدیل به یک رقیب برای کتابخانه نوظهور ری اکت شده بود و توانست به اندازه ای توجه توسعه دهندگان را به خود جذب کند. بعد از آن ابزار دیگری توسط آقای ریچ هریس توسعه داده شد که Rollup نام گرفت. رول آپ درواقع یک ماژول باندلر و کامپایلر به حساب می آمد که همانند وب پک، پارسل و اسنوپک قطعه کدهای یک پروژه وب را که شامل جاوا اسکریپت، اچ تی ام ال، سی اس اس، تایپ اسکریپت و غیره میشد را ترکیب و به یک فایل جاوا اسکریپت واحد استاندارد برای رندر در مرورگرهای مختلف تبدیل میکرد.

https://rollupjs.org/guide/en/

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

https://svelte.dev/

چیزی که اسولت را از بقیه رقبا متمایز میکرد استفاده از باندلر و کامپایلر Rollup بود. به این معنا که شما در یک پروژه اسولت دو نوع جاوا اسکریپت خواهید داشت یکی با فرمت ts. و js. که سینتکس کامپایلر Rollup را میشناسد و دیگری cjs. که همان جاوا اسکریپت خام است. برخلاف دیگر فریم ورک های دیگر اسولت کارهای مربوط به باندلینگ را در هنگام کامپایل انجام میدهد و نتیجه آن کاهش حجم باندل و کد برنامه به چند کیلوبایت است. سایز باندل اسولت بصورت معمولی 3.8kB و بصورت فشرده تنها 1.5kB است!

برای درک بهتر این قضیه اولین وب اپ خود را با دستورات npm ایجاد کنید و سرعت ایجاد و اجرای برنامه را با بقیه رقبا مقایسه کنید:

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install
npm run dev

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

رندر سمت سرور ( Server Side Rendering/SSR)

همانند فریم ورک NextJs برای ری اکت که یکی از ویژگی های آن رندرینگ سمت سرور برای بهبود سئو است برای اسولت نیز چنین ابزاری توسط کمپانی ورسل ( Vercel ) توسعه داده شده است که SvelteKit نام دارد و درحال حاضر دارای نسخه ی پایدار بتا است:

https://kit.svelte.dev/

npm init svelte@next my-app
cd my-app
npm install
npm run dev -- --open

درحال حاضر پروژه Svelte و SvelteKit هردو از طرف کمپانی سازنده نکست جی اس Vercel پشتیبانی میشوند و ریچ هریس و تیم Core اسولت روی آن کار میکنند. بدلیل توسعه و پشتیبانی اسولت کیت در ورسل امکانات و ویژگی های آن بسیار شبیه به Nextjs است و در مصاحبه ای ریچ هریس به این اشاره کرده است که اسولت کیت درواقع یک Nextjs بهتر و قوی تر خواهد بود!

پشتیبانی از NativeScript برای ساخت اپلیکیشن نیتیو

اسولت توسط نیتیو اسکریپت پشتیبانی میشود و این امکان را به شما میدهد تا همانند ری اکت نیتیو با یک کدبیس برای همه ی پلتفرم های موجود اپلیکیشن سازگار تولید کنید:

https://svelte-native.technology/
https://kit.svelte.dev/docs/adapters
https://docs.nativescript.org/tutorial/svelte

بدون DOM مجازی ( Virtual DOM )!

ری اکت با تبلیغ ویژگی Virtual Dom خود ادعا میکند که لود سریع تری نسبت به بقیه رقبا دارد ولی اسولت بدون DOM مجازی و استفاده از DOM واقعی مانند انگولار سریع تر از همه فریم ورک های موجود است!

سینتکس تمیز و مرتب اسولت با کمک قابلیت بایند دوطرفه

گاها اتفاق افتاده است که توسعه دهندگان فرانت اند از ساختار فایل و کدهای ری اکت گله مند باشند و بگویند هرچقدر هم تمیز بنویسیم رفته رفته با بزرگ شدن پروژه کدها اصطلاحا تبدیل به اسپاگتی کد :) میشوند و توسعه ی آنها غیرممکن خواهد شد. به این دلیل است که ری اکت از بایند دوطرفه پشتیبانی نمیکند و به این ترتیب نمیتوانید تمپلیت صفحه را از توابع جاوا اسکریپت جدا کنید و این ویژگی باعث سردرگمی برنامه نویسان بعدی یک پروژه خواهد شد. اسولت همانند انگولار از بایند دو طرفه پشتیبانی میکند و شما با خیال راحت میتوانید ساختار و فایل ها و کدهای خود را مرتب و جداگانه پیاده سازی کنید و به این ترتیب خطر نزدیک شدن به اسپاگتی کد تا حدود زیادی کاهش پیدا میکند. در اسولت متغیرها تا حدودی بصورت پیشفرض ری اکتیو عمل میکنند و شما مجبور نخواهید بود تا مانند ری اکت برای هرکاری مانند رندرینگ CSR ( Client Side Rendering ) از استیت ها استفاده کنید. اسولت دارای سینتکس کوتاه، مفهومی و نزدیک به جاوا اسکریپت وانیلی است.

نمونه کد ساخت یک عملکرد ری اکتیو در در یک کامپوننت ری اکت:

import React, { useState } from 'react';
function Example() {
let [count, setCount] = useState(0);
return (
<>
<p>{count}</p>
<button ={() => setCount(count + 1)}>+</button>
</>
);
}
export default Example;

نمونه کد ساخت یک عملکرد ری اکتیو در یک کامپوننت اسولت:

let count = 0;
<div>
<p>{count}</p>
<button on:click={() => count++}>+</button>
</div>

قابلیت Store و Context بصورت توکار

برای ارتباط بین کامپوننت ها از پدر به فرزند و بلعکس همانند ری اکت و انگولار میتوانید از روش props، بایندینگ های دوطرفه و بایندینگ رویداد ها استفاده کنید و دیتا را بین کامپوننت ها پاس بدهید.

https://svelte.dev/docs#derived

ولی اگر به این احتیاج دارید تا بین کامپوننت ها بصورت ری اکتیو و زنده ارتباط برقرار کنید و یک استیت سراسری در برنامه خود داشته باشید اسولت این قابلیت را با عنوان Store با متدهای Readable و Writable و حالت سفارشی در نظر گرفته است و مانند ری اکت احتیاج به نصب ابزارهایی مانند Redux یا استفاده از localstorage نخواهید داشت.

https://svelte.dev/docs#readable
https://svelte.dev/docs#writable
https://svelte.dev/tutorial/custom-stores

همچنین قابلیت ContetxApi با متد های setContext و getContext درنظر گرفته شده است تا بتوانید بدون درنظرگرفتن استیت، به دیتاها از کامپوننت پدر به تمام فرزندهای آن کامپوننت دسترسی داشته باشید.

https://svelte.dev/tutorial/context-api

محیط توسعه ( Development Server ) بسیار سریع

اگر از انگولار استفاده کرده باشید و وقتی پروژه شما بزرگ میشود قطعا از سرعت پایین سرور توسعه رنج برده اید. اسولت با کمک باندلر سریع Rollup به شما یک تجربه سریع محیط توسعه را خواهد داد. اسولت از Rollup برای باندلینگ سرور توسعه استفاده میکند ولی SvelteKit برای باندلینگ سمت سرور توسعه از ابزار نوظهور Vite که سرعت باورنکردنی با استفاده از قابلیت هات ریلود دارد استفاده میکند.

https://vitejs.dev/guide/#trying-vite-online

چه سایت هایی تابحال از Svelte یا SvelteKit استفاده کرده اند؟

در لینک های زیر میتوانید لیست سایت هایی که از Svelte یا SvelteKit استفاده کرده اند را مشاهده کنید:

https://www.wappalyzer.com/technologies/javascript-frameworks/svelte
https://www.wappalyzer.com/technologies/ui-frameworks/sveltekit/

اسولت فریمورک برتر سال 2020 شناخته میشود:

https://2021.stateofjs.com/en-US/libraries/front-end-frameworks

ری اکتیویتی و انیمیشن

اسولت بصورت پیشفرض از انیمیشن پشتیبانی میکند و شما احتیاج به نصب پکیج خاصی برای انیمیشن های وب اپلیکیشن خود نخواهید داشت:

https://svelte.dev/tutorial/animate

اما اگر با اینحال احتیاج به موشن گرافی و انیمیشن های سه بعدی پیشرفته داشتید میتوانید از ابزار svelte cubed برای ساخت انیمیشن های سه بعدی پیشرفته از Svelte Cubed استفاده کنید. اسولت کیوبد از کتابخانه قدرتمند Three.js برای ساخت موشن گرافی ها استفاده میکند:

https://svelte-cubed.vercel.app/

قابلیت های مشابه SvelteKit و NextJS:

از قابلیت های مشابه NextJs و SvelteKit میتوان به internationalization یا همان سایت چند زبانه، سرور express.js داخلی برای ایجاد Api Route ها، روتینگ با بر اساس فولدر، کامپوننت فرم، پشتیبانی از tailwindcss و daisyUi، CSS Scopes،

اسولت را در استک بلیتز امتحان کنید!

https://stackblitz.com/edit/vitejs-vite-fwe27e?file=index.html&terminal=dev

مرجع رسمی اسولت برای اطلاع از اخبار، کامپوننت های جدید و ابزارها:

https://sveltesociety.dev/

در اینجا میتوانید نقاط قوت و ضعف Nextjs و SvelteKit را مشاهده کنید:

https://github.com/jasongitmail/svelte-vs-next#:~:text=SvelteKit%20can%20set%20headers%20for,can%20be%20set%20via%20vercel.

برخی از کامپوننت ها و پکیج های محبوب فریم ورک Svelte :

ساخت سایت چند زبانه:

https://github.com/kaisermann/svelte-i18n

بهینه ساز تصاویر:

https://github.com/matyunya/svelte-image

بهینه ساز واکشی داده:

https://github.com/SvelteStack/svelte-query

فونت آسوم:

https://github.com/RobBrazier/svelte-awesome

رندرینگ فایل PDF:

https://github.com/vinodnimbalkar/svelte-pdf

ریداکس کانکت:

https://github.com/kolodziejczak-sz/svelte-redux-connect

انیمیشن های پارتیکلز:

https://github.com/matteobruni/tsparticles/blob/main/components/svelte/README.md

کار با چارت ها:

https://github.com/Rich-Harris/pancake

کامپوننت های UI:

https://github.com/matyunya/smelte

کامپوننت های Ui سیستم مایکروسافت:

https://fluent-svelte.vercel.app/

کامپوننت های متریال یو آی:

https://svelte-mui.vercel.app/

سلکت باکس سفارشی:

https://github.com/rob-balfre/svelte-select