DEV Community

Cover image for Svelte Web Interfaces with Svelte

Svelte Web Interfaces with Svelte

Jacob Herrington (he/him) on September 06, 2019

Did anyone else just find out that svelte is a real word? It's pretty much a synonym for lithe or slender. If you're watching the front-end JavaSc...
Collapse
 
chrisachard profile image
Chris Achard

Nice post Jacob!

I don't know if you already know this, but if you want cool syntax highlighting on your code in DEV posts, then instead of just:



```
code
```


You can do:



```html
code
```


Or:



```javascript
code
```


:)

Collapse
 
absinthetized profile image
Matteo Nunziati

It is a certain number of weeks I'm looking at svelte. My only issue is: when a bundle like bootstrap-vue or a set of material design/bulma widgets will be out?
Then I will use it! It is the most sane thing I've seen on frontend after backbone.

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

Why anyone would put vue inside a svelte project? It gives nothing extra from my point of view.
By the other part, don't mind on bootstrap as valid responsive/ui framework as it loads a considerable bunch of js and css (moreover it needs jQuery). It breaks the modularity on svelte or every SPA you could make.
In my opinion, Mustard UI could be a better approach: css only, lightweight and bootstrap 3.x like syntax. If you need some js plugin for giving some functionality that it's not on sapper/svelte neither on mustard, you can import it only wherever you need it, instead on load it across all entire project.

Regards

Collapse
 
alfiedarko profile image
Alfie Darko

Describing it as sane is very accurate

Collapse
 
jcameronjeff profile image
Jeff Cameron

Probably as soon as someone who wants it writes it an open sources it ;)

Collapse
 
luwes profile image
wesley luyten

Great writeup! Really like Svelte's approach but saying Svelte outputs vanilla JavaScript is not accurate I think. It still has a runtime, that's the svelte/internal etc in the compiled output code. That's a dependency. The same is true for Stencil. It's a tiny runtime for sure but it exists :)

Collapse
 
wrldwzrd89 profile image
Eric Ahnell

Interesting! Definitely something to keep an eye on.

Collapse
 
abduzido_dev profile image
Programador Abduzido

Amazing artcle! I loved how this workz, thks by the good news ;)

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
jacobherrington profile image
Jacob Herrington (he/him)

I'm sorry you don't like Svelte, but attacking people who use modern JS frameworks reveals that your opinion is probably just ignorance manifested.

Innovation tends to frustrate some people. 🤷‍♀️

Collapse
 
giorgosk profile image
Giorgos Kontopoulos 👀

Nice post, I like Svelte, never had a chance to use it production but why would you say "I'm not sure I'd put it in production" ? Is there any particular reason ?

Collapse
 
jacobherrington profile image
Jacob Herrington (he/him)

Mostly just because it's young. I tend to fall in the camp of stable stuff over novel stuff.

Collapse
 
blazephoenix profile image
Tanmay Naik

Do you think Svelte would find as much popularity and acceptance as a front-end framework as React? Or would it be more of a niche framework like Vue?

Collapse
 
jacobherrington profile image
Jacob Herrington (he/him)

I'm not sure. React will be around for a very long time due to the sheer volume of React code that has been written. Svelte seems like it might be a bit more niche, but I see as an evolution of the VDOM approach.

Collapse
 
ben profile image
Ben Halpern

Really nice

Collapse
 
jacobherrington profile image
Jacob Herrington (he/him)

quite

Collapse
 
gabuardi profile image
Josué Gabuardi

I have a little doubt... the way of how Svelte compile and export vanilla JS is not the same way than Angular do?

Collapse
 
klausbert profile image
Klausbert

Thanks Jacob for this heads-up.
Interesting (slender!) syntax... What about debugging?

Collapse
 
cristiadu profile image
Cristiano Faustino

The syntax looks sort of ugly I would say. Not that this makes any difference in the effectiveness of it, but still, haha.

Collapse
 
joelbonetr profile image
JoelBonetR 🥇 • Edited

Well i find the syntax is very concise and everyone with knowledge on js and html could find a point on it. Can't say the same on angular for example...
div *ngIf="whatever=[thing]"

What's the asterisk? And the brackets? Is it an array? Why should I put a templating condition as html attribute?

Damn it's like blending html syntax with a dumb ass alien child.
I've been working with angular for a year and it feels weird. I'm testing svelte for a week and it feels so nice, automagic routing (file-system based) instead on declaring things on 493873places, easy syntax, strict compiler etc... Will say more when i take the hands on for a real project