Svelte 101 Workshop

This repository contains the notes and exercise projects for the Svelte 101 Workshop.

Getting started with SvelteJS Workshop

SvelteJS is a web framework that focuses on developer ergonimics as well as user experience. This workshop will introduce you to the framework by guiding you through the features and giving you challenging exercises to provide insight into the power and flexibility of SvelteJS

Learning Objectives

After this workshop you will know how to:

• create a sveltejs application
• build svelte components
• create reactive elements
• handle async api calls
• coordinate events between components
• use stores for app state
• create svelte actions
• implement transitions and animations

Workshop Logistics

• 3 hours
• September 25 at 12pm
• Virtual
• Hands on learning

Prerequesites

This is a 101 level course, but you should have some general knowledge about programming and the web. In order to get the most value out of the course, you should have two monitors so that you can watch the course and work through the exercises at the same time.

• General programming knowledge
• Knowing the basics of HTML, CSS, and JS
• NodeJS v12 installed on your computer - https://nodejs.org
• Code Editor - VS Code is popular - https://code.visualstudio.com/
• Two monitors for best experience

Workshop Outline

• What is SvelteJS?
• Why another framework? Why should I learn it?
• Basics of a Component
• Reactivity
• Stores
• Actions
• Transitions and Animations
• Testing

Notes

• Notes

Exercises

• Basics
• Reactivity
• Async
• Stores
• Routing
• Transitions
• Actions
• Testing

Bonus Sections

• Setup