DEV Community

Cover image for ⏰ Svelte Crash Course (in 10 pics!)

⏰ Svelte Crash Course (in 10 pics!)

hexrcs on October 19, 2019

Originally posted on Twitter as a thread: https://twitter.com/hexrcs/status/1185186492982943744 Huge Update: Video Version Now Availab...
Collapse
 
mauro_codes profile image
Mauro Garcia •

OMG! This post was amazing! After finishing the official Svelte tutorial, I can tell that you managed to cover many important topics with very few words!

Thanks! We need to start talking more about Svelte and the message behind the framework

Collapse
 
hexrcs profile image
hexrcs The Method Coder •

Thanks a lot for the kind words! Glad you liked it! 😄

More Svelte users, better ecosystem 😄

Collapse
 
dmitrykurmanov profile image
Dmitry Kurmanov •

Hello! Thanks for the great article!

If I understand correctly, there is a typo here.

I think that "Setting a prop is just like doing regular HTML." should be "Setting a prop is just like doing regular JS".

Collapse
 
hexrcs profile image
hexrcs The Method Coder •

Hi, it's actually not a typo. What I meant was setting props in regular HTML <img alt="Nice image" src="nice-img.jpg"> (image tag with alt and src prop/attribute) is exactly the same in Svelte's template.

Collapse
 
dmitrykurmanov profile image
Dmitry Kurmanov •

I've got it.Thanks!

Collapse
 
rdewolff profile image
Rom •

Very nice visuals! That help a lot to grasp the concept you explain very quickly! Great job!

Collapse
 
hexrcs profile image
hexrcs The Method Coder •

Thanks! 😁

Collapse
 
seanmclem profile image
Seanmclem •

Could you elaborate on setting props, in example 5? You export dark, so you can set it? But you set color, not dark. It's the one thing I don't understand

Collapse
 
hexrcs profile image
hexrcs The Method Coder • • Edited

Thanks for asking, I see I should have made it more clear there.

So we are dealing with 2 components here, a simpler component CoolDiv.svelte (whose code is not shown), and the component we are looking at. Let's say it's called CoolDivWithText.svelte. All the code shown here belongs to CoolDivWithText.svelte.

The dark prop is on CoolDivWithText while color prop is on CoolDiv. CoolDivWithText wraps around CoolDiv; instead of offering arbitrary color options, we limit it to only allow dark theme or bright theme.

(I'm thinking of remaking this example)

Edit: I've updated the image in the article. Here is the original one this comment was talking about.

Collapse
 
seanmclem profile image
Seanmclem •

I'm just totally new to Svelte, but I really like this approach to crash-course.

Thread Thread
 
hexrcs profile image
hexrcs The Method Coder • • Edited

Glad you liked it! I'm also working on a GraphQL crash course, which I will publish soon.

I updated the 5th pic, by the way. Hopefully, it's less confusing this time.

Sometimes we can become biased and miss the readers' point of view. It's hard to unlearn stuff. 😛 Thanks for pointing it out!

Collapse
 
cameronapak profile image
cameronapak •

Thanks for creating this post! Reactive Statements remind me of the useEffect hook in React

Collapse
 
hexrcs profile image
hexrcs The Method Coder •

Yes! But if you are using it to set derived states, you don't have to specify the dependencies manually.

Collapse
 
pavelloz profile image
Paweł Kowalski •

Great work! Best presentation of the "get started with svelte" ive found on the internet. Congrats :)

Collapse
 
hexrcs profile image
hexrcs The Method Coder •

Awe, thanks so much!

Collapse
 
yarmaa profile image
Yarmaa •

Thanks, this article is exactly what I was looking for :)

Collapse
 
adityapadwal profile image
Aditya Padwal •

Das ist toll!
Nice read.

It would be great to have you join the Svelte JS developers group on LinkedIn.

linkedin.com/groups/10473500

Collapse
 
hexrcs profile image
hexrcs The Method Coder •

Thanks, joining the group! (I'm not very active on LinkedIn though 😛)

Collapse
 
ferhatavdic profile image
FerhatAvdic •

Its a hot topic lately but it doesnt bring anything significant to the table.

Collapse
 
hexrcs profile image
hexrcs The Method Coder •

Speed, fully reactive state management, much smaller bundle size, write less code to do more? 😉

Collapse
 
ferhatavdic profile image
FerhatAvdic •

Yes. Thats what we already have with the popular frameworks.

Aside from that i appreciate you trying it out and letting us know what it can do.

Thread Thread
 
jligeza profile image
Jakub Ligęza • • Edited

Svelte has very good performance. If somebody wanted to make a hybrid app, this framework is a strong pick, as hybrid apps with popular frameworks often have visible performance issues.

Collapse
 
bscott profile image
Brian Scott •

This was an awesome post!!, wish I learned everything this way. Perfect crash course!

Collapse
 
bw984 profile image
Brady Walters •

Great write up. This should be considered the pre-tutorial. A nice 10,000ft view before diving into the nitty gritty.

Collapse
 
oreadweb profile image
oRead •

Svelte is very appealing but what about meta data?