Svelte.js – The Complete Guide

Svelte.js – The Complete Guide

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 12.5 Hours | 6.02 GB

Build high-performance web applications with SvelteJS – a lightweight JavaScript compiler

Svelte.js (or just “Svelte”) is a modern JavaScript compiler that allows you to write easy-to-understand JavaScript code which is then compiled to highly efficient code that runs in the browser.

You’ll write your frontend application using normal JavaScript, following specific rules laid out by Svelte (which are of course taught in this course). As a result, the Svelte compiler will produce a small and highly optimized JavaScript bundle which can be deployed.

In this course, you’ll learn all about Svelte, how it works, its core features and how to run your final app on a real server!

Svelte.js is a tool for building highly reactive, modern user interfaces for the web – and it’s a great alternative to JavaScript frameworks and libraries like React.js, Angular or Vue.

What will you learn?

  • What is Svelte and why would you use it?
  • All the core features and base syntax
  • How to render conditional and list content
  • How to write reactive and fast web applications
  • All about components, how to pass data around and how to create re-usable building blocks
  • How to efficiently manage data in your application via Svelte stores
  • How to reach out to a backend server and send + fetch data
  • How to pre-render your app on a server and improve SEO

Is this course for you?

Svelte is a popular alternative to React.js, Angular and Vue and learning it will benefit any frontend web developer.

You don’t need to know these frameworks to learn Svelte though – but if you do know them, you’ll learn about an interesting alternative which might allow you to build your web projects with less code (and get an even faster app along the way!).

You need NO advanced JavaScript knowledge, basic knowledge will do.

If you’re interested in building modern, reactive user interfaces that load quickly and run fast, SvelteJS is a tool you shouldn’t overlook!

What you’ll learn

  • SvelteJS from scratch, with zero knowledge assumed
  • All the theory and practical applications of Svelte
  • Core concepts and advanced techniques to build Svelte applications
Table of Contents

1 Getting Started
2 Introduction
3 Why Svelte?
4 What is Svelte?
5 Setting Up a First App & The Course Project
6 Writing Some Svelte Code
7 Course Outline
8 How To Get The Most Out Of The Course
9 Course Resources

Base Syntax & Core Features
10 Module Introduction
11 Using Curly Braces & Understanding the Core Syntax
12 Reactive Variables
13 More Reactivity
14 Binding to Element Properties
15 Two-Way Binding Shortcut
16 Using Multiple Components
17 Components & Communication via Props
18 Diving Deeper into Bindings
19 Using Self-Extending Properties
20 Outputting HTML Content
21 A XSS Example
22 Setting Dynamic CSS Classes
23 Wrap Up
24 Useful Resources & Links

Working with Conditionals & Loops
25 Module Introduction
26 Using “if” Statements in HTML
27 if, else & else-if
28 Outputting Lists with “each”
29 “each”, “else” & Extracting the Index
30 Lists & Keys
31 A Closer Look at List Keys
32 Wrap Up
33 Useful Resources & Links

A Closer Look at Reactivity
34 Module Introduction
35 Updating Arrays & Objects Immutably
36 Understanding Event Modifiers
37 Using Inline Functions
38 Wrap Up
39 Useful Resources & Links

Course Project – First Steps
40 Module Introduction
41 Project Setup & A First Component
42 Different Ways of Mounting Components
43 How to Embed Widgets
44 Adding Data
45 Adding a New Component (MeetupItem)
46 Working with Different Component Types
47 Passing Data Into Components
48 Adding a “MeetupGrid” Component
49 Adding New Meetups via a Form
50 Creating a “TextInput” Component
51 Adding a Custom “Button” Component
52 Wrap Up
53 Useful Resources & Links

Diving Deeper Into Components
54 Module Introduction
55 Understanding the Different Component Types
56 Component Communication Overview
57 Event Forwarding
58 Emitting Custom Events
59 How to Extract Event Data
60 Using Spread Props & Default Props
61 Working with Slots
62 Named & Default Slots
63 Example: Opening & Closing a Modal
64 Using Slot Props
65 The Component Lifecycle – Theory
66 Creation & Update Lifecycle Hooks in Action
67 Using “tick()”
68 Wrap Up
69 Useful Resources & Links

Course Project – Components Deep Dive
70 Module Introduction
71 Adding Default Props
72 Communication via Custom Events
73 Utilizing Slots
74 Creating an “EditMeetup” Component
75 Communicating Between Components
76 Time for More Slots!
77 Adding a Re-Usable “Modal” Component
78 Finishing the “Modal” Component
79 Wrap Up
80 Useful Resources & Links

Working with Bindings & Forms
81 Module Introduction
82 Two-Way Binding Refresher
83 Understanding Custom Component Bindings
84 Relying on Automatic Number Conversion
85 Binding Checkboxes & Radio Buttons
86 Binding




Course Project – Bindings & Forms
92 Module Introduction
93 Exploring Different Validation Solutions
94 Adding Validation & Error Output to the “TextInput” Component
95 Adding Some Validation Logic
96 Finishing “TextInput” Validation
97 Validating the Overall Form
98 Improvements & Wrap Up
99 Useful Resources & Links

Managing State & Data with Stores
100 Module Introduction
101 What’s the Problem?
102 Creating a Writable Store & Subscribing
103 Updating Store Data
104 Stores and Stateful & Presentational Components
105 Managing Store Subscriptions
106 Using Autosubscriptions
107 A Second Store!
108 Subscribing for a Short Period
109 Understanding Readable Stores
110 Unlimited Power with Custom Stores
111 Wrap Up
112 Derived Store & Store Bindings
113 Useful Resources & Links

Course Project – Stores
114 Module Introduction
115 Setting Up a Store
116 Using a Custom Store
117 Tapping into the Store from Different Components
118 Adding a “MeetupDetail” Component
119 Preparing the “Edit Meetup” Form
120 Continuing Work on the “Edit” Feature
121 Adding a “Delete” Functionality
122 Adding a “Filter” Component
123 Some Final Steps
124 Wrap Up
125 Useful Resources & Links

Motion, Transitions & Animations
126 Module Introduction
127 Animating Values with a Tweened Store
128 Using a Spring Store Instead
129 Preparing a Transition Example
130 Element Transitions
131 More on Transitions
132 Using Different “in” and “out” Transitions
133 Animating Passive (Affected) Items
134 Deferred Transitions
135 Wrap Up
136 Useful Resources & Links

Course Project – Transitions
137 Module Introduction
138 Animating the Modal
139 Animating the Meetup Items
140 Animating the “Favorite” Badge & Wrap Up
141 Useful Resources & Links

Network Interaction via Http
142 Module Introduction
143 Adding a REST API
144 Sending Data via a POST Request
145 Showing a Loading Indicator & Sending Correct Data
146 Fetching & Transforming Data
147 Things to Consider
148 Using the “await” Block
149 Http + A Store
150 Wrap Up
151 Useful Resources & Links

Course Project – Http
152 Module Introduction
153 Storing Meetups on a Server
154 Fetching & Transforming Data
155 Adding a Loading Spinner
156 Updating via PATCH
157 Sending “Favorite” Updates & Deleting Data
158 Fixing the Order of Items
159 Adding Error Handling
160 Wrap Up
161 Useful Resources & Links

Special Elements
162 Module Introduction
163 Dynamic Components
164 Recursive Components
165 Accessing Windows, Body & Head
166 Cross-Component Scripts
167 Useful Resources & Links

Routing & Server-side Rendering with Sapper
168 Module Introduction
169 What and Why?
170 Understanding the Folder Structure
171 Inspecting the Web Page
172 Filenames & Routes
173 Error & Layout Pages
174 Preloading in Components
175 Pre-fetching Data
176 Migrating the Meetup Project Files into the Sapper Project
177 Fetching Data on the Client Side
178 Prefetching Data on the Server
179 Syncing Fetched Data & the Store
180 Editing & Deleting Meetups
181 Rendering the MeetupDetail Page
182 Adding Global CSS
183 Wrap Up

Deployment
184 Module Introduction
185 Different App Types & Deployment Options
186 Building the App
187 Rendering Content Correctly on the Server
188 Deploying a SSR App
189 Hosting a Static Site
190 Wrap Up
191 Useful Resources & Links

Course Roundup
192 Svelte vs React vs Angular vs Vue
193 Course Summary
194 Bonus Content