Svelte چیست

روز به روز برنامه‌های تحت وب بیشتری ساخته می‌شوند و کاربران، این برنامه‌های رو به ‌رشد را به دلیل سادگی، سرعت زیاد و دسترس‌پذیری بالا انتخاب می‌کنند. اپلیکیشن‌های تک صفحه‌ای (SPA) بخش عظیمی از این جریان را به خود اختصاص داده‌اند که معمولا با فریم ورک‌هایی مانند انگولار، Vue.js و React.js ساخته می‌شوند. این فریم ورک‌های محبوب به توسعه دهندگان کمک می‌کنند تا بهترین تجربه‌ی کاربری ممکن را در پلتفرم‌های مختلف و در زمان کوتاهی ارائه دهند. با این حال، توسعه دهندگان علاقه‌مند و پیشرو که این بازار را هدف قرار می‌دهند، می‌توانند با یک فریم ورک جدید و کاربردی وارد عرصه‌ی رقابت شوند.

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

Svelte چیست؟

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

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

Svelte سریع است

همان‌طور که در بخش قبل گفتیم، زمان اجرای برنامه با Svelte سریع است، زیرا این فریم ورک تنها بخش‌هایی از رابط کاربری را بروز می‌کند که تغییر کرده است. همچنین برخلاف Vue.js و دیگر چارچوب‌هایی که از DOM مجازی استفاده می‌کنند، Svelte از یک DOM مجازی استفاده نمی‌کند. اما DOM مجازی چیست؟

هنگامی که یک صفحه در مرورگر کاربر ساخته می‌شود، المان‌هایی روی صفحه‌ نمایش داده می‌شود که به آن‌ها UI می‌گویند. این المان‌ها در قالب یک درخت ساخته می‌شوند که همان DOM یا Document Object Model نامیده می‌شود. نمونه‌ای از این درخت را در شکل زیر می‌بینید:

به دلیل درختی بودن این ساختار نیاز است تا برای شناسایی هر تغییر، درخت از ریشه پیمایش شود تا به گره‌ی مورد نظر برسد و سپس برای اعمال تغییرات دوباره این مسیر باید پیمایش شود. DOM مجازی با هدف بهینه کردن این عملیات به وجود آمد. DOM مجازی یک ارائه‌ی مجازی از این درخت در کدهای جاوا اسکریپت است. عملیات شناسایی گره در این DOM انجام می‌شود و سپس گره و تغییراتی که باید اعمال شوند به DOM اصلی فرستاده می‌شوند.برای مثال React برای کاهش عملیات مرورگر در هنگام استفاده از منابع، از DOM مجازی کمک می‌گیرد. و با استفاده از آن، عملیات شناسایی و اعمال را به صورت یک‌جا در DOM اصلی اعمال می‌کند.

اما Svelte همین عملیات را نیز به صورت بهینه‌تر انجام می‌دهد. همانند React، در این‌جا نیز تغییرات با State مدیریت می‌شوند. اما به جای انجام دادن آن در مرورگر، کدهای یک کامپوننت را در زمان Build به vanilla JavaScript کامپایل می‌کند.

Svelte کم‌حجم است.

حجم یک برنامه‌ی کامپایل شده با Svelte نسبت به سایر فریم ورک‌های جاوا اسکرپت کمتر است. برای مثال، حجم یک برنامه‌ی ساده‌ی hello world ساخته شده حدود 124 کیلوبایت است. این حجم کم برای برنامه‌های تلفن همراه بسیار مناسب است.

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

برای مقایسه‌ی فرآیند راه‌اندازی، یک پروژه‌ی React را در نظر بگیرید. با دستور yarn build، Webpack + Babel برای ساخت بسته از فایل‌های پروژه فراخوانی می‌شود، آن‌ها را تمیز می‌کند، کتابخانه‌های react-dom و react را به مجموعه اضافه می‌کند، فایل خروجی را بسته‌بندی می‌کند و در نهایت یک فایل خروجی تولید می‌شود.

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

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

ساختار یک کامپوننت در Svelte چگونه است؟

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

• بخش با تگ script: تگ اسکریپت، یک بلوک جاوا اسکریپت است که متغیرها، توابع و شرط‌های لازم در آن تعریف می‌شوند.
• بخش با تگ style: در این تگ، استایل‌ها و ویژگی‌های ظاهری یک کامپوننت و نحوه‌ای که قرار است کاربر آن را ببیند تعریف می‌شود. درست مشابه با فایل‌های CSS.
• بخش با تگ template: همانند بخش Html عمل می‌کند و مانند رابط، دو بخش قبل را به یکدیگر متصل می‌کند.

برای مثال، فرض کنید می‌خواهید نام برنامه بالای تمامی صفحات مشاهده شود. برای این کار کافی است تا کد زیر را بنویسید:

script
  export let name;
/script

<style>	
  h1 {
    color: purple;
}
</style>

<h1>{name}</h1>

Svelte فریم ورکی است که سعی دارد ماژولار بودن (modularity) را وارد بازی کند. این فریم ورک می‌کوشد تا ساختاری مشابه با معماری MVC را ایجاد کند. این معماری نه تنها در جدا کردن اجزای مختلف بلکه در جداسازی منطق، دیدگاه و الگو نیز موفق است. اگر با این معماری آشنا نیستید.

مزایای Svelte چیست؟

Svelte دارای نقاط قوت زیادی است که باعث شده تا توسعه دهندگان زیادی به آن علاقه‌مند شوند. برخی از این نقاط مثبت عبارتند از:

• Svelte از SSR یا Server Side Rendering پشتیبانی می‌کند و باعث می‌شود تا اجرای برنامه به سرور منتقل شده و برای نمایش حالت قبلی یک صفحه نیاز به رندر کردن دوباره‌ی آن نباشد! تصویر زیر به شما برای فهم بهتر این سازوکار کمک می‌کند:

معایب Svelte چیست؟

هر فریم ورکی در کنار مزایایی که به توسعه دهندگان می‌دهد، از معایبی نیز برخوردار است. برخی از معایب Svelte عبارتند از:

• هیچ نوع داده‌ای در Svelte تعریف نشده است. این ممکن است برای افرادی که عادت کرده‌اند از تفاوت‌های میان انواع داده مانند رشته‌ها، اعداد و آرایه‌ها در کدنویسی استفاده کنند، دردسرساز باشد. البته کتابخانه‌هایی برای رفع این مشکل نوشته شده است که از آن‌ها می‌توان به svelte-typescript-rollup، svelte-typescript-parcel و svelte-preprocess اشاره کرد.
• از آنجا که Svelte یک کامپایلر است، اجازه می‌دهد تا پروژه حتی با خطاهای import و export کامپایل شود. در صورتی که سایر فریم ورک‌ها در همان مرحله‌ی کدنویسی شما را باخبر خواهند کرد.
• برنامه نویس باید با ابزارهایی نظیر Webpack برای کار با وابستگی‌های فایل‌هایی مانند تصاویر، فونت‌ها، استایل‌ها و... به صفحات وب آشنا باشد.
• جامعه‌ی کوچکی دارد و ممکن است برای برنامه نویسان تازه وارد استرس‌زا باشد.
• نسبت به سایر فریمورک‌ها، کتابخانه‌های کمتری هنگام کار با Svelte، به صورت مجزا وجود دارد. برای مثال در حال حاضر برای React بسته‌های بیشتری با NPM در دسترس است. اما با انتخاب Svelte مجبور خواهید بود که کتابخانه‌ی مورد نیاز خود را شخصا بنویسید. شکل زیر تعداد کتابخانه‌های موجود برای هر فریم ورک جاوا اسکریپت را نشان می‌دهد:

نصب و شروع کار با Svelte

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

گام اول – نصب نود جی اس (Node.js)

برای نصب و اجرای افزونه‌های مختلف، نیاز به NPM دارید. Node.js ماژول‌های زیادی (module) را درون خود دارد. زمانی که Node.js را نصب می‌کنید، NPM یا node package manager هم در پس زمینه نصب می‌شود که با استفاده از آن‌ها می‌توانید بسته‌ها و ماژول‌های مربوط به پروژه‌ی خود یا کل سیستم را مدیریت کنید.

گام دوم – نصب تمپلیت

برای ساخت و راه‌اندازی پروژه، باید دستور زیر را اجرا کنید:

npx degit sveltejs/template my-first-app

این فرمان یک پروژه‌ی Svelte با نام my-first-app را ایجاد می‌کند. شما می‌توانید نام دلخواه خود را به جای این نام انتخاب کنید. پس از تکمیل فرمان بالا یک الگوی پروژه Svelte خواهید داشت که خالی است و بسته‌های NPM مورد نیاز هنوز نصب نشده‌اند.

گام سوم – نصب بسته‌ها

ابتدا با دستور cd به فولدری که پروژه در آن قرار گرفته بروید:

cd my-first-app

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

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

npm install

گام چهارم – اجرای پروژه

با دستور زیر پروژه‌ی خود را اجرا کنید:

npm run dev

توجه داشته باشید که با این دستور، برنامه به صورت خودکار روی لوکال هاست و پورت 5000 آماده‌ی اجراست. برای باز شدن صفحه باید در مرورگر خود، آدرس http://localhost:5000 را وارد کنید. اگر همه چیز بدون خطا باشد، صفحه‌ی زیر برای شما نمایش داده می‌شود:

جمع‌بندی:

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