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