Svelte.js - The Complete Guide (incl. Sapper.js)
4.6 (1,392 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
7,053 students enrolled

Svelte.js - The Complete Guide (incl. Sapper.js)

Build high-performance web applications with SvelteJS - a lightweight JavaScript compiler
Bestseller
4.6 (1,390 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
7,051 students enrolled
Last updated 10/2019
English
English [Auto-generated], French [Auto-generated], 4 more
  • German [Auto-generated]
  • Indonesian [Auto-generated]
  • Italian [Auto-generated]
  • Portuguese [Auto-generated]
Current price: $96.99 Original price: $149.99 Discount: 35% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 12.5 hours on-demand video
  • 25 articles
  • 187 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
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
Course content
Expand all 196 lectures 12:44:24
+ Base Syntax & Core Features
15 lectures 52:08
Module Introduction
03:55
Using Curly Braces & Understanding the Core Syntax
05:36
Reactive Variables
05:48
More Reactivity
02:09
Binding to Element Properties
04:16
Two-Way Binding Shortcut
01:41
Using Multiple Components
08:30
Components & Communication via Props
03:45
Diving Deeper into Bindings
06:00
Using Self-Extending Properties
01:10
Outputting HTML Content
03:32
A XSS Example
00:13
Setting Dynamic CSS Classes
04:15
Now that we covered the basics of Svelte, it's time for you to practice it!
Time to Practice: The Basics
1 question
Wrap Up
01:16
Useful Resources & Links
00:01
+ Working with Conditionals & Loops
9 lectures 35:46
Module Introduction
00:49
Using "if" Statements in HTML
05:25
if, else & else-if
04:27
Outputting Lists with "each"
08:05
"each", "else" & Extracting the Index
02:11
Lists & Keys
09:55
Time to apply what you learned about if-statements and loops!
Time to Practice: Conditionals & Loops
1 question
A Closer Look at List Keys
04:16
Wrap Up
00:36
Useful Resources & Links
00:02
+ A Closer Look at Reactivity
6 lectures 12:28
Module Introduction
00:58
Updating Arrays & Objects Immutably
02:29
Understanding Event Modifiers
05:04
Using Inline Functions
03:11
Wrap Up
00:44
Useful Resources & Links
00:02
+ Course Project - First Steps
14 lectures 01:06:03
Module Introduction
01:18
Project Setup & A First Component
08:41
Different Ways of Mounting Components
05:07
How to Embed Widgets
00:37
Adding Data
03:35
Adding a New Component (MeetupItem)
04:18
Working with Different Component Types
03:32
Passing Data Into Components
05:37
Adding a "MeetupGrid" Component
04:25
Adding New Meetups via a Form
09:24
Creating a "TextInput" Component
11:08
Adding a Custom "Button" Component
05:58
Wrap Up
02:20
Useful Resources & Links
00:02
+ Diving Deeper Into Components
16 lectures 01:06:48
Module Introduction
01:43
Understanding the Different Component Types
01:40
Component Communication Overview
03:01
Event Forwarding
04:52
Emitting Custom Events
04:54
How to Extract Event Data
02:27
Using Spread Props & Default Props
06:56
Working with Slots
06:25
Named & Default Slots
03:30
Example: Opening & Closing a Modal
03:18
Using Slot Props
05:26
The Component Lifecycle - Theory
04:53
Creation & Update Lifecycle Hooks in Action
07:27
Using "tick()"
09:18
Wrap Up
00:56
Useful Resources & Links
00:02
+ Course Project - Components Deep Dive
11 lectures 46:37
Module Introduction
00:33
Adding Default Props
03:22
Communication via Custom Events
11:16
Utilizing Slots
05:11
Creating an "EditMeetup" Component
07:56
Communicating Between Components
03:45
Time for More Slots!
03:21
Adding a Re-Usable "Modal" Component
07:05
Finishing the "Modal" Component
03:29
Wrap Up
00:37
Useful Resources & Links
00:02
+ Working with Bindings & Forms
11 lectures 35:06
Module Introduction
00:34
Two-Way Binding Refresher
02:46
Understanding Custom Component Bindings
06:05
Relying on Automatic Number Conversion
02:55
Binding Checkboxes & Radio Buttons
04:53
Binding <select> Dropdowns
02:04
Binding to Element References
05:17
Binding to Component References
02:49
Validating Forms & Inputs
06:43
Wrap Up
00:58
Useful Resources & Links
00:02
+ Course Project - Bindings & Forms
8 lectures 23:12
Module Introduction
00:33
Exploring Different Validation Solutions
02:31
Adding Validation & Error Output to the "TextInput" Component
03:36
Adding Some Validation Logic
03:24
Finishing "TextInput" Validation
07:00
Validating the Overall Form
02:50
Improvements & Wrap Up
03:16
Useful Resources & Links
00:02
+ Managing State & Data with Stores
14 lectures 52:38
Module Introduction
01:03
What's the Problem?
03:41
Creating a Writable Store & Subscribing
05:34
Updating Store Data
04:35
Stores and Stateful & Presentational Components
01:56
Managing Store Subscriptions
03:52
Using Autosubscriptions
02:49
A Second Store!
06:48
Subscribing for a Short Period
03:48
Understanding Readable Stores
08:45
Unlimited Power with Custom Stores
07:56
Wrap Up
01:21
Derived Store & Store Bindings
00:27
Useful Resources & Links
00:02
Requirements
  • Basic JavaScript knowledge is required
  • NO prior knowledge about SvelteJS or any other JavaScript framework or library is required
Description

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's in the course?

  • Learn Svelte from scratch - zero knowledge assumed!

  • Theory and practice modules

  • A complete course project (the "meetup planner")

  • Assignments and tasks

  • All source code is attached to lectures and modules

  • 30 day trial phase - get your money back with no questions asked if you're not happy!

Who's teaching you?

My name is Maximilian Schwarzmüller and I'm teaching a broad variety of web & mobile development topics here on Udemy. I immediately loved Svelte when I learned about it since it fills an important gap between vanilla JavaScript and frameworks like Angular, React or Vue.

It can be used to replace these frameworks or to enhance apps built with them - and I simply love lightweight apps and clean syntax rules.

Who this course is for:
  • Beginner and advanced JavaScript students who are interested in writing high-performance frontend applications
  • Students who already know modern JavaScript frameworks and want to learn about a lightweight, production-ready alternative