Mô tả

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.

Bạn sẽ học được gì

SvelteJS from scratch, with zero knowledge assumed

All the theory and practical applications of Svelte

Core concepts and advanced techniques to build Svelte applications

Yêu cầu

  • Basic JavaScript knowledge is required
  • NO prior knowledge about SvelteJS or any other JavaScript framework or library is required

Nội dung khoá học

19 sections

Getting Started

9 lectures
Introduction
02:39
Why Svelte?
07:13
What is Svelte?
04:29
Join our Online Learning Community
00:22
Setting Up a First App & The Course Project
11:09
Writing Some Svelte Code
07:26
Course Outline
04:48
How To Get The Most Out Of The Course
03:27
Course Resources
00:54

Base Syntax & Core Features

16 lectures
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
Time to Practice: The Basics
1 question
Wrap Up
01:16
Useful Resources & Links
00:01

Working with Conditionals & Loops

10 lectures
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 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
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
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
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
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
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:16
Binding to Component References
02:49
Validating Forms & Inputs
06:42
Wrap Up
00:58
Useful Resources & Links
00:02

Course Project - Bindings & Forms

8 lectures
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
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

Course Project - Stores

13 lectures
Module Introduction
01:13
A Possible Error
00:11
Setting Up a Store
03:00
Using a Custom Store
08:09
Tapping into the Store from Different Components
05:06
Adding a "MeetupDetail" Component
12:33
Preparing the "Edit Meetup" Form
05:09
Continuing Work on the "Edit" Feature
09:13
Adding a "Delete" Functionality
03:22
Adding a "Filter" Component
08:48
Some Final Steps
02:36
Wrap Up
00:48
Useful Resources & Links
00:02

Motion, Transitions & Animations

11 lectures
Module Introduction
00:53
Animating Values with a Tweened Store
06:54
Using a Spring Store Instead
08:20
Preparing a Transition Example
03:38
Element Transitions
06:30
More on Transitions
05:17
Using Different "in" and "out" Transitions
01:30
Animating Passive (Affected) Items
02:50
Deferred Transitions
00:08
Wrap Up
00:47
Useful Resources & Links
00:02

Course Project - Transitions

5 lectures
Module Introduction
01:03
Animating the Modal
03:26
Animating the Meetup Items
04:53
Animating the "Favorite" Badge & Wrap Up
01:25
Useful Resources & Links
00:02

Network Interaction via Http

10 lectures
Module Introduction
01:32
Adding a REST API
02:44
Sending Data via a POST Request
06:58
Showing a Loading Indicator & Sending Correct Data
03:16
Fetching & Transforming Data
04:12
Things to Consider
02:48
Using the "await" Block
03:35
Http + A Store
05:34
Wrap Up
00:59
Useful Resources & Links
00:02

Course Project - Http

10 lectures
Module Introduction
00:34
Storing Meetups on a Server
09:16
Fetching & Transforming Data
04:53
Adding a Loading Spinner
05:44
Updating via PATCH
06:32
Sending "Favorite" Updates & Deleting Data
03:56
Fixing the Order of Items
01:09
Adding Error Handling
07:13
Wrap Up
00:47
Useful Resources & Links
00:02

Special Elements

6 lectures
Module Introduction
00:35
Dynamic Components
07:22
Recursive Components
06:10
Accessing Windows, Body & Head
06:45
Cross-Component Scripts
05:38
Useful Resources & Links
00:02

Routing & Server-side Rendering with Sapper

17 lectures
Module Introduction
00:46
What and Why?
04:58
Understanding the Folder Structure
02:53
Inspecting the Web Page
02:20
Filenames & Routes
06:45
Error & Layout Pages
02:16
Preloading in Components
05:12
Pre-fetching Data
06:31
Migrating the Meetup Project Files into the Sapper Project
06:45
Fetching Data on the Client Side
09:14
Prefetching Data on the Server
06:12
Syncing Fetched Data & the Store
03:32
Editing & Deleting Meetups
01:58
Rendering the MeetupDetail Page
07:49
Adding Global CSS
00:43
Wrap Up
00:37
Useful Resources & Links
00:02

Deployment

8 lectures
Module Introduction
00:35
Different App Types & Deployment Options
04:35
Building the App
04:38
Rendering Content Correctly on the Server
02:52
Deploying a SSR App
03:19
Hosting a Static Site
04:49
Wrap Up
00:42
Useful Resources & Links
00:02

Course Roundup

3 lectures
Svelte vs React vs Angular vs Vue
08:56
Course Roundup
00:55
Bonus Content
00:20

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.