Svelte - это JavaScript фреймворк, который позволяет создавать компоненты, управляемые состоянием. Однако что отличает Svelte от других фреймворков, таких как Angular, React и Vue; суть в том, что Svelte — это компилятор. Svelte запускается во время сборки. Это означает, что ваш код Svelte будет скомпилирован во время сборки в высокоэффективный императивный код, который запускается в браузере для выполнения операций DOM.
Другие известные фреймворки обычно используют метод, называемый виртуальным DOM, чтобы решить, как обновлять DOM. Этот метод работает в браузере во время выполнения. И это увеличивает нагрузку на расчеты DOM.
В этом курсе мы узнаем все о Svelte с нуля. Мы начнем с основ, создав простые компоненты. А затем будем постепенно прогрессировать и создавать более сложные компоненты.
И хотя Svelte — отличный инструмент для создания компонентов для интернета, создать целое приложение только с помощью Svelte — непростая задача. Вот почему у нас есть SvelteKit (платформа для быстрой разработки надежных и производительных веб-приложений). SvelteKit предоставляет нам готовые функции, такие как маршрутизация, рендеринг на стороне сервера, предварительный рендеринг и многое другое. Он предоставляет нам структуру, которой мы можем следовать для создания высокопроизводительных приложений, которые визуализируются на стороне сервера и постепенно улучшаются.
В этом курсе мы узнаем все о SvelteKit. Мы собираемся обсудить страницы и макеты, загрузку данных, хуки, обработку ошибок, переменные среды, предварительный рендеринг и многое другое.
ПРИМЕЧАНИЕ: Продолжительность основного содержания курса составляет около 17,5 часов. Остальное - создание приложения Spotify.
Посмотреть больше
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
Урок 1.
00:02:35
Before Getting Started
Урок 2.
00:07:42
[COMING SOON] A Demo of the App that We Are Going to be Building
Урок 3.
00:09:19
What is Svelte?
Урок 4.
00:02:37
Tools & Extensions
Урок 5.
00:01:21
Svelte vs. SvelteKit
Урок 6.
00:09:49
Creating a Svelte Vite Template
Урок 7.
00:11:09
Svelte Components Basic Structure
Урок 8.
00:07:36
Exploring State With A Simple Counter Component
Урок 9.
00:04:41
Reactive Statements
Урок 10.
00:07:41
Reactive Statements Gotchas
Урок 11.
00:07:51
Component Props
Урок 12.
00:05:37
Accessing Component Children With Slots
Урок 13.
00:06:17
Using SCSS in a Svelte Project Using svelte-preprocess
Урок 14.
00:07:18
Adding Classes Dynamically Using The Class Directive
Урок 15.
00:07:26
The Style Directive
Урок 16.
00:08:42
Using Named Slots
Урок 17.
00:07:12
Using Slot Props
Урок 18.
00:05:06
Event Forwarding and Modifiers
Урок 19.
00:04:15
Forwarding Props With $respProps
Урок 20.
00:08:01
{#each} Loops
Урок 21.
00:06:03
Binding Input Value to a Variable
Урок 22.
00:05:25
Updating Arrays & Objects in Svelte
Урок 23.
00:04:21
Binding Component Props
Урок 24.
00:11:00
Custom Component Events
Урок 25.
00:03:55
Working With Immutable Data
Урок 26.
00:04:40
Removing Todos Event
Урок 27.
00:06:03
Toggling Todos Event
Урок 28.
00:07:14
Readonly Props
Урок 29.
00:04:08
Code Debugging in Svelte
Урок 30.
00:08:35
Component Lifecycle Functions
Урок 31.
00:09:54
Lifecycle Functions Practical Example
Урок 32.
00:04:30
Binding Dimensions
Урок 33.
00:04:11
The tick lifecycle function
Урок 34.
00:05:26
Cleaning Up Our Component
Урок 35.
00:15:48
Styling Our Component
Урок 36.
00:09:18
The {#await} Block
Урок 37.
00:08:10
onMount Loading and Handling Loading & Error States
Урок 38.
00:09:22
Adding Todos From the API
Урок 39.
00:07:14
Removing Todos Using the API
Урок 40.
00:01:52
Toggling Todos [Exercise Solution]
Урок 41.
00:11:56
Making the Component More Customizable with Slots
Урок 42.
00:08:13
Introduction to Transitions
Урок 43.
00:03:56
Animating Our Todos
Урок 44.
00:05:19
{#key} Transitions
Урок 45.
00:08:25
The FLIP Animation
Урок 46.
00:08:56
Custom CSS Transitions
Урок 47.
00:04:28
Custom CSS Transitions (Cont.)
Урок 48.
00:04:37
Custom JavaScript Transitions
Урок 49.
00:07:24
Displaying Done and Undone Lists Separately
Урок 50.
00:06:38
The Crossfade Transition
Урок 51.
00:07:43
Introduction to Actions
Урок 52.
00:08:18
The Longpress Action
Урок 53.
00:05:49
Using Tippy.js in Svelte Without Actions
Урок 54.
00:05:44
Creating a Tippy.js Action
Урок 55.
00:08:40
Creating a Mini Router for Testing
Урок 56.
00:13:21
Store Application Settings With Writable Stores
Урок 57.
00:05:36
Auto-subscriptions & Store Binding
Урок 58.
00:06:47
Using the Settings Store Color Scheme Value
Урок 59.
00:05:37
Store Callback Function
Урок 60.
00:11:20
Store Current Location With Readable Stores
Урок 61.
00:12:12
Custom Stores
Урок 62.
00:07:54
Derived Stores
Урок 63.
00:09:44
Tweened Writable Stores
Урок 64.
00:08:28
Custom Interpolations In Tweened Stores
Урок 65.
00:04:34
Spring Writable Stores
Урок 66.
00:01:58
Introduction to the Context API
Урок 67.
00:13:22
Handling a Form Without Context
Урок 68.
00:08:33
Creating Form & Field Components
Урок 69.
00:08:49
Using Context to Pass Data Down to Children
Урок 70.
00:07:43
Combining Context & Stores to Make Our Context Reactive
Урок 71.
00:16:24
Handling Form Validation
Урок 72.
00:08:38
Using Slots & Slot Props For More Component Customization
Урок 73.
00:08:00
Using Konva.js Library Imperatively
Урок 74.
00:08:09
Creating a Konva Stage Component
Урок 75.
00:11:20
Creating Layer & Rect Components
Урок 76.
00:05:51
Handling Destroying Layers & Rects
Урок 77.
00:06:54
Handling Updating Konva.js Components
Урок 78.
00:06:50
Handling Konva.js Events
Урок 79.
00:04:51
Using Read-Only Props to Access Our Rect Object
Урок 80.
00:02:16
What is Module Context
Урок 81.
00:09:44
Using Module Context to Keep Track of Component Instances
Урок 82.
00:07:27
Creating a Simple Video Player Component & Binding Media Information
Controlling Routes' Response and Creating Endpoints
Урок 105.
00:08:45
Handling Pages & Endpoints in the Same Route and Creating POST Endpoints
Урок 106.
00:07:53
Load Function Inputs
Урок 107.
00:12:02
Using Fetch in SvelteKit
Урок 108.
00:09:35
Creating a Login Page and Endpoint
Урок 109.
00:12:43
Using Cookies to Login and Logout
Урок 110.
00:10:05
Re-running All Load Functions
Урок 111.
00:08:34
Re-running Specific Load Functions
Урок 112.
00:12:35
The Handle Hook
Урок 113.
00:10:34
Using the Locals Object
Урок 114.
00:07:14
The handleFetch Hook
Урок 115.
00:01:59
Quick Fix
Урок 116.
00:14:50
Handling Expected Errors
Урок 117.
00:08:49
Handling Unexpected Errors
Урок 118.
00:14:46
Using Environment Variables
Урок 119.
00:04:03
Server Only Modules
Урок 120.
00:09:03
Preloading Pages' Data
Урок 121.
00:04:38
Preloading Pages' Code
Урок 122.
00:04:59
Reload and No Scroll Link Options
Урок 123.
00:04:22
Preloading Code and Data Programmatically
Урок 124.
00:08:13
SSR, CSR and trailingSlash Options
Урок 125.
00:09:52
Pre-rendering Pages and Endpoints
Урок 126.
00:05:08
Pre-rendering Pages with Dynamic Content
Урок 127.
00:11:38
Pre-rendering Pages with Dynamic Parameters
Урок 128.
00:04:00
Adding Dynamic Data in a Pre-rendered Page
Урок 129.
00:03:55
$app/environment Module
Урок 130.
00:09:44
What are Form Actions?
Урок 131.
00:08:39
Logging In Using a Form Action
Урок 132.
00:04:55
Redirecting in Form Actions
Урок 133.
00:07:14
Named Form Actions
Урок 134.
00:09:15
Enhancing Our Form with JavaScript
Урок 135.
00:14:28
Customizing the Enhance Action
Урок 136.
00:11:23
[Exercise Solution] Showing Validation Errors Using the Enhance Action
Урок 137.
00:03:11
Using Forms with GET Method
Урок 138.
00:04:01
Adapters Overview
Урок 139.
00:04:37
Building & Running Our App with the Node Adapter
Урок 140.
00:06:51
Deploying to Heroku
Урок 141.
00:06:54
Deploying to Vercel
Урок 142.
00:05:09
Deploying to Netlify
Урок 143.
00:03:48
Creating a New SvelteKit Project And Installing a CSS Normalizer
Урок 144.
00:08:01
Setting Up SASS
Урок 145.
00:06:19
Adding Global Styles
Урок 146.
00:04:15
Creating a Spotify App & Adding Environment Variables
Урок 147.
00:12:52
Constructing a Spotify Login Request
Урок 148.
00:15:21
Creating the Spotify Redirect Callback Endpoint
Урок 149.
00:14:07
Populating the Root Layout With The Logged in Spotify User
Урок 150.
00:15:10
Refreshing Expired Access Tokens
Урок 151.
00:12:34
Logging Out Using An Endpoint
Урок 152.
00:04:37
Adding Assets & Icons
Урок 153.
00:14:46
Creating a Button Component
Урок 154.
00:06:25
Using Typescript to Extend Native HTML Attributes
Урок 155.
00:13:03
Creating & Styling the Login Page
Урок 156.
00:14:14
Creating the Desktop Navigation Menu
Урок 157.
00:07:46
Styling the Desktop Navigation Menu
Урок 158.
00:13:34
Creating the Top Bar & Animating it On Scroll
Урок 159.
00:14:56
Creating The Mobile Navigation Menu
Урок 160.
00:10:17
Improving Menu's Accessibility
Урок 161.
00:10:46
Implementing Focus Trap for The Navigation Menu
Урок 162.
00:09:19
Creating An Icon Button Component
Урок 163.
00:10:25
Finalizing Our Mobile Navigation Menu
Урок 164.
00:07:31
Creating & Styling the User Menu Button
Урок 165.
00:11:44
Creating a Tippy Svelte Action For Out Profile Menu
Урок 166.
00:07:50
Adding a Tippy Theme & Styling The User Menu
Урок 167.
00:09:36
Improving Tippy By Adding Tippy Plugins
Урок 168.
00:13:23
Pages' Title Tag, Skip Link & Pages' Loading Indicator
Урок 169.
00:13:43
Styling the Layout for Disabled JavaScript
Урок 170.
00:07:19
Fetching Data From the Spotify API
Урок 171.
00:09:27
Creating an Endpoint for Forwarding Spotify API Calls
Урок 172.
00:18:26
Fetching the Home Page Data
Урок 173.
00:17:43
Refreshing the Access Token During Client Side Navigation
Урок 174.
00:12:09
Creating the Home Page Markup
Урок 175.
00:04:18
Styling the Home Page
Урок 176.
00:12:10
Creating a Card Component
Урок 177.
00:11:38
Creating a Card Component (Cont.)
Урок 178.
00:11:15
Creating the Album Page & Loading Album Data
Урок 179.
00:12:05
ItemPage Component Markup
Урок 180.
00:15:21
Styling The ItemPage Component
Урок 181.
00:07:02
Getting The Average Colour of an Image
Урок 182.
00:06:33
Using the Average Colour Endpoint in the Album Page
Урок 183.
00:10:40
The TrackList Component Markup
Урок 184.
00:09:49
The TrackList Component Styling
Урок 185.
00:14:39
Creating an Audio Player Component
Урок 186.
00:08:09
Using the Player Component in The TrackList Component
Урок 187.
00:07:22
Handling the TrackList Component When JS is Disabled
Урок 188.
00:11:51
Customizing Error Pages
Урок 189.
00:07:37
Adding a Retry Button in Error Page
Урок 190.
00:07:22
Playlist Page Data
Урок 191.
00:13:54
Playlist Page Markup & Styling
Урок 192.
00:09:09
Playlist Tracks Load More Button
Урок 193.
00:13:18
Playlist Tracks Pagination For Disabled JS
Урок 194.
00:10:25
Follow & Unfollow Playlist Form Actions
Урок 195.
00:09:58
Follow & Unfollow Button
Урок 196.
00:08:34
Enhancing Follow & Unfollow When JS is Enabled
Урок 197.
00:11:34
Creating a Toasts Store & Component
Урок 198.
00:15:04
Creating a Toasts Store & Component (Cont.)
Урок 199.
00:11:09
Playlists Page Markup & Styling
Урок 200.
00:12:09
Reusable Pagination Component
Урок 201.
00:14:40
Adding a Create Playlist Page & Form Action
Урок 202.
00:08:48
Moving the Playlist Form to a Separate Component
Урок 203.
00:15:20
Edit Playlist Page & Form Action
Урок 204.
00:12:03
Creating a Modal Component with Micromodal.js
Урок 205.
00:06:50
Enhancing the Add Playlist Form
Урок 206.
00:08:06
Enhancing the Edit Playlist Form
Автор - udemy
udemy
Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
В этой серии уроков мы собираемся заняться Svelte компонентами. К концу этого курса вы будете иметь возможность не только использовать полную библиотеку ваших собственных компонентов, но и лучше понимать, как создавать компоненты, пригодные для повседневного использования в Svelte.
Из этого курса вы узнаете, что такое Svelte и Svelte Kit. Мы поговорим о том, как Svelte Kit может улучшить ваши веб-приложения как для разработчиков, так и для пользователей.
В этом курсе мы создадим Fullstack приложение SaaS с Svelte, Express и PostgreSQL. Этот курс обучает всем основным концепциям, необходимым для создания готового к работе приложения SaaS, шаг за шагом создавая полнофункциональное приложение. Курс разделен на две основные части - интерфейс, в котором Svelte используется для создания интерактивного, многофункционального пользовательского интерфейса, и бэкэнд, в котором используются Express и Postgre