Svelte.js Tutorials on YouTube

General Discussion
1

For anyone who hasn’t seen them yet, Noah has some good Svelte.js tutorials on his channel. I’ve worked through a couple of them so far.

Check them out at the link below.

1 Like
2

Here’s a link to his new 7-hour Svelte course.

3

Looking at Svelte it seems like the page is still somewhat rendered on the client side. :thinking:

I mean, or is the inital load server side then the templates take over to client side?

4

Out of the box, Svelte is a client-side library.1 You write code in that style and then run a command that builds a JavaScript bundle.

Here’s a screenshot of my editor with one of Noah’s tutorials in it. The middle pane has the code that you write. When you’re ready to deploy, you run npm run build and it produces an optimized, minified bundle.js file that is shown in the right pane. Your backend code then can either inline that optimized JS or can load it with a <script> element.

Svelte code
Svelte code1917×591 220 KB

Edit: the build size is 5.3K for the JS and 135 bytes for the CSS, since it doesn’t need to include a giant framework.

React and Vue work in similar ways. You write React or Vue code and then build the output to get an optimized JS file that you could include in your project in whatever way makes sense.

1 You can render Svelte code on the server too, but that’s another kind of application.

1 Like
5

Hmm, I guess what I am looking for is an initial server side render, and then updating client side, but without loading a templated view on the server side render, if that makes sense.

So instead of having the server render.

Hello {{name}}

It would render something like

Hello <span id="name_to_change">World</span>

But my understanding is that Svelte would render and use the first version with name in {{}}

6

If you want that output, your server-side templates could be written like this:

Hello <span id="name_to_change">{{name}}</span>

Whatever you want available on the frontend, you can just write it in the templates.

I’m not sure if I understand what you mean. I think I’d have to see exactly what the page looks like to be able to know if a JS framework could take over the page easily.

I don’t really know Svelte, but I think you could mount Svelte components on a page something like this:

// This would be the main file that defines your functionality
import FoodWidget from "./FoodWidget.svelte";

// This would place the widget inside of the element with id="foodWidget"
// after the page loads in the browser.
const foodWidget = new FoodWidget({
    target: "#foodWidget",
    props: {},
});

Here’s more about Svelte:

1 Like
7

I suspect that Gatsby (React) with an Express API might be the simplest way to do what you’re trying to do, because you write fast, optimized, server-rendered code that automatically turns into dynamic frontend code when the page loads. You don’t have to think about the separation between frontend and backend as much that way.

1 Like
8

Interesting, indeed it seems like you can keep Svelte sandboxed into its own components, so it doesn’t have to be the whole app. I might try port some widgets over to it first and see how that goes…

1 Like
9

Hmm, ok, I am going to digest all of this once again then, and maybe circle back around to do another migration in a few months. :wink:

1 Like