Photo of a computer screen showing an IDE with an open Svelte
            project

Online Workshop

Svelte & SvelteKit

Jan. 30th – Feb. 1st, 2024 – 14:00 to 18:00 CET

Take your Svelte and SvelteKit skills to the next level for 350€

Book your ticket
350€

Svelte is great choice for building fast and light-weight web applications. Its unique approach of generating reactive code at compile time instead of relying on a runtime, moves work out of the browser and results in highly efficient code. Combined with SvelteKit, it enables engineers to build large applications with ease while being able to choose among patterns like SPA, MPA, SSR, SSG on a per-route basis.

This workshops takes participants through the entire process of building a complete, real-world SvelteKit application and teaches the underlying concepts along the way. Each topic is introduced via an in-depth presentation followed by a practice exercise.

All examples and practical assignments from the workshop are available publicly on GitHub.

workshop participants discussing their results and asking questions

Additional Information

Duration & location

The workshop takes place over three afternoons on Jan. 30th, 31st, and Feb. 1st 2024, 14:00 to 18:00 CET each. That allows participants to use the mornings to exercise or keep up with work. The workshop is run completely online and remote.

Number of participants

To ensure the highest quality, we accept up to 20 participants.

For who?

This workshop is intended for developers who have some experience with JavaScript and frontend development in general, that want to get started with Svelte & SvelteKit.

Prerequisites

We will send a detailed list of instructions for preparation, including the installation of tools, etc. Additionally, we will share a Github project with workshop materials. This information will be provided closer to the workshop date.

Pricing

The workshop will cost 350€ for all three days. Included are the workshop sessions, the material and the slides for reviewing the learned lessons afterwards.

Your mentors

Huge nerd, Svelte Ambassador and lover. He's one of the creators of sveltelab.dev - a REPL for SvelteKit - built during the first Svelte hackathon that granted him and his co-creator the first place for best integration.

Paolo
                  Ricciuti

Florian has been solving frontend challenges for over 15 years, with all tools that became available. He has built and coached design and development teams of all sizes.

Florian Pichler
Happy workshop attendee smiling into the camera

Workshop overview

  1. Svelte Basics

    Rendering reactive UIs is the core functionality of Svelte. We cover Svelte’s unique approach to reactivity, the $ syntax and its template language. We then look into writing Svelte components, accepting props, and its CSS scoping feature.

  2. SvelteKit Basics

    This stage introduces SvelteKit, the project framework built on Svelte. We cover project creation and management, SvelteKit’s file system as well as creating and managing pages.

  3. Routing

    We’ll dive deep into SvelteKit’s file based routing, loading and displaying data as well as topics like route grouping, route params and redirects.

  4. Testing

    SvelteKit comes with two testing strategies: Vitest for testing components in isolation and Playwright for end-to-end testing. We cover both in depth and present approaches for testing real applications.

  5. Stores

    This stage kicks off with an introduction of what stores are and how they work. We continue with looking into implementing the three main stores: writable, readable, and derived.

  6. SvelteKit and Progressive Enhancement

    The final stage of the workshop teaches how to implement progressive enhancement with forms. We cover how to send data to an API, how to validate forms, what server folders are, and give a brief introduction into hooks. We close by looking into how to implement authentication.

a pair of hands tie an entry band around someone's arm

Book your ticket

Join our workshop and start building web services with Svelte and SvelteKit.