DEV Community

Cover image for Intro to Svelte πŸ¦„βš‘οΈπŸ§‘

Intro to Svelte πŸ¦„βš‘οΈπŸ§‘

Sendil Kumar on August 04, 2019

Why yet another framework to learn? πŸ€¦β€β™‚οΈπŸ€¦β€β™€οΈ If you are worried about tons of front-end frameworks and their variations out there, why ...
Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
prashanth1k profile image
Prashanth Krishnamurthy

The classification of the frameworks in this way may be easy today, but we should also be talking about what Svelte does differently and how it affects web dev in the long term? As browsers become much better in what they do - maybe, just maybe, every framework must have a part of Svelte built into them (more specifically the DOM updates, similar to Ivy in Angular). See reddit.com/r/javascript/comments/c... for a live discussion where a number of framework creators have jumped in to add their view-point on vdom vs dom updates.

If I have to choose a framework today and I am a beginner/intermediate developer: I would certainly go towards Vue or React. Larger community = more help. If I have to choose one of them - I would choose one that I personally like (Vue) or the one that my team is comfortable working in. I don't build Facebook-level apps, but from what I have seen Vue is good for me in building a scalable enterprise-grade, JS-heavy app as React.

I will incorporate Svelte in some future work. I still am not sure how Svelte can manage DOM updates under a high workload - but do not see that as a technical limitation that makes it suitable only for a "light app or blog".

Cheers.

Collapse
 
adam_cyclones profile image
Adam Crockett πŸŒ€

Angular is suitable for? πŸ˜…

Collapse
 
jappyjan profile image
jappyjan

... being deprecated πŸ˜…
... Slow applications
... Bloated applications
... Legacy applications

Thread Thread
 
adam_cyclones profile image
Adam Crockett πŸŒ€ • Edited

Architecture in angular is admittedly beautiful, but I'm moving away from Oop. I think the decipline in writing an Angular app is what it's good for and a lesson for future frameworks. It's easy to hate on angular and I am not a fan to be clear.

Collapse
 
joeberetta profile image
Joe Beretta

Love this "getting started" tutorial. I heard about Svelte some months ago but couldn't start learn it. Think I'll do it in my next side project

Collapse
 
highcenburg profile image
Vicente G. Reyes

Hi, I removed the #beginners tag. The tag should be for devs on the 0-2/10 scale. You can check the updated guidelines for the tag here :

Collapse
 
sendilkumarn profile image
Sendil Kumar

This is interesting, I still believe this is a beginner post. But I respect the decision. Thanks for letting me know

Collapse
 
highcenburg profile image
Vicente G. Reyes

This is a framework which is learned after the beginner stage. Thanks for understanding.

Collapse
 
robbsadler profile image
RobbSadler

Helpful article.

Something I would love to see is instruction on where to put static elements like images. I have been successful in putting them directly in the build output folder, but is this the correct practice? I would think they would go in the src folder and be part of the compile. But I have not been able to get the compiler to include static files. Is there a compiler directive to make this happen?

I even pulled a REPL of the svelte example that uses and references a static image and found that the image was not included in the download :). Such a simple thing, but I don't see it addressed in the docs (probably not looking in the right place).

Thanks!

Collapse
 
robbsadler profile image
RobbSadler

OK, I think I see now - really a noob w/ svelte - The static stuff goes in public, and the built stuff gets put in build. That makes sense. Did I get that right?

Collapse
 
thgh profile image
Thomas Ghysels

Typo: the first on:click={() => handleClick} should be without arrow function

Collapse
 
leastbad profile image
leastbad

It's great to see more frameworks and tools eschew the assumption that a virtual DOM is an automatic improvement.

However, in this example, I honestly don't understand why you wouldn't just use StimulusJS. Further, the claim that a Svelte template is just HTML is demonstrably inaccurate; after all, if that were the case, you wouldn't need to pre-process them.

Most of the people evaluating Svelte would be better served by Stimulus. It's powering some of the most powerful sites on the web, and the people behind it are the same folks that do Rails and Turbolinks. #winning

stimulusjs.org/

Collapse
 
adam_cyclones profile image
Adam Crockett πŸŒ€

I like that svelte harps back to the days pre angular 1. I am most interested in the compiler, does it parse and lex ES6 and how hard is that to create?

Collapse
 
codercatdev profile image
Alex Patterson

I am really digging learning more about Svelte! Here is a video tutorial using Firebase as backend.
ajonp.com/lessons/rxfire-in-svelte...

Collapse
 
joeberetta profile image
Joe Beretta