روز به روز برنامه‌های تحت وب بیشتری ساخته می‌شوند و کاربران، این برنامه‌های رو به رشد را به دلیل سادگی، سرعت زیاد و دسترس پذیری بالا انتخاب می‌کنند. اپلیکیشن‌های تک صفحه ای (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 را ایجاد کند. این معماری نه تنها در جدا کردن اجزای مختلف بلکه در جداسازی منطق، دیدگاه و الگو نیز موفق است. اگر با این معماری آشنا نیستید، می‌توانید مقاله ی "MVC چیست به زبان ساده" را مطالعه کنید.

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

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

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

• در بخش‌های قبل اشاره کردیم که Svelte کم حجم و سریع است.

• برنامه نویسان سایر فریم ورک‌ها مانند React در زمان کوتاهی به راحتی با آن ارتباط برقرار می‌کنند. پس برای تشکیل تیم مشکلی نخواهید داشت.

• جامعه ی برنامه نویسانی که با آن کار می‌کنند فضای به شدت دوستانه و روبه رشدی دارد.

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

معایب 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 هم در پس زمینه نصب می‌شود که با استفاده از آن‌ها می‌توانید بسته‌ها و ماژول‌های مربوط به پروژه ی خود یا کل سیستم را مدیریت کنید. برای نصب node.js می‌توانید مقاله ی "آموزش نصب node.js در ویندوز" را مطالعه کنید.

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

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

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 آماده ی اجراست. برای باز شدن صفحه باید در مرورگر خود، آدرس https://localhost:5000 را وارد کنید. اگر همه چیز بدون خطا باشد، صفحه ی زیر برای شما نمایش داده می‌شود:

جمع بندی

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

برای آشنایی با سایر فریم ورک‌های مبتنی بر جاوا اسکریپت می‌توانید مقاله ی "فریمورک‌های جاوا اسکریپت : بهترین فریمورک‌های JavaScript" را مطالعه کنید. مقاله ی "آموزش React Native | ری اکت نیتیو چیست و چه کاربردی دارد؟" و مقاله ی "Vue.js چیست؟ آشنایی با فریم ورک محبوب جاوا اسکریپت" نیز روی آشنایی با این دو فریم ورک پرکاربرد جاوا اسکریپت تمرکز دارد. اگر سوالی در مورد Svelte دارید یا در نصب دچار مشکلی شدید، آن را در بخش نظرات با ما و سایر کاربران سون لرن به اشتراک بگذارید.

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