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
 
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
 
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
 
ben profile image
Ben Halpern •

Really nice

Collapse
 
jacobherrington profile image
Jacob Herrington (he/him) •

quite

Collapse
 
klausbert profile image
Klausbert •

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

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