Главная страницаКатегория svelteSvelte и SvelteKit: Полное руководство

Svelte и SvelteKit: Полное руководство

Name: Svelte и SvelteKit: Полное руководство
Price: 13 USD
Rating: 5 (17 reviews)

Svelte & SvelteKit: The Complete Guide

udemy

★5 (всего оценок - 17)

Начать Сейчас

Продолжительность

29 ч 4 мин

Категория

Svelte

Количество уроков

206 Видео

Дата добавления

22 февр. 2023 г., 00:09

Язык

Английский

Дата выхода

8 февр. 2023 г., 01:00

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
Урок 83. 00:06:51
Pausing Other Videos When Playing a Video
Урок 84. 00:02:35
Playing & Pausing All Videos
Урок 85. 00:01:56
Introduction to SvelteKit
Урок 86. 00:07:24
Creating a New SvelteKit Project
Урок 87. 00:08:45
Creating Routes
Урок 88. 00:06:59
The $lib Folder Alias & Custom Aliases
Урок 89. 00:08:27
Navigation Functions: goto(), beforeNavigate() & afterNavigate()
Урок 90. 00:05:29
Rest Parameters
Урок 91. 00:03:22
Optional Parameters
Урок 92. 00:06:41
Parameter Matchers
Урок 93. 00:09:03
Layouts Basics
Урок 94. 00:03:07
Changing Layouts Conditionally
Урок 95. 00:07:18
Layout Groups
Урок 96. 00:07:14
Breaking Out of Layouts Hierarchy
Урок 97. 00:08:37
Shared Load Function (Server & Client)
Урок 98. 00:06:41
Type-safety with Generated Types
Урок 99. 00:05:32
Displaying Our Loaded Data
Урок 100. 00:08:22
Server Only Load Functions
Урок 101. 00:06:52
Layout Load Functions
Урок 102. 00:10:16
Product Page Exercise + Errors & Rediercts
Урок 103. 00:08:18
Passing Data From a Page to its Parent Layout
Урок 104. 00:10:11
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 - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.

+194