Svelte چیست

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

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

Svelte چیست؟

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

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

Svelte سریع است

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

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

Svelte کم‌حجم است.

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

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

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

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

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

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

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

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

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

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

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

معایب Svelte چیست؟

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

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

جمع‌بندی:

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