Svelte.js 3 and Sapper Projects

Focused View

Germán Mené Santa Olaya

5:28:41

11 View

1 Introduction and Starting Our First Project

01 Course Overview.mp4

05:16

02 What Is Svelte and Why Should We Learn It.mp4

05:22

03 Setting Up Our Work Environment.mp4

07:04

04 Analyzing the Svelte Workspace.mp4

07:43

05 Creating a Hierarchy of Components.mp4

13:04

06 Starting Our First Project vCard Generator.mp4

03:33

2 Reactivity and Events

07 Adding Reactivity with Dynamic Attributes.mp4

10:17

08 Reacting to DOM Events.mp4

08:20

09 More On Events.mp4

10:37

10 Two Way Binding.mp4

10:10

11 Conditional Classes.mp4

10:13

3 Enhancing Our Application

12 Dispatching Events.mp4

09:01

13 Two Way Binding Between Components.mp4

09:25

14 Using Slots.mp4

07:32

15 Conditional Rendering.mp4

08:15

16 Reactive Statements.mp4

13:46

4 Transitions, Animations, and Our Second Project

17 Basic Transitions.mp4

12:33

18 Enhancing Transitions.mp4

15:16

19 Animating Elements.mp4

11:06

20 Using Lifecycle Functions.mp4

13:32

5 State Management

21 State Management with Stores.mp4

11:46

22 Using Stores in Our Application.mp4

13:05

23 Motion with the Svelte Motion Module.mp4

04:25

24 Connecting To a Database.mp4

17:24

25 Options On Deploying Svelte Apps.mp4

08:13

6 Sapper Framework

26 Starting with Sapper.mp4

07:21

27 The Sapper App Structure.mp4

11:15

28 Routing.mp4

10:52

29 Preloading.mp4

12:13

7 Testing and Deploying Our App

30 Introduction to Testing with Cypress.mp4

15:38

31 Deploying Our App as a Pre Rendered Static Site.mp4

10:44

32 Deploying Our App as a Dynamic SSR App.mp4

08:24

33 Course Review.mp4

05:16

Description

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. The code bundle for this video course is available at - https://github.com/PacktPublishing/Sveltejs-3-and-Sapper-Projects

More details

User Reviews

Rating

average 0

Total votes0

Focused display

JavaScript

Germán Mené Santa Olaya

Instructor's Courses

Germn Men Santa Olaya is an engineer and a software developer. He loves programming and building web applications using Svelte and Sapper. These front-end tools allow him to build modern and complete web apps in a modular and approachable way. There are endless possibilities when it comes to web applications, and many frameworks and ways to approach them, but he believes that Svelte makes the process easy and scalable. That is the reason why he believes that it will become a mainstream and widely used tool for front-end web development in years to come.

PacktPub

View courses PacktPub

Packt is a publishing company founded in 2003 headquartered in Birmingham, UK, with offices in Mumbai, India. Packt primarily publishes print and electronic books and videos relating to information technology, including programming, web design, data analysis and hardware.