Svelte.js - The Complete Guide [Video]

Book Image

Svelte.js - The Complete Guide [Video]

By : Maximilian Schwarzmüller

5 (1)

Book Image

Svelte.js - The Complete Guide [Video]

5 (1)

By: Maximilian Schwarzmüller

Overview of this book

If you want to build reactive user interfaces that load quickly and run fast, Svelte.js is a tool you shouldn't overlook! Svelte.js (or just "Svelte") is a modern JavaScript compiler that allows you to write and compile efficient and easy-to-understand JavaScript code that runs in the browser. In this course, you’ll learn how to write a frontend application using JavaScript, following the rules laid out by Svelte. The Svelte compiler will then produce a small and highly optimized JavaScript bundle which can be easily deployed. This course covers all about Svelte, helping you understand how it works, what its core features are, and how to run your final app on a real server! Svelte.js is a great alternative to JavaScript frameworks and libraries such as React.js, Angular, or Vue for building highly reactive, modern user interfaces for the web. Moreover, it enables you to build your web projects with less code and helps build faster apps!

Free Chapter

Getting Started

What is Svelte?

Setting Up a First App & The Course Project

Writing Some Svelte Code

How To Get The Most Out Of The Course

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

Setting Dynamic CSS Classes

Working with Conditionals & Loops

Module Introduction

Using "if" Statements in HTML

if, else & else-if

Outputting Lists with "each"

"each", "else" & Extracting the Index

A Closer Look at List Keys

A Closer Look at Reactivity

Module Introduction

Updating Arrays & Objects Immutably

Understanding Event Modifiers

Using Inline Functions

Course Project - First Steps

Module Introduction

Project Setup & A First Component

Different Ways of Mounting Components

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

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

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

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

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

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

Course Project - Stores

Module Introduction

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

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

Course Project - Transitions

Module Introduction

Animating the Modal

Animating the Meetup Items

Animating the "Favorite" Badge & Wrap Up

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

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

Special Elements

Module Introduction

Dynamic Components

Recursive Components

Accessing Windows, Body & Head

Cross-Component Scripts

Routing & Server-side Rendering with Sapper

Module Introduction

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

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

Course Roundup

Svelte vs React vs Angular vs Vue

Customer Reviews

5 (1)

5 star

100%

4 star

0

3 star

0

2 star

0

1 star

0

Chapter 1

Getting Started

Section 1

Introduction

Getting Started: Introduction