Up and running with Svelte 3

26m

4.7

417

people completed

Bookmark

Download

RSS

JavaScript community has been shaken recently by a release of Svelte 3 and for a good reason - it's a completely different approach than React or Vue. To quote the docs:

"Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app."

The best part? If you have 26 spare minutes you can learn the basics of Svelte 3 and start building your own apps with it!

Enjoy!

Instructor

Tomasz Łakomy

Frontend Engineer at Stedi, building Cloudash. His interests include React, AWS, testing, Svelte, VR, app performance and... jQuery, which he still thinks is the best library ever.

Learn about Tomasz's story with egghead.

Course content (20 lessons)

1
WTF is Svelte?
1m 7s
2
Create a new project with Svelte 3
33s
3
Add data to HTML markup using Svelte 3
35s
4
Add styles to Svelte 3 component
48s
5
Create a new Svelte 3 component to render it inside of another component
1m 16s
6
Declare and pass in properties to a Svelte 3 component
1m 18s
7
Compose components with slots in Svelte 3
1m 18s
8
Use named slots to compose multiple components in Svelte 3
1m 45s
9
Render HTML directly into a component in Svelte 3
46s
10
Use Svelte 3 transitions to gracefully show and hide DOM elements
1m 39s
11
Use reactive declarations to compute component state in Svelte 3
1m 27s
12
Loop over and render a list of data using an `each` block in Svelte 3
1m 15s
13
Use await block to wait for a promise and handle loading state in Svelte 3
1m 23s
14
Use DOM events and event modifiers in Svelte 3
1m 22s
15
Use an onMount lifecycle method to fetch and render data in Svelte 3
1m 4s
16
Use Svelte 3 stores to share data between multiple unrelated components
1m 44s
17
Set a value to a Svelte 3 store
45s
18
Use auto-subscriptions in Svelte 3 to avoid memory leaks when using Stores
1m 17s
19
Tween a value and dynamically update the DOM with Svelte 3
1m 32s
20
Create a new Svelte project with TypeScript support
3m 35s

illustration for Up and running with Svelte 3

Start Watching

Instructor

Tomasz Łakomy

Frontend Engineer at Stedi, building Cloudash. His interests include React, AWS, testing, Svelte, VR, app performance and... jQuery, which he still thinks is the best library ever.

Learn about Tomasz's story with egghead.