Build high-performance web applications with SvelteJS - a lightweight JavaScript compiler
About This Video
In Detail
If you want to build reactive user interfaces that load quickly and run fast, Svelte.js is a tool you shouldn't overlook! Svelte.js (or just "Svelte") is a modern JavaScript compiler that allows you to write and compile …
Build high-performance web applications with SvelteJS - a lightweight JavaScript compiler
About This Video
In Detail
If you want to build reactive user interfaces that load quickly and run fast, Svelte.js is a tool you shouldn't overlook! Svelte.js (or just "Svelte") is a modern JavaScript compiler that allows you to write and compile efficient and easy-to-understand JavaScript code that runs in the browser. In this course, you'll learn how to write a frontend application using JavaScript, following the rules laid out by Svelte. The Svelte compiler will then produce a small and highly optimized JavaScript bundle which can be easily deployed. This course covers all about Svelte, helping you understand how it works, what its core features are, and how to run your final app on a real server! Svelte.js is a great alternative to JavaScript frameworks and libraries such as React.js, Angular, or Vue for building highly reactive, modern user interfaces for the web. Moreover, it enables you to build your web projects with less code and helps build faster apps!
Chapter 1 : Getting Started
Introduction 00:02:29
Why Svelte? 00:07:13
What is Svelte? 00:04:30
Setting Up a First App & The Course Project 00:11:09
Writing Some Svelte Code 00:07:26
Course Outline 00:04:48
How To Get The Most Out Of The Course 00:02:38
Chapter 2 : Base Syntax & Core Features
Module Introduction 00:03:56
Using Curly Braces & Understanding the Core Syntax 00:05:37
Reactive Variables 00:05:48
More Reactivity 00:02:10
Binding to Element Properties 00:04:16
Two-Way Binding Shortcut 00:01:41
Using Multiple Components 00:08:30
Components & Communication via Props 00:03:45
Diving Deeper into Bindings 00:06:01
Using Self-Extending Properties 00:01:10
Outputting HTML Content 00:03:32
Setting Dynamic CSS Classes 00:04:16
Wrap Up 00:01:16
Chapter 3 : Working with Conditionals & Loops
Module Introduction 00:00:49
Using “if” Statements in HTML 00:05:26
if, else & else-if 00:04:27
Outputting Lists with “each” 00:08:05
“each”, “else” & Extracting the Index 00:02:11
Lists & Keys 00:09:55
A Closer Look at List Keys 00:04:17
Wrap Up 00:00:37
Chapter 4 : A Closer Look at Reactivity
Module Introduction 00:00:59
Updating Arrays & Objects Immutably 00:02:29
Understanding Event Modifiers 00:05:04
Using Inline Functions 00:03:11
Wrap Up 00:00:45
Chapter 5 : Course Project - First Steps
Module Introduction 00:01:19
Project Setup & A First Component 00:08:42
Different Ways of Mounting Components 00:05:08
Adding Data 00:03:35
Adding a New Component (MeetupItem) 00:04:18
Working with Different Component Types 00:03:32
Passing Data Into Components 00:05:37
Adding a “MeetupGrid” Component 00:04:25
Adding New Meetups via a Form 00:09:24
Creating a “TextInput” Component 00:11:08
Adding a Custom “Button” Component 00:05:58
Wrap Up 00:02:21
Chapter 6 : Diving Deeper into Components
Module Introduction 00:01:44
Understanding the Different Component Types 00:01:41
Component Communication Overview 00:03:02
Event Forwarding 00:04:53
Emitting Custom Events 00:04:54
How to Extract Event Data 00:02:28
Using Spread Props & Default Props 00:06:56
Working with Slots 00:06:26
Named & Default Slots 00:03:31
Example: Opening & Closing a Modal 00:03:18
Using Slot Props 00:05:27
The Component Lifecycle - Theory 00:04:54
Creation & Update Lifecycle Hooks in Action 00:07:27
Using “tick()” 00:09:19
Wrap Up 00:00:56
Chapter 7 : Course Project - Components Deep Dive
Module Introduction 00:00:33
Adding Default Props 00:03:22
Communication via Custom Events 00:11:16
Utilizing Slots 00:05:11
Creating an “EditMeetup” Component 00:07:56
Communicating Between Components 00:03:45
Time for More Slots! 00:03:21
Adding a Re-Usable “Modal” Component 00:07:05
Finishing the “Modal” Component 00:03:29
Wrap Up 00:00:38
Chapter 8 : Working with Bindings & Forms
Module Introduction 00:00:35
Two-Way Binding Refresher 00:02:46
Understanding Custom Component Bindings 00:06:06
Relying on Automatic Number Conversion 00:02:56
Binding Checkboxes & Radio Buttons 00:04:54
Binding
Binding to Element References 00:05:17
Binding to Component References 00:02:50
Validating Forms & Inputs 00:06:43
Wrap Up 00:00:58
Chapter 9 : Course Project - Bindings & Forms
Module Introduction 00:00:33
Exploring Different Validation Solutions 00:02:32
Adding Validation & Error Output to the “TextInput” Component 00:03:36
Adding Some Validation Logic 00:03:25
Finishing “TextInput” Validation 00:07:01
Validating the Overall Form 00:02:51
Improvements & Wrap Up 00:03:16
Chapter 10 : Managing State & Data with Stores
Module Introduction 00:01:04
What’s the Problem? 00:03:42
Creating a Writable Store & Subscribing 00:05:34
Updating Store Data 00:04:36
Stores and Stateful & Presentational Components 00:01:56
Managing Store Subscriptions 00:03:53
Using Autosubscriptions 00:02:49
A Second Store! 00:06:48
Subscribing for a Short Period 00:03:48
Understanding Readable Stores 00:08:45
Unlimited Power with Custom Stores 00:07:56
Wrap Up 00:01:22
Chapter 11 : Course Project - Stores
Module Introduction 00:01:13
Setting Up a Store 00:03:00
Using a Custom Store 00:08:10
Tapping into the Store from Different Components 00:05:07
Adding a “MeetupDetail” Component 00:12:34
Preparing the “Edit Meetup” Form 00:05:10
Continuing Work on the “Edit” Feature 00:09:13
Adding a “Delete” Functionality 00:03:23
Adding a “Filter” Component 00:08:49
Some Final Steps 00:02:36
Wrap Up 00:00:49
Chapter 12 : Motion, Transitions & Animations
Module Introduction 00:00:54
Animating Values with a Tweened Store 00:06:54
Using a Spring Store Instead 00:08:20
Preparing a Transition Example 00:03:38
Element Transitions 00:06:31
More on Transitions 00:05:17
Using Different “in” and “out” Transitions 00:01:30
Animating Passive (Affected) Items 00:02:51
Wrap Up 00:00:48
Chapter 13 : Course Project - Transitions
Module Introduction 00:01:03
Animating the Modal 00:03:27
Animating the Meetup Items 00:04:53
Animating the “Favorite” Badge & Wrap Up 00:01:26
Chapter 14 : Network Interaction via Http
Module Introduction 00:01:33
Adding a REST API 00:02:45
Sending Data via a POST Request 00:06:59
Showing a Loading Indicator & Sending Correct Data 00:03:17
Fetching & Transforming Data 00:04:13
Things to Consider 00:02:49
Using the “await” Block 00:03:36
Http + A Store 00:05:34
Wrap Up 00:00:59
Chapter 15 : Course Project - Http
Module Introduction 00:00:35
Storing Meetups on a Server 00:09:16
Fetching & Transforming Data 00:04:54
Adding a Loading Spinner 00:05:45
Updating via PATCH 00:06:33
Sending “Favorite” Updates & Deleting Data 00:03:57
Fixing the Order of Items 00:01:10
Adding Error Handling 00:07:14
Wrap Up 00:00:48
Chapter 16 : Special Elements
Module Introduction 00:00:36
Dynamic Components 00:07:22
Recursive Components 00:06:10
Accessing Windows, Body & Head 00:06:45
Cross-Component Scripts 00:05:39
Chapter 17 : Routing & Server-side Rendering with Sapper
Module Introduction 00:00:47
What and Why? 00:04:58
Understanding the Folder Structure 00:02:54
Inspecting the Web Page 00:02:20
Filenames & Routes 00:06:46
Error & Layout Pages 00:02:16
Preloading in Components 00:05:12
Pre-fetching Data 00:06:32
Migrating the Meetup Project Files into the Sapper Project 00:06:45
Fetching Data on the Client Side 00:09:14
Prefetching Data on the Server 00:06:13
Syncing Fetched Data & the Store 00:03:33
Editing & Deleting Meetups 00:01:58
Rendering the MeetupDetail Page 00:07:49
Adding Global CSS 00:00:43
Wrap Up 00:00:37
Chapter 18 : Deployment
Module Introduction 00:00:36
Different App Types & Deployment Options 00:04:35
Building the App 00:04:38
Rendering Content Correctly on the Server 00:02:53
Deploying a SSR App 00:03:20
Hosting a Static Site 00:04:49
Wrap Up 00:00:42
Chapter 19 : Course Roundup
Svelte vs React vs Angular vs Vue 00:08:56
Course Summary 00:02:33