Remote Workshop: Svelte & SvelteKit

2pm, January 30th–6pm, February 1st, 2024

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

Tickets

Additional Information

Mainmatter Workshop: Svelte & SvelteKit

Duration & location

The workshop takes place over three afternoons on Jan. 30th, 31st, and Feb. 1st, 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.

Workshop Contents

  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

Workshop facilitators

Paolo Ricciuti is a 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.

Florian Pichler 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.

About Mainmatter

Mainmatter is a digital product agency that crafts products for clients around the globe. We have our roots in the open-source community and create digital products for clients that value code quality, robustness, dependability, and honesty.

Links