What is Svelte? A JavaScript Framework that Simplifies UI Creation

[00:00 - 00:09] Let's talk a little bit about Sfelt and why you should learn it, what it is, and how it simplifies the experience of making stuff on the web. So Sfelt is a JavaScript framework.

[00:10 - 00:27] Technically, it's a compiler, but you can think of it as a JavaScript framework just like others you might have heard of, like React or View or Angular. Its selling point is that it abstracts the hard parts of interacting with the document object model which we'll be talking about a bit in this course, which we abbreviate as a DOM.

[00:28 - 00:41] Because it uses some magic behind the scenes to render reactive updates when necessary. Enough about theory though, on a high level, a Sfelt application is powered by a series of Sfelt files where each represents a component.

[00:42 - 00:54] And this component hierarchy makes it really easy to kind of structure applications with distinct and clean bits of code all living in their own files . What do those files contain? Up to three elements.

[00:55 - 01:05] First would be a script tag, second would be a style tag, and third would be some markup. So let's look at the below example for this functional or this toy example, app .sfelt.

[01:06 - 01:14] At the top you see a script tag, which is where logic lives. And by logic, I mean anything that you would originally write in vanilla JavaScript.

[01:15 - 01:23] So here we're instantiating a new variable and we're calling it instructor and it has the value of Connor. This could be let number equals two.

[01:24 - 01:30] This could be let function equal and then a function. Anything JavaScript related lives in the script.

[01:31 - 01:41] The second bit of content is going to be our markup. And so this is most akin to HTML as you would normally see in an HTML file.

[01:42 - 01:54] Here we're printing an h1 or a header one tag with the following content inside . But notice that there's this bit of difference in tags where we're wrapping instructor, which is a variable name in these mustache curly braces.

[01:55 - 02:08] And that's so that we can take our logic from the script tag and embed it directly within our markup, which is something that Svelte offers that vanilla JavaScript and vanilla HTML do not. So here you can already see how Svelte makes things easier.

[02:09 - 02:14] Third and finally is styles. So this is akin to CSS as you're used to seeing it.

[02:15 - 02:21] We target elements that exist within our markup and give them rule sets like so . That lives within our style tag.

[02:22 - 02:26] So that's how Svelte works. Obviously, you're going to see more examples as we get started.

[02:27 - 02:35] But let's talk about why Svelte and why I in particular love using it for data visualization. The first reason is because Svelte was designed with visualization in mind.

[02:36 - 02:49] Svelte was created by Rich Harris, who at the time was a graphics journalist at the Guardian and then moved to the New York Times shortly thereafter. Given that its creator made graphics for a living, it's no surprise that it works well for graphics development.

[02:50 - 03:05] You see data is integrated into Svelte's markup more intuitively than any other framework, and it makes it a tool well suited for designing data visualizations. Svelte also has reactivity built in with certain declarations and doesn't use complex hooks like the React world does.

[03:06 - 03:19] So if you're questioning whether Svelte is the right framework for you, just remember that it was created by somebody who worked with graphics every day, meaning the language is designed is particularly well suited for that purpose. And finally, it's a good time to be learning Svelte.

[03:20 - 03:30] And the framework was ranked number one most loved framework in the 2021 stack overflow developer survey. It got into the highest level of satisfaction in the year before state of JS survey.

[03:31 - 03:39] It's used in visualization context more and more. As you can see, there's blog posts by Amelia Wattenberger by me.

[03:40 - 03:57] And newsrooms are talking more and more about how they're using Svelte for their election rigs and just graphic rigs generally. So we're at this perfect kind of intersection where people are frustrated with D3, which we'll learn more about soon and how it has such a steep learning curve.

[03:58 - 04:21] And so Svelte is this perfect tool to meet the converging trends, because it's more intuitive than existing frameworks like React, and because it removes the need for D3's confusing selection methods and imperative style of coding. So if you want to learn more about Svelte, I've went ahead and linked five blogs of people who are in kind of thought leaders and industry leaders that know Svelte really well.

[04:22 - 04:35] And also this felt tutorial, Svelte.dev and learn.Svelte.dev are really good places to start to just learn the fundamentals. In the next lesson, we'll go ahead and talk about how to use it for charting and some of the fundamentals of that.

[04:36 - 04:39] But I would recommend having a little bit of context for Svelte before we get started.