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

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

4.58 (3415 reviews)
Udemy
platform
English
language
Web Development
category
19,668
students
12.5 hours
content
Nov 2023
last update
$94.99
regular price

What you will 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

Description

Svelte.js 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 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.

Content

Getting Started

Introduction
Why Svelte?
What is Svelte?
Join our Online Learning Community
Setting Up a First App & The Course Project
Writing Some Svelte Code
Course Outline
How To Get The Most Out Of The Course
Course Resources

Base Syntax & Core Features

Module Introduction
Using Curly Braces & Understanding the Core Syntax
Reactive Variables
More Reactivity
Binding to Element Properties
Two-Way Binding Shortcut
Using Multiple Components
Components & Communication via Props
Diving Deeper into Bindings
Using Self-Extending Properties
Outputting HTML Content
A XSS Example
Setting Dynamic CSS Classes
Wrap Up
Useful Resources & Links

Working with Conditionals & Loops

Module Introduction
Using "if" Statements in HTML
if, else & else-if
Outputting Lists with "each"
"each", "else" & Extracting the Index
Lists & Keys
A Closer Look at List Keys
Wrap Up
Useful Resources & Links

A Closer Look at Reactivity

Module Introduction
Updating Arrays & Objects Immutably
Understanding Event Modifiers
Using Inline Functions
Wrap Up
Useful Resources & Links

Course Project - First Steps

Module Introduction
Project Setup & A First Component
Different Ways of Mounting Components
How to Embed Widgets
Adding Data
Adding a New Component (MeetupItem)
Working with Different Component Types
Passing Data Into Components
Adding a "MeetupGrid" Component
Adding New Meetups via a Form
Creating a "TextInput" Component
Adding a Custom "Button" Component
Wrap Up
Useful Resources & Links

Diving Deeper Into Components

Module Introduction
Understanding the Different Component Types
Component Communication Overview
Event Forwarding
Emitting Custom Events
How to Extract Event Data
Using Spread Props & Default Props
Working with Slots
Named & Default Slots
Example: Opening & Closing a Modal
Using Slot Props
The Component Lifecycle - Theory
Creation & Update Lifecycle Hooks in Action
Using "tick()"
Wrap Up
Useful Resources & Links

Course Project - Components Deep Dive

Module Introduction
Adding Default Props
Communication via Custom Events
Utilizing Slots
Creating an "EditMeetup" Component
Communicating Between Components
Time for More Slots!
Adding a Re-Usable "Modal" Component
Finishing the "Modal" Component
Wrap Up
Useful Resources & Links

Working with Bindings & Forms

Module Introduction
Two-Way Binding Refresher
Understanding Custom Component Bindings
Relying on Automatic Number Conversion
Binding Checkboxes & Radio Buttons
Binding <select> Dropdowns
Binding to Element References
Binding to Component References
Validating Forms & Inputs
Wrap Up
Useful Resources & Links

Course Project - Bindings & Forms

Module Introduction
Exploring Different Validation Solutions
Adding Validation & Error Output to the "TextInput" Component
Adding Some Validation Logic
Finishing "TextInput" Validation
Validating the Overall Form
Improvements & Wrap Up
Useful Resources & Links

Managing State & Data with Stores

Module Introduction
What's the Problem?
Creating a Writable Store & Subscribing
Updating Store Data
Stores and Stateful & Presentational Components
Managing Store Subscriptions
Using Autosubscriptions
A Second Store!
Subscribing for a Short Period
Understanding Readable Stores
Unlimited Power with Custom Stores
Wrap Up
Derived Store & Store Bindings
Useful Resources & Links

Course Project - Stores

Module Introduction
A Possible Error
Setting Up a Store
Using a Custom Store
Tapping into the Store from Different Components
Adding a "MeetupDetail" Component
Preparing the "Edit Meetup" Form
Continuing Work on the "Edit" Feature
Adding a "Delete" Functionality
Adding a "Filter" Component
Some Final Steps
Wrap Up
Useful Resources & Links

Motion, Transitions & Animations

Module Introduction
Animating Values with a Tweened Store
Using a Spring Store Instead
Preparing a Transition Example
Element Transitions
More on Transitions
Using Different "in" and "out" Transitions
Animating Passive (Affected) Items
Deferred Transitions
Wrap Up
Useful Resources & Links

Course Project - Transitions

Module Introduction
Animating the Modal
Animating the Meetup Items
Animating the "Favorite" Badge & Wrap Up
Useful Resources & Links

Network Interaction via Http

Module Introduction
Adding a REST API
Sending Data via a POST Request
Showing a Loading Indicator & Sending Correct Data
Fetching & Transforming Data
Things to Consider
Using the "await" Block
Http + A Store
Wrap Up
Useful Resources & Links

Course Project - Http

Module Introduction
Storing Meetups on a Server
Fetching & Transforming Data
Adding a Loading Spinner
Updating via PATCH
Sending "Favorite" Updates & Deleting Data
Fixing the Order of Items
Adding Error Handling
Wrap Up
Useful Resources & Links

Special Elements

Module Introduction
Dynamic Components
Recursive Components
Accessing Windows, Body & Head
Cross-Component Scripts
Useful Resources & Links

Routing & Server-side Rendering with Sapper

Module Introduction
What and Why?
Understanding the Folder Structure
Inspecting the Web Page
Filenames & Routes
Error & Layout Pages
Preloading in Components
Pre-fetching Data
Migrating the Meetup Project Files into the Sapper Project
Fetching Data on the Client Side
Prefetching Data on the Server
Syncing Fetched Data & the Store
Editing & Deleting Meetups
Rendering the MeetupDetail Page
Adding Global CSS
Wrap Up
Useful Resources & Links

Deployment

Module Introduction
Different App Types & Deployment Options
Building the App
Rendering Content Correctly on the Server
Deploying a SSR App
Hosting a Static Site
Wrap Up
Useful Resources & Links

Course Roundup

Svelte vs React vs Angular vs Vue
Course Summary
Bonus Content

Screenshots

Svelte.js - The Complete Guide (incl. Sapper.js) - Screenshot_01Svelte.js - The Complete Guide (incl. Sapper.js) - Screenshot_02Svelte.js - The Complete Guide (incl. Sapper.js) - Screenshot_03Svelte.js - The Complete Guide (incl. Sapper.js) - Screenshot_04

Reviews

Hari
November 10, 2023
The instructor here demonstrates strong lucidity with his clear and crips explanations of the course content material. For example, I was able to thoroughly understand his explanation on svlete being a compiler instead of a framework, and how svlete ships fewer LOC in comparison to modern-day frameworks since svelte enables developers to ship optimized compiled-code instead of shipping their own code written in conjunction with modern frameworks such as Angular.Js, View.Js, and React.Js.
Kimicom
October 19, 2023
It's a bit old in my opinion, considering Sapper is deprecated and SvelteKit is the new thing for Svelte, but the content from Max is good as always.
Gary
August 23, 2023
I think the problems with buying some of these courses when they are created so early on (in order to attract the audience and be quick to the market) is the frameworks change and the course is very quickly out of date. I think this course is "Ok" for general topics but just on an average scale. The Svelte docs are already very good and this course needs to be updated to use Typescript as well as Sveltekit.
Jakub
August 8, 2023
Good source of knowledge for developing with Svelte, uses older Sapper instead of current SvelteKit but still should give good idea how things work.
Roger
August 4, 2023
There were a couple of things in the last video about rendering components in places other than the root App file that were said very quickly. I wasn't able to grasp those concepts, and I'd like to know how they work, but Max flew by them. Otherwise, the course is good so far.
YaChin
July 27, 2023
Easy to get the project started and set up. Clear explanations and good pacing, it's been a good learning experience so far.
Jan-Eric
July 23, 2023
I really liked the length of the course. The course was not too long and at the same time the content was not too short. In addition, I find it very good that some special features of svelte were shown in comparison to other frameworks. HOWEVER, I must say that the course is now much too OUTDADET. SvelteKit must be a part of this course! A really big part of it. I also missed an introduction to Skeleton UI.
Timothy
July 18, 2023
I have taken other of Max's courses and they are all great. He builds from nothing so that you get a complete understanding of the course topic. He demonstrates each subject and applies it to a realistic course project which builds as you go through. He's easy to listen to and the course content is really well explained.
Torsten
July 18, 2023
Great course, but desperately needs updating. Several vulnerabilities reported after 'npm install' since world has moved on since the creation of this course.
Dingo
July 8, 2023
Seriously outdated. Sapper is replaced by sveltekit. I hoped that course will be updated, but to no avail.
Nate
March 22, 2023
Love the topic, but it's now outdated as it's missing Sveltekit. If this course got updated, it'd be 5 stars.
Anonymized
March 19, 2023
It was a great course from zero, my only problem was finding out the hard way Sapper is discontinued, but I still get some insights that will be useful in SvelteKit practicing.
Andris
March 16, 2023
What I like: - course is well structured and feeds info in small bite sized chunks, easy to follow - instructor explains deeper concepts on how Svelte utilizes JavaScript, makes you see big picture - you have a course project that you can code along What I don't like: - I am new to VSCODE and it would be real nice if some shortcuts/snippets could be explained along the way - the method naming and overall structure of the course project is a bit messy, some MVC and CRUD concepts would be welcome Overall: - This course quickly bootstrapped me into Svelte. Definitely recommend!
Shawn
March 7, 2023
Schwarzmüller courses are always amazing, full of details with easy to understand steps, with a pace that anyone can follow and enjoy.
Jean
July 31, 2022
Quite good, for when it was up to date. Since then, it seems the author doesn't want to update this course, and is more interested in React, so Svelte and Sveltekit is not on his priority. Don't expect an up to date course here.

Coupons

DateDiscountStatus
5/17/201993% OFF
expired

Charts

Price

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

Rating

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

Enrollment distribution

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

Related Topics

2360566
udemy ID
5/10/2019
course created date
5/17/2019
course indexed date
Bot
course submited by