آموزش Svelte.js - راهنمای کامل (شامل Sapper.js)

سرفصل ها و درس ها

شروع شدن Getting Started

• معرفی Introduction

• چرا Svelte؟ Why Svelte?

• Svelte چیست؟ What is Svelte?

• به انجمن آموزش آنلاین ما بپیوندید Join our Online Learning Community

• راه اندازی اولین برنامه و پروژه دوره Setting Up a First App & The Course Project

• نوشتن کدهای شیک Writing Some Svelte Code

• طرح کلی دوره Course Outline

• چگونه از دوره بیشترین بهره را ببریم How To Get The Most Out Of The Course

• منابع دوره Course Resources

نحو پایه و ویژگی های اصلی Base Syntax & Core Features

• معرفی ماژول Module Introduction

• استفاده از بریس های فرفری و درک نحو هسته Using Curly Braces & Understanding the Core Syntax

• متغیرهای واکنشی Reactive Variables

• واکنش پذیری بیشتر More Reactivity

• اتصال به ویژگی های عنصر Binding to Element Properties

• میانبر صحافی دو طرفه Two-Way Binding Shortcut

• استفاده از چندین کامپوننت Using Multiple Components

• اجزا و ارتباطات از طریق Props Components & Communication via Props

• غواصی عمیق تر در پیوندها Diving Deeper into Bindings

• استفاده از ویژگی های خود گسترش دهنده Using Self-Extending Properties

• خروجی محتوای HTML Outputting HTML Content

• یک مثال XSS A XSS Example

• تنظیم کلاس های پویا CSS Setting Dynamic CSS Classes

• زمان تمرین: اصول Time to Practice: The Basics

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

کار با Conditionals & Loops Working with Conditionals & Loops

• معرفی ماژول Module Introduction

• استفاده از دستورات "if" در HTML Using "if" Statements in HTML

• if، else و other-if if, else & else-if

• خروجی لیست ها با "هر" Outputting Lists with "each"

• "هر"، "دیگر" و استخراج شاخص "each", "else" & Extracting the Index

• فهرست ها و کلیدها Lists & Keys

• زمان برای تمرین: شرایط و حلقه ها Time to Practice: Conditionals & Loops

• نگاهی دقیق تر به کلیدهای فهرست A Closer Look at List Keys

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

نگاهی دقیق تر به واکنش پذیری A Closer Look at Reactivity

• معرفی ماژول Module Introduction

• به روز رسانی غیرقابل تغییر آرایه ها و اشیاء Updating Arrays & Objects Immutably

• شناخت اصلاح کننده های رویداد Understanding Event Modifiers

• استفاده از توابع درون خطی Using Inline Functions

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

پروژه دوره - مراحل اول Course Project - First Steps

• معرفی ماژول Module Introduction

• راه اندازی پروژه و اولین مؤلفه Project Setup & A First Component

• روش های مختلف نصب قطعات Different Ways of Mounting Components

• نحوه جاسازی ابزارک ها How to Embed Widgets

• افزودن داده ها Adding Data

• افزودن یک مؤلفه جدید (MeetupItem) Adding a New Component (MeetupItem)

• کار با انواع مختلف کامپوننت Working with Different Component Types

• انتقال داده ها به کامپوننت ها Passing Data Into Components

• افزودن کامپوننت "MeetupGrid". Adding a "MeetupGrid" Component

• افزودن جلسات جدید از طریق یک فرم Adding New Meetups via a Form

• ایجاد کامپوننت "TextInput". Creating a "TextInput" Component

• اضافه کردن یک کامپوننت "دکمه" سفارشی Adding a Custom "Button" Component

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

غواصی عمیق تر در اجزا Diving Deeper Into Components

• معرفی ماژول Module Introduction

• آشنایی با انواع اجزای مختلف Understanding the Different Component Types

• بررسی اجمالی ارتباطات مؤلفه Component Communication Overview

• انتقال رویداد Event Forwarding

• انتشار رویدادهای سفارشی Emitting Custom Events

• نحوه استخراج داده های رویداد How to Extract Event Data

• استفاده از لوازم گسترده و لوازم پیش‌فرض Using Spread Props & Default Props

• کار با اسلات ها Working with Slots

• اسلات های نامگذاری شده و پیش فرض Named & Default Slots

• مثال: باز کردن و بستن یک مدال Example: Opening & Closing a Modal

• استفاده از Slot Props Using Slot Props

• چرخه حیات جزء - نظریه The Component Lifecycle - Theory

• ایجاد و به‌روزرسانی قلاب‌های چرخه حیات در عمل Creation & Update Lifecycle Hooks in Action

• با استفاده از "tick()" Using "tick()"

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

پروژه دوره - شیرجه عمیق اجزا Course Project - Components Deep Dive

• معرفی ماژول Module Introduction

• افزودن لوازم پیش فرض Adding Default Props

• ارتباط از طریق رویدادهای سفارشی Communication via Custom Events

• استفاده از اسلات ها Utilizing Slots

• ایجاد کامپوننت "EditMeetup". Creating an "EditMeetup" Component

• برقراری ارتباط بین اجزا Communicating Between Components

• زمان برای اسلات های بیشتر! Time for More Slots!

• افزودن یک مؤلفه «Modal» قابل استفاده مجدد Adding a Re-Usable "Modal" Component

• تکمیل مولفه "Modal". Finishing the "Modal" Component

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

کار با Bindings & Forms Working with Bindings & Forms

• معرفی ماژول Module Introduction

• تجدید کننده صحافی دو طرفه Two-Way Binding Refresher

• درک اتصالات اجزای سفارشی Understanding Custom Component Bindings

• با تکیه بر تبدیل خودکار شماره Relying on Automatic Number Conversion

• چک باکس های صحافی و دکمه های رادیویی Binding Checkboxes & Radio Buttons

• پیوندهای کشویی <انتخاب> Binding <select> Dropdowns

• اتصال به ارجاعات عنصر Binding to Element References

• اتصال به مراجع مؤلفه Binding to Component References

• اعتبار سنجی فرم ها و ورودی ها Validating Forms & Inputs

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

پروژه دوره - Bindings & Forms Course Project - Bindings & Forms

• معرفی ماژول Module Introduction

• کاوش در راه حل های مختلف اعتبار سنجی Exploring Different Validation Solutions

• افزودن خروجی اعتبارسنجی و خطا به مؤلفه «TextInput». Adding Validation & Error Output to the "TextInput" Component

• اضافه کردن مقداری منطق اعتبارسنجی Adding Some Validation Logic

• پایان اعتبارسنجی "TextInput". Finishing "TextInput" Validation

• اعتبار سنجی فرم کلی Validating the Overall Form

• بهبود و جمع بندی Improvements & Wrap Up

• منابع و لینک های مفید Useful Resources & Links

مدیریت وضعیت و داده ها با فروشگاه ها Managing State & Data with Stores

• معرفی ماژول Module Introduction

• مشکل چیست؟ What's the Problem?

• ایجاد فروشگاه قابل نوشتن و اشتراک Creating a Writable Store & Subscribing

• به روز رسانی داده های فروشگاه Updating Store Data

• فروشگاه ها و مؤلفه های Stateful & Presentational Stores and Stateful & Presentational Components

• مدیریت اشتراک فروشگاه Managing Store Subscriptions

• استفاده از اشتراک های خودکار Using Autosubscriptions

• فروشگاه دوم! A Second Store!

• اشتراک برای یک دوره کوتاه Subscribing for a Short Period

• آشنایی با فروشگاه های خواندنی Understanding Readable Stores

• قدرت نامحدود با فروشگاه های سفارشی Unlimited Power with Custom Stores

• بسته شدن Wrap Up

• صحافی فروشگاه و فروشگاه مشتق شده Derived Store & Store Bindings

• منابع و لینک های مفید Useful Resources & Links

پروژه دوره - فروشگاه ها Course Project - Stores

• معرفی ماژول Module Introduction

• یک خطای احتمالی A Possible Error

• راه اندازی فروشگاه Setting Up a Store

• استفاده از فروشگاه سفارشی Using a Custom Store

• از اجزای مختلف به فروشگاه ضربه بزنید Tapping into the Store from Different Components

• افزودن کامپوننت "MeetupDetail". Adding a "MeetupDetail" Component

• آماده سازی فرم "ویرایش ملاقات". Preparing the "Edit Meetup" Form

• ادامه کار بر روی ویژگی "ویرایش". Continuing Work on the "Edit" Feature

• اضافه کردن یک عملکرد "حذف". Adding a "Delete" Functionality

• افزودن کامپوننت "فیلتر". Adding a "Filter" Component

• برخی از مراحل پایانی Some Final Steps

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

حرکت، انتقال و انیمیشن Motion, Transitions & Animations

• معرفی ماژول Module Introduction

• متحرک سازی ارزش ها با فروشگاه توئیند Animating Values with a Tweened Store

• به جای آن از فروشگاه بهار استفاده کنید Using a Spring Store Instead

• آماده سازی یک مثال انتقال Preparing a Transition Example

• انتقال عناصر Element Transitions

• بیشتر در مورد انتقال More on Transitions

• استفاده از انتقال های مختلف "در" و "خارج". Using Different "in" and "out" Transitions

• متحرک سازی موارد منفعل (متأثیر). Animating Passive (Affected) Items

• انتقال های معوق Deferred Transitions

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

پروژه دوره - انتقال Course Project - Transitions

• معرفی ماژول Module Introduction

• متحرک سازی مدال Animating the Modal

• متحرک سازی آیتم های Meetup Animating the Meetup Items

• متحرک سازی نشان "مورد علاقه" و بسته بندی Animating the "Favorite" Badge & Wrap Up

• منابع و لینک های مفید Useful Resources & Links

تعامل شبکه از طریق Http Network Interaction via Http

• معرفی ماژول Module Introduction

• افزودن یک REST API Adding a REST API

• ارسال داده از طریق یک درخواست POST Sending Data via a POST Request

• نمایش نشانگر بارگیری و ارسال داده های صحیح Showing a Loading Indicator & Sending Correct Data

• واکشی و تبدیل داده ها Fetching & Transforming Data

• چیزهایی که باید در نظر بگیرید Things to Consider

• با استفاده از بلوک "انتظار". Using the "await" Block

• Http + A Store Http + A Store

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

پروژه دوره - Http Course Project - Http

• معرفی ماژول Module Introduction

• ذخیره سازی Meetup ها در سرور Storing Meetups on a Server

• واکشی و تبدیل داده ها Fetching & Transforming Data

• اضافه کردن یک اسپینر بارگیری Adding a Loading Spinner

• به روز رسانی از طریق PATCH Updating via PATCH

• ارسال به‌روزرسانی‌های «مورد علاقه» و حذف داده‌ها Sending "Favorite" Updates & Deleting Data

• اصلاح ترتیب اقلام Fixing the Order of Items

• اضافه کردن Error Handling Adding Error Handling

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

عناصر ویژه Special Elements

• معرفی ماژول Module Introduction

• اجزای دینامیک Dynamic Components

• اجزای بازگشتی Recursive Components

• دسترسی به ویندوز، بدنه و سر Accessing Windows, Body & Head

• اسکریپت های متقابل Cross-Component Scripts

• منابع و لینک های مفید Useful Resources & Links

مسیریابی و رندر سمت سرور با Sapper Routing & Server-side Rendering with Sapper

• معرفی ماژول Module Introduction

• چی و چرا؟ What and Why?

• آشنایی با ساختار پوشه Understanding the Folder Structure

• بازرسی صفحه وب Inspecting the Web Page

• نام فایل ها و مسیرها Filenames & Routes

• صفحات خطا و چیدمان Error & Layout Pages

• پیش بارگذاری در کامپوننت ها Preloading in Components

• پیش واکشی داده ها Pre-fetching Data

• انتقال فایل های پروژه Meetup به پروژه Sapper Migrating the Meetup Project Files into the Sapper Project

• واکشی داده ها در سمت مشتری Fetching Data on the Client Side

• واکشی اولیه داده ها روی سرور Prefetching Data on the Server

• همگام سازی داده های واکشی شده و فروشگاه Syncing Fetched Data & the Store

• ویرایش و حذف Meetups Editing & Deleting Meetups

• ارائه صفحه MeetupDetail Rendering the MeetupDetail Page

• افزودن CSS جهانی Adding Global CSS

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

گسترش Deployment

• معرفی ماژول Module Introduction

• انواع برنامه های مختلف و گزینه های استقرار Different App Types & Deployment Options

• ساخت اپلیکیشن Building the App

• ارائه صحیح محتوا در سرور Rendering Content Correctly on the Server

• استقرار یک برنامه SSR Deploying a SSR App

• میزبانی یک سایت ثابت Hosting a Static Site

• بسته شدن Wrap Up

• منابع و لینک های مفید Useful Resources & Links

خلاصه دوره Course Roundup

• Svelte vs React در مقابل Angular vs Vue Svelte vs React vs Angular vs Vue

• خلاصه دوره Course Roundup

• محتوای جایزه Bonus Content