Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

Svelte & SvelteKit: The Complete Guide [2025 Update]

Svelte & SvelteKit: Hướng dẫn Toàn diện [Cập nhật 2025]

Svelte & SvelteKit: Hướng dẫn Toàn diện [Cập nhật 2025]

Xây dựng & Triển khai Ứng dụng Web Full Stack, Hiệu suất Cao, Render từ Phía Máy chủ, Hoạt động ngay cả khi JavaScript bị Tắt.

4.7
(1,018 đánh giá)
8,166 học viên
Giảng viên
Ali Alaa
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 349.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
28.0 giờ video
446 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 23/09/2026

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

Học mọi thứ về Svelte từ Cơ bản.
Học mọi thứ về SvelteKit.
Sử dụng SvelteKit để tạo ứng dụng web full stack hiệu suất cao.
Tạo ứng dụng hoạt động mà không cần bật JavaScript.

Yêu cầu

Yêu cầu có kiến thức về JavaScript.
Có kiến thức TypeScript cơ bản là một lợi thế.
Kiến thức SQL cơ bản sẽ hữu ích ở một số phần.

Đối tượng phù hợp

Dành cho lập trình viên JavaScript/Front-end muốn học mọi thứ về xây dựng web component với Svelte.
Dành cho lập trình viên Full stack muốn xây dựng ứng dụng hiệu suất cao, render từ phía máy chủ với SvelteKit.

Nội dung khóa học

19 phần • 207 bài giảng
1 Trước khi Bắt đầu
2 Svelte là gì?
3 Svelte vs. React
4 Svelte vs. SvelteKit & Tạo Dự án SvelteKit Mới
5 Pure Functions
6 Hàng đợi Microtask
7 Cơ bản về Svelte Component
8 Thêm Reactivity vào Component
9 Lưu ý Nhanh
10 Tìm hiểu sâu về Reactivity dựa trên Signal
11 Tìm hiểu sâu về Reactivity dựa trên Signal (tiếp theo)
12 Thêm về Derived State
13 Không sử dụng Effects để Tính toán Giá trị Dẫn xuất
14 Bạn có thể không cần dùng Effects
15 $effect.pre & Các Hàm Vòng đời
16 Sử dụng Effects để Tạo Component Counter
17 Tóm tắt Phần & Giải bài tập
1 Giới thiệu Snippets
2 Truyền Snippets vào Components qua Props
3 Truyền Đối số cho Component Snippets
4 Sử dụng SASS & Directive Class
5 CẬP NHẬT: Tính năng Mới cho Thuộc tính Class
6 Mở rộng Thuộc tính Phần tử HTML Button
7 Sử dụng Directive Style
8 Bộ chọn CSS Toàn cục (Global)
9 Truyền Biến CSS qua Props
10 Chuyển tiếp Events & Custom Events
11 Nổi bọt, Bắt giữ và Ủy quyền Sự kiện (Event)
12 Tương tác Component Theo chương trình với Component Exports
13 Render Động với
14 Tóm tắt Phần
1 Javascript Proxies và Object Setters & Getters
2 Deep State Reactivity trong Svelte
3 Gỡ lỗi trong Svelte
4 Hiển thị Danh sách Dữ liệu (Vòng lặp #each & Thẻ @const)
5 Xử lý Xóa Phần tử khỏi Mảng một cách Chính xác
6 Immutable Raw State
7 Component Bảng tính: Khởi tạo & Hàm Hỗ trợ
8 Component Bảng tính: Render Bảng với Ô và Giá trị
9 Component Bảng tính: Chọn & Chỉnh sửa Ô
10 Component Bảng tính: Cập nhật Giá trị Ô
11 Component Bảng tính: Xử lý Hàm SUM & MULTIPLY
12 Component Bảng tính: Ràng buộc Prop Dữ liệu với $bindable()
13 Component Bảng tính: Thay đổi Màu nền và Màu chữ Ô
14 Component Bảng tính: Tóm tắt
1 Khởi tạo Component Chuyển đổi Tiền tệ
2 Tính toán Giá trị Cơ sở và Mục tiêu bằng Effects
3 Tính toán Giá trị Cơ sở và Mục tiêu bằng Callbacks
4 Lưu ý Nhanh
5 Tạo "Writable Derived" với Object Setters và Getters
6 Lấy Dữ liệu Tiền tệ từ API & Sử dụng Khối {#await}
7 Giới thiệu Reactive Classes
8 Đóng gói Bộ chuyển đổi Tiền tệ vào một Reactive Class
9 Tùy chỉnh Setters và Getters cho Thuộc tính State Class
10 Giải bài tập
11 Trích xuất Class thành Class Tái sử dụng và Thêm Tính năng
12 Reactive Classes Tích hợp sẵn
13 Tóm tắt Phần
1 Giới thiệu Universal Reactivity
2 Trích xuất Logic trong một Hàm
3 Trích xuất Logic với Classes
4 Chia sẻ State sử dụng Object Setters và Getters
5 Chia sẻ State sử dụng Classes
6 Chia sẻ State với Proxy
7 Định nghĩa Effects Toàn cục cho State Dùng chung
8 Lưu trữ State Dùng chung vào LocalStorage với Effects
9 Lưu trữ State Dùng chung vào LocalStorage sử dụng Classes với Setters & Getters
10 $effect.tracking()
11 Sử dụng createSubscriber để Theo dõi Vị trí Cuộn
12 createSubscriber hoạt động như thế nào?
13 Sử dụng createSubscriber trong một Class Tái sử dụng
14 Tóm tắt Phần
1 Giới thiệu Context API
2 Chia sẻ State Phạm vi với Context
3 Xử lý Components không có Context Cha
4 Đóng gói Hàm Context
5 Cài đặt và Sử dụng Konva Theo cách Mệnh lệnh
6 Tạo Component Konva Stage
7 Tạo Component Konva Layer
8 Tạo Component Konva Rect
9 Xử lý Sự kiện Konva
10 Xử lý Cập nhật Props
11 Hỗ trợ Ràng buộc Prop
12 Sử dụng Component Exports để Truy cập Konva Nodes Bên ngoài Component
1 Giới thiệu Actions
2 Action Longpress
3 Action Tippy.js
4 [CẬP NHẬT] Attachments
5 Special Elements
6 Error Boundaries
7 Ràng buộc Kích thước
8 Ràng buộc Phần tử Media
9 Giới thiệu Script Module
10 Chia sẻ Dữ liệu qua các Thể hiện Component
11 Điều khiển Nhiều Video với Script Module
1 Directive Transition
2 Tạo hiệu ứng động cho Tiers và Images
3 Key Block Transitions
4 Directive Animate và FLIP Animations
5 Transition Crossfade
6 CSS Transitions Tùy chỉnh
7 JS Transitions Tùy chỉnh
8 Animations Tùy chỉnh
1 Giới thiệu SvelteKit
2 Tạo Ứng dụng SvelteKit Mới với Tailwind & DaisyUI
3 Tổng quan Cấu trúc Thư mục, Bí danh $lib và Bí danh Tùy chỉnh
4 Tiện ích mở rộng & Cài đặt VSCode
1 Tổng quan Pages & Layouts
2 Tạo Routes & Điều hướng giữa các Routes
3 Tham số Route Động
4 Lồng Pages & Layouts
5 Sửa đổi Layouts theo Điều kiện
6 Layout Groups
7 Thoát khỏi Hệ thống phân cấp Layouts
8 Rest Parameters
9 Optional Parameters
10 Parameter Matchers
11 Hoàn thiện & Dọn dẹp Marketing Group
1 Tổng quan Load Functions
2 Universal Load Functions
3 An toàn Kiểu dữ liệu Không tốn công với Generated Types
4 Server Only Load Functions
5 Layout Load Functions
6 Truy cập Dữ liệu Cha trong Load Functions Con
7 Truyền Dữ liệu từ Pages sang Layouts
8 Tạo Endpoints
9 Xử lý Yêu cầu POST trong Endpoints
10 Xử lý Pages & Endpoints trong cùng một Route
11 Gửi Yêu cầu Fetch trong Load Functions
12 Truyền Svelte Components từ Load Functions
13 Triển khai Phân trang sử dụng URL Search Params
14 Điều chỉnh Nội dung tùy theo Khả năng sử dụng JavaScript
15 Hàm Phân trang "Tải thêm Bài viết"
16 Tạo Trang Bài viết Blog Đơn lẻ
17 Chạy Yêu cầu Song song với Promise.all
18 Truyền Dữ liệu Từ Server Load Functions đến Client
19 Sử dụng beforeNavigate & afterNavigate để Thêm Thanh Tiến trình Tải
1 Tổng quan Hooks
2 Tổng quan Handle Hook
3 Handle Hook trong Thực tế
4 Locals Object là gì & Tại sao Không nên Bảo vệ Routes trong Layout Load Funcs
5 Sử dụng Handle Hook & Locals cho Xác thực
6 Tùy chọn Hàm Resolve
7 Thêm về Hàm Fetch: filterSerializedResponseHeaders & handleFetch
8 Xử lý Lỗi Dự kiến
9 Xử lý Lỗi Không mong đợi với Hooks
10 Universal Hooks: Reroute & Transport
1 Thêm Layout vào blog/[id]
2 Phụ thuộc Load Functions
3 Vô hiệu hóa Load Functions
4 Chạy lại Load Functions khi có Lỗi
5 Tùy chọn Liên kết & Tải trước Code & Dữ liệu của Routes
1 Sử dụng Biến Môi trường
2 Server Only Modules
3 Tổng quan Cấu trúc Ứng dụng & Cơ sở dữ liệu
4 Thiết lập Drizzle & Chạy PostgreSQL với Docker
5 Tạo & Di chuyển Schema
6 Nạp Dữ liệu Giả vào Cơ sở dữ liệu
1 Truy vấn Cơ sở dữ liệu Đầu tiên
2 Truy vấn Dữ liệu Layout Ứng dụng
3 Hiển thị Dữ liệu Layout đã Lấy
4 Hướng dẫn Markup Route Ứng dụng
5 Bố cục Workspaces & Pages
6 Bố cục Workspaces & Pages (Tiếp theo)
7 Tạo Page Route
1 Giới thiệu Form Actions
2 Xác thực Form Actions, Thông báo Thành công & Lỗi
3 Chèn Workspace Mới vào Cơ sở dữ liệu
4 Nâng cao Tiến trình Gửi Form với use:enhance
5 Tùy chỉnh Hành vi use:enhance
6 Sử dụng SuperForms & Formsnap để Quản lý Form
7 Sử dụng SuperForms & Formsnap để Quản lý Form (Tiếp theo)
8 Tái cấu trúc Form Workspace
9 Chỉnh sửa Không gian làm việc
10 Xóa Không gian làm việc
11 Mở Route trong Modal với Shallow Routing
12 Mở Route trong Modal với Shallow Routing (Tiếp theo)
13 Shallow Routing cho Route Chỉnh sửa Không gian làm việc
1 Cài đặt & Cấu hình Better Auth
2 Tạo Route Đăng nhập & Đăng ký
3 Hành động Đăng ký
4 Gửi Email xác minh với Resend
5 Điền dữ liệu Session Better Auth vào Locals Object
6 Hành động Đăng nhập
7 Hành động Đăng xuất
8 Đăng nhập bằng GitHub
9 Ghi chú cuối về Phân quyền
10 Tách logic bảo vệ đăng nhập thành một hàm
11 Truy vấn quyền truy cập Không gian làm việc để bảo vệ Route
12 Định nghĩa quyền hạn Không gian làm việc với CASL
13 Tái cấu trúc hàm kiểm tra quyền truy cập Không gian làm việc
14 Thêm kiểm tra quyền truy cập trang vào hàm của chúng ta
15 Sử dụng hàm kiểm tra quyền để bảo vệ các Route
16 Bảo vệ Route Cài đặt
17 Bảo vệ Hành động Chỉnh sửa và Xóa Không gian làm việc
18 Bảo vệ Route Trang
1 SSR, CSR & Dấu gạch chéo cuối
2 Pre-rendering Route và Build & Xem trước Ứng dụng
3 Pre-rendering Endpoint
4 Pre-rendering Route với Dữ liệu Động
5 Pre-rendering Route với Tham số Động
6 Thêm nội dung động vào trang đã Pre-rendered
1 Tổng quan về Triển khai & Adapter
2 Thiết lập Cơ sở dữ liệu Neon
3 Cấu hình và chạy Node Adapter cục bộ
4 Triển khai Node Server lên fly.io
5 Triển khai lên nền tảng Serverless (Vercel)

Giới thiệu khóa học

Svelte is a JavaScript framework that allows you to build state driven components. However what makes Svelte different from other frameworks like Angular, React and Vue; is that Svelte is a compiler. Svelte runs at build time. Which means your Svelte code will be compiled at build time into highly efficient imperative code that runs on the browser to carry out DOM operations. Other famous frameworks usually use a technique called the virtual DOM to decide how to update the DOM. This technique runs in the browser during run time. And that adds more overhead to the DOM calculations.

 

In this course we are going to learn everything about Svelte from scratch. We are going to start with the basics of signal based reactivity and we then we will create simple components. And then gradually progress and create more complex components and discuss more in depth features.

 

And while Svelte is a great tool to build components for the web, it's not an easy task to build an entire full stack application with just Svelte. That's why we have SvelteKit. SvelteKit is a framework for rapid development of robust, performant web applications. SvelteKit provides us out of the box with things like routing, server side rendering, pre-rendering and more. It provides us with a structure that we can follow to build high performance applications that are server side rendered and progressively enhanced.

 

In this course we are going to learn everything about SvelteKit. We are going to discuss pages and layouts, loading data, hooks, error handling, environment variables, pre-rendering, progressively enhanced form actions and more.

 

We are also going to use tools like PostgreSQL & Drizzle ORM for database management and BetterAuth and CASL for authentication and authorization.

 

So join now if you want to build high performance web applications with Svelte & SvelteKit!

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Javascript Frameworks
Hiển thị tất cả khoá học Svelte
Hiển thị tất cả khoá học Sveltekit
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊