# Svelte.js Tutorials on YouTube

**URL:** <https://forum.codeselfstudy.com/t/svelte-js-tutorials-on-youtube/2170>\
**Category:** General Discussion\
**Created:** [March 21, 2020, 11:11pm UTC](https://forum.codeselfstudy.com/t/svelte-js-tutorials-on-youtube/2170 "2020-03-21T23:11:03Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Josh](https://forum.codeselfstudy.com/user_avatar/forum.codeselfstudy.com/josh/32/4_2.png) [@Josh](https://forum.codeselfstudy.com/u/Josh)\
**Post date:** [March 21, 2020, 11:11pm UTC](https://forum.codeselfstudy.com/t/svelte-js-tutorials-on-youtube/2170/1 "2020-03-21T23:11:03Z")

</div>

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.

> **[Noah Glaser](https://www.youtube.com/channel/UCjWnee4Cv1MESU8ALLsHdCA/videos)**
>
> This channel is for people who are learning code and want to have fun doing it. I will be putting up a lot of tutorials and project videos showing what I am building and how I am building it. It's going to be a lot of fun, so be sure and subscribe.

---

<div class="post-metadata">

**Author:** ![Josh](https://forum.codeselfstudy.com/user_avatar/forum.codeselfstudy.com/josh/32/4_2.png) [@Josh](https://forum.codeselfstudy.com/u/Josh)\
**Post date:** [May 5, 2020, 11:48pm UTC](https://forum.codeselfstudy.com/t/svelte-js-tutorials-on-youtube/2170/2 "2020-05-05T23:48:20Z")

</div>

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

[![](https://forum.codeselfstudy.com/uploads/default/original/2X/3/39d6de7a01ce91fa263d4537cc6c5ff685e18a8d.jpeg "Learn the Svelte JavaScript Framework - Full Course") ](https://www.youtube.com/watch?v=ujbE0mzX-CU)

---

<div class="post-metadata">

**Author:** ![PaulH](https://forum.codeselfstudy.com/letter_avatar_proxy/v4/letter/p/e495f1/32.png) [@PaulH](https://forum.codeselfstudy.com/u/PaulH)\
**Post date:** [May 9, 2020, 10:17pm UTC](https://forum.codeselfstudy.com/t/svelte-js-tutorials-on-youtube/2170/3 "2020-05-09T22:17:47Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![Josh](https://forum.codeselfstudy.com/user_avatar/forum.codeselfstudy.com/josh/32/4_2.png) [@Josh](https://forum.codeselfstudy.com/u/Josh)\
**Post date:** [May 9, 2020, 10:26pm UTC](https://forum.codeselfstudy.com/t/svelte-js-tutorials-on-youtube/2170/4 "2020-05-09T22:26:16Z")

</div>

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](https://forum.codeselfstudy.com/uploads/default/original/2X/e/e87fdab2c854202226e69b7e0d8568518b74a094.png)

**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](https://sapper.svelte.dev/) too, but that’s another kind of application.

---

<div class="post-metadata">

**Author:** ![PaulH](https://forum.codeselfstudy.com/letter_avatar_proxy/v4/letter/p/e495f1/32.png) [@PaulH](https://forum.codeselfstudy.com/u/PaulH)\
**Post date:** [May 9, 2020, 10:31pm UTC](https://forum.codeselfstudy.com/t/svelte-js-tutorials-on-youtube/2170/5 "2020-05-09T22:31:22Z")

</div>

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 {{}}

---

<div class="post-metadata">

**Author:** ![Josh](https://forum.codeselfstudy.com/user_avatar/forum.codeselfstudy.com/josh/32/4_2.png) [@Josh](https://forum.codeselfstudy.com/u/Josh)\
**Post date:** [May 9, 2020, 10:42pm UTC](https://forum.codeselfstudy.com/t/svelte-js-tutorials-on-youtube/2170/6 "2020-05-09T22:42:05Z")

</div>

> [@PaulH](#):
>
> `Hello {{name}}`
> 
> It would render something like
> 
> `Hello <span id="name_to_change">World</span>`

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

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

```

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

> [@PaulH](#):
>
> my understanding is that Svelte would render and use the first version with name in {{}}

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:

```javascript
// 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:

> **[Frameworks without the framework: why didn’t we think of this sooner?](https://svelte.dev/blog/frameworks-without-the-framework)**
>
> You can’t write serious applications in vanilla JavaScript without hitting a complexity wall. But a compiler can do it for you.

---

<div class="post-metadata">

**Author:** ![Josh](https://forum.codeselfstudy.com/user_avatar/forum.codeselfstudy.com/josh/32/4_2.png) [@Josh](https://forum.codeselfstudy.com/u/Josh)\
**Post date:** [May 9, 2020, 10:45pm UTC](https://forum.codeselfstudy.com/t/svelte-js-tutorials-on-youtube/2170/7 "2020-05-09T22:45:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![PaulH](https://forum.codeselfstudy.com/letter_avatar_proxy/v4/letter/p/e495f1/32.png) [@PaulH](https://forum.codeselfstudy.com/u/PaulH)\
**Post date:** [May 9, 2020, 10:45pm UTC](https://forum.codeselfstudy.com/t/svelte-js-tutorials-on-youtube/2170/8 "2020-05-09T22:45:45Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![PaulH](https://forum.codeselfstudy.com/letter_avatar_proxy/v4/letter/p/e495f1/32.png) [@PaulH](https://forum.codeselfstudy.com/u/PaulH)\
**Post date:** [May 9, 2020, 10:46pm UTC](https://forum.codeselfstudy.com/t/svelte-js-tutorials-on-youtube/2170/9 "2020-05-09T22:46:53Z")

</div>

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. 😉