Svelte is the most beautiful web framework I've ever seen

Jesse Skinner on June 29, 2019

I first heard about Svelte a year ago, when Rich Harris presented it at JSConf EU 2018. The demo gods were a bit harsh on him, but it didn't matter... [Read Full]
markdown guide
 

Been toying with it the past few days, it's brilliantly put together and it really feels like the natural evolutionary step from React/Vue/Angular. And such a small footprint!

Svelte/Sapper + TailwindCSS + GraphQL, we're getting pretty close to Dev Nirvana here! 😎✨

 

To complement the other question about Tailwind:

What are you using to integrate GraphQL, how well does it integrate (I guess Apollo-Client?)?

 

I haven't tested GraphQL on Svelte yet, but yes, I would use Apollo. There is a 'svelte-apollo' package on npm that seems to be quite functional, the README has a few examples, including a Sapper/SSR one.

Having previously used Apollo in a NextJS project, I know how tricky it can be to integrate Apollo with an SSR framework and I don't really expect any different with Svelte. Hopefully I can find the time to play around with it soon! ;)

 

what do you use to integrate svelte with Tailwind? I see there are a couple of templates but I'd like to know one that works flawlessly

 

I came across this interesting article a few days ago, and it worked as intended after I went through all the steps.

The author of the article put together a template here if you don't want to go through the hassle of manually replicating the steps from the article, though I haven't tried it myself.

 

Follow-up to my previous comment about Svelte + Tailwind: If you're looking to use Tailwind with Sapper, this template works really well.

 

It is a very elegant framework.

The main thing keeping me away is the lack of support for TypeScript. I hear they're working on that though.

In the mean time, the net footprint of a bundle with Preact is comparable in size. I know there's a performance difference, but it's not relevant to most everyday applications - I've never had to do real time animations or anything like that, and Preact performs just fine for anything else.

Svelte is always on my radar though. When they sort out type safety, I will definitely take another close look :-)

 

I love Preact too, but Svelte has me even more excited. I don't use Typescript but I understand where you're coming from. One of my viewers suggested checking out github.com/Axelen123/svelte-ts-tem... which might help you?

 

Yea, it’s basically a non-starter for me until it gains TypeScript support (which I can’t imagine coming anytime soon unless TypeScript itself starts supporting .svelte files or some kind of HTMLSX file).

 

Well given TS will perform Type inference and checking on JS (esp good in VSCode) it kinda does have TS support :) but I know what you mean. You could always create some typings.

Creating typings is a whole lot of work when the creators of Svelte could have provided native TypeScript functionality. I mean it’s rather strange since Svelte itself is written in TS. But these are the negatives of the approaching you’re recommending:

  • manually created typings often fall out of sync with the code. So the consumers of your components have code they think is working but it doesn’t actually work.
  • JS-check only checks each file independently of each other (I believe), so you don’t get awareness of the type relationships between your entire app
  • JS-check in an HTML file currently loses a lot of the power you get from TSX because you TSX will tell you if you’ve wired up your HTML properly. As where in Svelte and Vue you don’t have a CLI that will tell you that while your script section is correct... you forgot to pass any props to the Svelte component.

So refactoring becomes challenging because you don’t have he machine to tell you when your modification of the code impacts other code. This ultimately leads to the feeling that you shouldn’t ever refactor because it couple break too many things.

Compare that to working in React + TypeScript. I can refactor anything I want and have confidence that the entire website will still work. I don’t have to worry that renaming a variable in one file will break a distantly related page of the site. It’s that type relationship between pages that Svelte is missing.

Sorry, I dropped the Smiley from my reply :( Typing are definitely a hack, and a 3rd party one at that. I've often hit the sync thing myself.

I agree that if Svelte is itself Written in TS then wit hsome attndtion to details it should provide 1st class TS support. I wonder what the issues are?

I've not used TSX but from what you say it adds a level of utility (I assume as it compiles down to TS, jike JSX does to JS).

Yup, TSX is super helpful.

Let's say you have loginComponent.tsx that defines the following component:

export const LoginButton = (props: {userId: string}): JSX.Element => {
   // ... do something with props.userId and then load the page
};

You can then have a main component (typically called App.tsx) like this:

<section>
    Hello! Welcome! Click this button to Login
    <LoginButton userId={userId} />
</section>

And if you forgot to pass userId in App.tsx then the compiler would let you know that you made a mistake. If someone later refactors LoginButton to add another mandatory property, then the compiler will let you know that you forgot to circle back to App.tsx.

Nice. Better to use the language than the react specifc prop checks IMHO

 

I know nothing about Svelte, so two noob questions.

  1. Svelte syntax looks like Vue (no revolution here). If I get it right, the main benefit of using Svelte is the bundle size. Compiler does some magic in the build step and less JS code is provided to a user. It means faster loading, parsing and execution. Are there any other benefits except bundle size?

  2. "Cybernetically enhanced web apps". What does it mean? 🤔

 

In addition to what Jesse said, Svelte compiles to Vanilla JS and does not use the Shadow DOM. All the code is compiled and optimized to work directly on the actual (or 'light') DOM.

I also like the fact that you're using actual CSS in your Svelte components, and the compiler namespaces your CSS. You can also set it up to use various existing CSS frameworks (Tailwind, Bootstrap, Emotion, etc.) as well as PostCSS, PurgeCSS, etc.

Finally, using stores and events, communication and data-flow across components is very flexible and quite easy to use.

 

Thanks for the addition, my interest to Svelte grows up with every positive feedback.
I just didn't get the Shadow DOM sentence. Did you mean virtual DOM?

Sorry, yes, that's exactly what I meant. And you're welcome!

 

I'm a noob too, and I've never used Vue, but my understanding is:

  1. Yes it's very similar to Vue in syntax, but to be honest I never liked Vue's boilerplate and template syntax. Svelte uses a different template syntax that reminds me of Mustache. And in Svelte, you just use local variables instead of needing to use new Vue boilerplate to define your props and methods. Even if Svelte wasn't compiled, I would prefer it to Vue.

  2. They have a blog post explaining this:

    Svelte has many aspects — outstanding performance, small bundles, accessibility, built-in style encapsulation, declarative transitions, ease of use, the fact that it's a compiler, etc — that focusing on any one of them feels like an injustice to the others. 'Cybernetically enhanced' is designed to instead evoke Svelte's overarching philosophy that our tools should work as intelligent extensions of ourselves — hopefully with a retro, William Gibson-esque twist.

 

Thanks for the answer, it's much clearer now.
I guess I need to read William Gibson books or re-watch Johnny Mnemonic movie to feel the atmosphere of Svelte 😂

 

What really drew me to Svelte was the smaller code base. It takes less code to write the same app.

You can see in this article: freecodecamp.org/news/a-real-world...

And I made a video about it too: youtube.com/watch?v=rMBusx68ujY&t=4s

 

I love that too. Migrating from another framework mostly involves deleting code, and that feels great.

 

Are you using svelte 2? Svelte 3 got out last month and it doesn't looks like Vue anymore.

It got a completely revolutionary way of building UI. It brings reactivity to JavaScript itself

 

I tried the official tutorial and having full component definition (template, styles and logic) in one file reminded me Vue a lot.

 

I first heard about it from someone who used it for an alternative interface for Mastodon: nolanlawson.com/2018/04/09/introdu...

Maybe I'll take a look and try to make something with it.

 
 

Damn! Such a good thing Svelte is. I have recently started climbing the VueJS ladder and met Svelte in between. I am confused now.

Svelte can be a good alternative for the developers who still prefer vanilla javascript and do not like JS frameworks.

 

Cool writeup, thanks!! Gave the interactive docs a go a couple of months ago, really neat and catchy stuff indeed. I mostly use React, seen a bit of vue and ng, and what I most like is the verbose and clean JavaScript and I guess good (fast and fun) learning curve(?). The mustaschy template style is not a minus, I can go with it. Will give a go to your live coding sess. Would you mind making a comparison to Ionic's latest Stencil One? Ref: ionicframework.com/blog/introducin... It is a compiler thing also, where in the post they manage to get even smaller bundle size than the amazing Svelte. Crazy times to be alive.

 

Thanks! I actually took a first look at Stencil last week, before I checked out Svelte. I like a lot of things about it, but I'm not a fan of using decorators and classes. Svelte, on the other hand, has so little boilerplate it boggles the mind.

 

From Svelte docs: "You can use reserved words as prop names."

Can you provide an example of when you would want to use a reserved word as a prop name? Or when it would be unavoidable?

I've never had issues avoiding reserved words for a variable name, so I'm intrigued by this particular feature. Thanks!

 

React forces you to write <div className="asdf" /> as opposed to <div class="asdf" /> and <label htmlFor="asdf" /> instead of <label for="asdf" />. This is because class and for both have intrinsic meaning in Javascript, and when JSX was first created they were worried that reusing this naming could cause problems. (My understanding is that they now believe that class and for would have been fine in the first place...)

I'm pretty sure that bit in the Svelte docs is saying that those renamings aren't necessary in Svelte.

 
 

You're asking the newest user of Svelte so I'm really not sure. Maybe someone else has an example?

 

Looks an interesting library, okay, compiler (don't beat me 😅)

 
 

Ahhh Svelte..!
It’s been on my mind to have a look at Svelte,i will definitely play with it this weekend.
Thank you for reminding it to me Jesse

 
 

Currently I'm working on migrate my utility from vanilla to svelte. Svelte components looks fantastic but eslint (+ format plugins like prettier) is not fully supported with Svelte.

 
 

Nice Post Jesse.

I invite you to join the Svelte Developers Worldwide group. Would be great to have you in.

linkedin.com/groups/10473500/

 

I totally agree. I've been making video tutorials here if anyone is interested: youtube.com/channel/UCg6SQd5jnWo5Y...

code of conduct - report abuse