Top 5 Reasons You Should Use Svelte on Your Current Project Right Now.

Robert Hall
Oct 25, 2018 · 6 min read
Image for post
Image for post
Avenue of Chestnut Trees near La Celle-Saint-Cloud — Alfred Sisley

This is the first in a series of articles outlining what makes Svelte a (truly) game-changing framework for your current project. [Update: Svelte 3 was recently released, so this article has been updated to reflect the latest changes. Also, if you want to get up to speed fast on what make Svelte a top framework, go check out Rich Harris’s mind blowing YGLF “Rethinking reactivity” talk and accompanying blog post.]

tl;dr

But first, let’s talk a bit of ontology…

Where is JavaScript today?

But this begs a larger question. Don’t these APIs already exist?

In some sense, yes, but in another, no. The power of modern frameworks is the magic glue that holds these APIs together, a modern jQuery for APIs, if you will. The missing sauce that makes the web more powerful and easier to work with for developers. On all accounts, modern frameworks like React are a tour de force. They directly solve “the problem,” so to speak, with browser conventions. To that point, Jackson is thoroughly on point. That is, HTML really does lack a universal framework.

At some point in time, like jQuery, we’ll want to start removing these frameworks from <script/> tags and start using native APIs, because the browsers will have something baked in. In essence, much of this “YavaScript fatigue” will become a thing of the past. And arguably it’s already happening—

—in some ways, the end of JS churn started happening without people even noticing. Developers rallied around a handful of established frameworks, flocked to Twitter, evangelized (sometimes to a fault), and so forth. And the devil of any new HTML API framework conventions is in the details. Here’s a problem that different communities will likely disagree fairly strongly over, because the implementation details between, say, Angular, Vue, and React frameworks really are that different.

Image for post
Image for post
Mer agitée à Etretat — Claude Monet

A solution based on current standards: Svelte

Let me stop and say that again because it’s so darn important and something that really does make Svelte a leader among all the frameworks. Svelte is a true game changer because it spends an awful lot of energy not trying to reinvent the wheel, but rather work with the flow of existing APIs. The power of this convention can’t be overemphasized, and, until you’ve tried working with something that feels so natural (one of the consequences of going with the flow), you don’t know what you’re missing.

In other words, there’s still something (certainly) magical in Svelte. But instead of entirely reinventing the wheel, part of its entire raison d’etre, Svelte explicitly has you work with plain vanilla JavaScript, CSS, and HTML, with a bit of HTML-conforming syntax on top.

This then is Svelte’s grand and brilliant mission. Work with the grain of what exists, and it will take us all so much further. In practical terms, this ultimately means developing less APIs and getting to that grand framework-in-the-browser vision of the future.

Working with the Grain

So what does this mean? Because the end result is so light and performant, you can bundle it with other projects, easily.

Have a huge app with lots of legacy code that needs replacing? Svelte is perfect for this. You can swap as you go and not worry about bundling some large 100k+ library to get all the features you need. You can swap out individual components, almost at no cost (or, in terms of legacy, less cost) than it would take to rebuild something from the ground up in a different framework with a bit more rigidity in how it lets you piece things together.

Using React or Vue already? No problem. Svelte fits right in. Just use Svelte as you normally would. You may find in time that you’ll want to completely replace another framework, but you’re not obligated to right off the bat, because Svelte just does what you want it to do, at the component level.

Essentially, because Svelte tried to work around the existing ecosystem, surprisingly, it fits very well into the existing ecosystem. At one level, coding in Svelte feels effortless. One feels powerful. It’s like playing with a complete set of some of the best legos in the world. And it’s almost like those legos already existed, because, well, those standards mostly already do.

Image for post
Image for post
Moscow in Winter from the Sparrow Hills — Ivan Aivazovsky

Ground Truth

In the meantime, in case I don’t get around to any other posts, here’s an easy five to draw from:

  1. As outlined above, Svelte is the framework that best meets the API of the web. It does it’s best to adhere to standard, and really only builds on what exists, doesn’t invent anything new like JSX.
  2. Along with point 1, because Svelte follows the web’s lead, learning Svelte is ridiculously easy. It takes no longer than 5 minutes to grok, and no longer than an hour or so to get fully up and running.
  3. The performance is rock solid—Svelte is often beating out other frameworks on UI and JS speed. And it’s increasingly used in production on various popular and traction heavy sites.
  4. It’s the “disappearing framework.” This feature is probably Svelte’s greatest innovation, and every framework should (and many are trying to) adopt it. There are zero client-side dependencies. Zilch. None. Just the end JS of the component itself.
  5. Which means: drop in components—yes, it really can be used in any project! Now!




    …Did I say top 5 reasons? Here’s a few more to whet your appetite…
  6. Common to other prominent frameworks, Svelte enforces single-file components to help organize things.
  7. Out-of-the-box scoped styles. No need to ever worry again about chaotic cascading styles. Everything is scoped directly to the component.
  8. Svelte ditches legacy browsers, but also has a straightforward approach to handling legacy, if needed.
  9. Svelte’s mission is to prioritize the end user over the developer. This means, as mentioned above, everything is written in native HTML, CSS, and JavaScript. No weird mashups. In terms of ethics, the average HTML citizen (people who are not engineers, but still need to write code) can understand Svelte. This also means download sizes are massively reduced in both small and large projects, but, equally important:
  10. Because of keeping with existing standards, the developer experience is truly remarkable. The legos just fit.
  11. Svelte might be the only JavaScript framework to warn you when you’ve missed some accessibility standard. How? Because it’s a compiler, and can do a bunch of things that non-compiler frameworks can’t do.
  12. This one’s just a tease: Svelte might entirely change the WebGL terrain in the future. Want to know more? Come over to the Discord channel and ask, become involved, contribute, etc. etc.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store