Svelte Introduction

[00:00:00]
>> Welcome, friends and enemies, to the first ever Frontend Masters Svelte workshop. I'm your instructor, Rich, and we've got a full day ahead of us. I hope you're ready. I am gonna be reading from this website, which is svelte-workshop.netlify.app. I recommend that you open that website on your own browser because it contains useful links that we're gonna be working through as the course progresses.

[00:00:25] After the course ends, this is gonna live on as a companion resource. It lives on GitHub. So issues and pull requests are welcome, if there are any changes or any fixes that you spot that need making. But other than that, let's get into it. So about this workshop.

[00:00:41] The idea is that we're gonna go from assuming that you have absolutely no knowledge about Svelte whatsoever, to being able to build a fully dynamically server-rendered progressively enhanced, personalized, interactive application. And we're gonna deploy that all in the space of a few hours. It's gonna happen in four parts.

[00:01:03] We're gonna have the introduction where I'm gonna explain what Svelte is, why you might consider using it. Then we're gonna have a series of short, interactive exercises so that you become familiar with the syntax of a Svelte component and you understand what features Svelte has. And then from there we're gonna use that knowledge to build a simple game.

[00:01:22] And finally, the main part of the course, we're gonna build that application that I mentioned. It's a lot to get through, but I think we can do it. So who am I? I'm the creator of Svelte. I created it back in 2016, a lifetime ago. My job is in the news business.

[00:01:41] I've spent my adult life working in news organizations using JavaScript to help tell stories in ways that are more interactive and data-driven. Right now, I'm a member of the New York Times graphics department. That's the day job, by night I prowl the streets of GitHub committing acts of open source.

[00:02:00] And I'm on Twitter @rich_harris. You can find me at that link and message me and learn more about Svelte. I wanna take a quick moment to thank everyone involved in producing this course, Mark and the whole team at Frontend Masters. I wanna thank our friends at Codesmith who are providing the space that we're in right now.

[00:02:23] The Svelte community of users and contributors, or Svelte Society, as we call ourselves, or if you're a fan of the Svelte loader. And I wanna thank you for being here. A little bit of housekeeping. I am gonna be using Visual Studio Code. It's a very popular editor. If you're not using it, I highly recommend it.

[00:02:42] There's a download link on the website. And we're gonna need to install the Svelte Beta extension. That provides you with syntax highlighting and also completion and all the rest of it. There are two Svelte extensions in the VSCode extension store. One of them is just called Svelte. That's the one that's been deprecated, the current one is called Svelte Beta, and that is gonna take over from the current Svelte extension.

[00:03:04] A little bit confusing, and that will probably change in a few months, but for now install Svelte Beta. And for the final part of this workshop, we're gonna be using some free online services that you will need to sign up for. The first of these is Fauna, which is a cloud database.

[00:03:20] We're gonna be using Auth0 for authentication. We're gonna be using an API called Weatherbit, which is gonna give us weather data. And that one, it will take a little bit to provision the API key. So I recommend that you do that now while I'm talking. And finally, if you wanna deploy the app as we build it, then we'll need to use Vercel.

[00:03:39] So you sign up for a free account with Vercel and download the Vercel command line interface for deploying.