آموزش Svelte — مجموعه مقالات مجله فرادرس

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

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

فیلم آموزش جاوا اسکریپت JavaScript در فرادرس

کلیک کنید

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

• معرفی Svelte و کامپوننت‌های آن — بخش اول

در این نخستین مطلب تلاش کرده‌ایم توضیحاتی در مورد خود فریمورک و کامپوننت‌های آن ارائه کنیم. برای استفاده از Svelte باید Node.js نصب شده باشد، زیرا همه ابزارهای آن بر مبنای Node است. کامپوننت‌های Svelte شامل همه آن چیزی هستند که برای رندر کردن یک بخش از UI مورد نیاز است هر کامپوننت Svelte در یک فایل svelte. اعلان می‌شود و در آنجا می‌توانید محتوا (markup)، رفتار (جاوا اسکریپت) و ارائه (CSS) را بدون نیاز به تعریف فایل‌های مجزا پیدا کنید. همچنین می‌توانید کامپوننت‌ها را ایمپورت و اکسپورت کنید.

• مدیریت حالت در Svelte — بخش دوم

در Svelte هر کامپوننت علاوه بر تعریف markup ،CSS و منطق جاوا اسکریپت، می‌تواند حالت (State) خاص خود را میزبانی کند. حالت به هر داده‌ای گفته می‌شود که کامپوننت برای رندر کردن محتوایش به آن نیاز دارد. برای نمونه اگر در فیلد ورودی یک فرم دارای رشته test باشد، باید متغیری باشد که این مقدار را نگهداری کند. این همان حالت فیلد ورودی است. یا اگر فیلدی انتخاب شده باشد، یک متغیر در جایی این مسئله را ثبت می‌کند. این‌ها همگی جزئی از حالت هستند. بدین ترتیب در این مقاله به توضیح روش مدیریت حالت در Svelte پرداخته‌ایم.

• مدیریت حالت بین کامپوننتی در Svelte — بخش سوم

در این بخش از سلسله مقالات آموزش فریمورک Svelte به بررسی مدیریت حالت بین کامپوننتی در Svelte پرداخته‌ایم. به این منظور روش‌های مختلفی وجود دارند که شامل استفاده از props و همچنین بهره‌گیری از Context API و استفاده از Store-های Svelte است. خود این Store-ها بر چند نوع هستند. Store-های Readable خاص هستند، زیرا نمی‌توانند از بیرون به‌روزرسانی شوند، چون متدهای ()set یا ()update ندارند. بدین ترتیب هر زمان که حالت اولیه آن‌ها تعیین شود، دیگر نمی‌توان آن‌ها را از خارج تغییر داد. Store-های Derived امکان ایجاد یک مقدار Store جدید را می‌دهند که به مقدار Store موجود وابسته است. این کار با استفاده از تابع ()derived عرضه شده از سوی svelte/store میسر شده است. در ادامه این بخش در مورد اسلات‌های Svelte و رویدادهای چرخه عمری Svelte نیز صحبت کرده‌ایم.

• Binding در Svelte — بخش چهارم

با استفاده از Svelte می‌توانیم اتصال‌های دوطرفه‌ای بین داده‌ها و UI ایجاد کنیم. فریمورک‌های وب زیاد دیگری می‌توانند اتصال‌های دوطرفه‌ای را ایجاد کنند و این یک الگوی رایج است. این موارد به صورت خاص در مورد فرم‌ها مفید است. در این بخش از سلسله مقالات آموزش Svelte در مورد Binding در Svelte صحبت کرده‌ایم.

• منطق شرطی در Svelte و توضیح Promise و رویدادها — بخش پنجم-پایانی

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

سخن پایانی

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

تفاوت اصلی Svelte با فریمورک‌های مبتنی بر کامپوننت این است که Svelte قابلیت درک بیشتری برای افرادی که تجربه کمتر کدنویسی دارند ارائه می‌کند. Svelte همه فایل‌های تولید شده را در یک فایل به نام bundle.js کامپایل می‌کند. با این که Svelte مستقیماً با DOM کار نمی‌کند، اما کدی که در این فریمورک نوشته می‌شود، در زمان تغییر یافتن حالت اپلیکیشن، DOM را به‌روزرسانی می‌کند.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش JavaScript ES6 (جاوا اسکریپت)
• مجموعه آموزش‌‌های JavaScript (جاوا اسکریپت)
• معرفی Svelte و کامپوننت های آن — آموزش Svelte (بخش اول)
• جاوا اسکریپت چیست؟ - به زبان ساده 

==