English | MP4 | AVC 1920×1080 | AAC 48KHz 2ch | 5h 28m | 1.33 GB
Build powerful, reactive, great-looking UI web experiences with this front-end compiler and its framework.
This course will take you through three core projects to help you build effective, reactive, and attractive apps with Svelte, demonstrating its intrinsic benefits, including less code and impressive reactivity/state management along the way.
Our first project, a vCard generator app, will demonstrate the modularity and reactivity web applications you can develop with Svelte. We will build reusable and dynamic components that we will later enhance with more advanced features. Sections on animation and transitions are included to make applications look as good as they perform!
Our second project will be a fully functional Kanban board application, similar to Trello. This application will also have effective state management, by making use of stores and other key Svelte features.
Our final application will be based on the previous Kanban board application but making use of Sapper, the official Svelte framework. However, we will build this application with Sapper, the official Svelte framework. We will learn how to create web apps with Sapper and master its most useful features, such as routing and prefetching.
We will also provide an introduction to testing Sapper applications with Cypress, and we finish the course by deploying our application in two different ways: as a static page, and as an SEO-optimized server-side rendered (SSR) application.
Learn
- Build real-life web applications using Svelte and its associated framework, Sapper
- Create highly reactive and modular Svelte components that are scalable and reusable within one or more web applications
- Explore Svelte’s advanced features that allow us to create and design beautiful and smooth user experiences
- Discover Sapper’s great features such as routing, service workers, code-splitting, single-page applications (SPA) or server-side rendered (SSR) applications optimized for SEO
- Deploy your apps while connecting them to services such as a database or RESTful APIs
- Test Sapper-built applications using Cypress to avoid any regressions
Table of Contents
Introduction and Starting Our First Project
1 Course Overview
2 What Is Svelte and Why Should We Learn It
3 Setting Up Our Work Environment
4 Analyzing the Svelte Workspace
5 Creating a Hierarchy of Components
6 Starting Our First Project – vCard Generator
Reactivity and Events
7 Adding Reactivity with Dynamic Attributes
8 Reacting to DOM Events
9 More On Events
10 Two-Way Binding
11 Conditional Classes
Enhancing Our Application
12 Dispatching Events
13 Two-Way Binding Between Components
14 Using Slots
15 Conditional Rendering
16 Reactive Statements
Transitions, Animations, and Our Second Project
17 Basic Transitions
18 Enhancing Transitions
19 Animating Elements
20 Using Lifecycle Functions
State Management
21 State Management with Stores
22 Using Stores in Our Application
23 Motion with the Svelte Motion Module
24 Connecting To a Database
25 Options On Deploying Svelte Apps
Sapper Framework
26 Starting with Sapper
27 The Sapper App Structure
28 Routing
29 Preloading
Testing and Deploying Our App
30 Introduction to Testing with Cypress
31 Deploying Our App as a Pre-Rendered Static Site
32 Deploying Our App as a Dynamic SSR App
33 Course Review
Resolve the captcha to access the links!