Welcome to the Frontend Masters Svelte workshop! This is the companion site to the video course that, if you're one of the select few, you're currently watching LIVE; after the course ends it will live on as a companion resource, full of code samples and links and what-have-you.
Issues and pull requests are welcome.
About this workshop
Here's the plan: we're going to go from 'I had heard of Svelte, but wasn't sure how to pronounce it' to building a dynamically server-rendered, progressively-enhanced, personalisable, interactive (but JS-optional!) PWA, all in the space of a few hours.
It'll happen in four parts:
- The introductory waffly bit, where I explain what Svelte is
- A series of short interactive exercises to teach you the fundamentals
- Building a simple game
- Building a complete app
It's ambitious, but I think we can do it. Who's with me?
About me
Speaking of 'me', I suppose I should tell you a bit about myself.
I've spent my career in digital journalism, using JavaScript to tell stories in interactive and data-driven ways. These days I'm a proud member of the New York Times Graphics Department.
That's the day job. By night, I work on open source projects like Svelte, which I started in 2016.
What else do you want to know? AMA. You can find me on Twitter at @rich_harris.
Acknowledgments
Let me take this opportunity to thank Marc and the rest of the team at Frontend Masters, who work hard to make courses like this one possible; our friends at Codesmith, who gave us space to record the video; the Svelte community of users and contributors, and YOU, for being here. You're all wonderful.
Housekeeping
I'm going to be using VSCode with the Svelte Beta extension installed (not the one that's just called 'Svelte' — Svelte Beta is a fork of that extension, and will replace it in the near future). I strongly recommend you do the same.
For the final stage of the workshop, we're going to use various free services that you'll need to sign up for. I recommend doing this now, so that everything is ready for later:
- Fauna
- Auth0
- Weatherbit (this one takes a little while to provision API keys, so don't wait until you need it!)
- Vercel (optional — so that you can deploy your app). You'll also need to install (or update) the Vercel CLI globally with
npm i -g vercel
Okay, ready?
Let's do this.