My First Impressions of Svelte

After hearing a lot about Svelte over the last few months, I've finally decided to take the plunge and give it a try. Since this is my first time playing with Svelte, I wanted to publish my initial thoughts to hopefully help anyone curious about what Svelte has to offer.

This isn't meant to be a tutorial on Svelte, it is simply my reaction to looking at Svelte for the first time. If you haven't already, be sure to check it out. It is a simple way to get started working with Svelte. Most (if not all) of the code examples are lifted straight from the Svelte tutorial.

What is Svelte?

In its own words, Svelte "is a radical new approach to building user interfaces." In my words, Svelte is a component-based framework for building websites and web apps.

Conceptually, Svelte appears to share a lot of concepts with React and Vue, however, those are only surface level appearances. Svelte introduces a new way of thinking about components, and a unique set of features that allow you to create high quality components.

Absolute First Impression

After spending about half an hour on Svelte's playground, I can say that I very much enjoy the framework's ergonomics, how it approaches building components, and its general philosophy. I also like that accessibility is a first class citizen. For example, if you create an <img> without an alt attribute, the Svelte compiler will give you a clear, actionable warning. This is a great feature that hopefully will go a long way towards better application accessibility.

The code that the Svelte compiler outputs is surprisingly clean. When a compiler is involved, it usually means that the output code is not entirely human readable. Not so with Svelte. Most of the outputted code looks as if it could have been written by a human, which means that the run time code should be very debuggable.

Architecture

I haven't taken a deep dive into Svelte's architecture, but at a high level Svelte components are written with HTML, CSS and Javascript. Those templates are then compiled into code that can be executed in your browser. Svelte templates really, really want to be fully declarative. They want to let the developer forget all about rendering and render cycles. This is really good news for developers because it allows us to focus on our business problem and not on the details of rendering our components. We can simply declare the data we need and delegate the work to Svelte.

Writing a Svelte Component

Svelte component files behave just like a plain HTML document. Just like any HTML document, you use <style> and <script> tags to add styles and interactivity. I think the plain HTML, CSS and Javascript model is one of Svelte's most powerful features. Writing scalable and performant apps using familiar HTML, CSS, and Javascript is pretty compelling. In fact, if your application does not require any component level css or javascript, it is entirely feasible that your Svelte app could just be HTML. That's pretty neat!

Declaring Javascript Variables

Adding Javascript to your component is as easy as adding a <script> tag to your template file. Everything inside your <script> tag is scoped to your component so you don't have to worry about naming or state collisions outside of your component.

Any variable declared in your template file can be referenced in your HTML using bracket notation:

<script>
  let buttonText = 'text';
</script>

<button title={buttonText}>{buttonText}</button>

<script> tags in your Svelte components are a superset of standard <script> tags. You are able to use any standard Javascript in your <script> tag including ternarys, function calls, and even import statements. In addition to standard Javascript, Svelte introduces some domain-specific concepts like declarations and statements that you can use to enhance your component.

I find <script> usage intuitive because it is already a concept that I am familiar with. It also more or less aligns with how I think about Javascript in template files in general. This approach also becomes very interesting in terms of how Svelte handles reactivity and component state.

Event Handling

I find Svelte's approach to event handling intuitive as well. Adding an event listener is fairly simple. You can create an event handler in your <script> tag and then reference that function in your HTML using an attribute prefixed with on:. For example, in the code below, handleClick will be executed every time our button is clicked:

<script>
  let buttonText = 'text';

  function handleClick() {
      // handle click event
  }
</script>

<button on:click={handleClick}>{buttonText}</button>

Reactivity

Reactivity is essentially how your components and app respond to changes over time. Svelte handles reactivity bindings during compilation, not during runtime. Because Svelte understands where your Javascript variables are referenced in your HTML, it can generate efficient bindings ahead of time. This means you don't need to waste run time CPU to understand what is reactive and what isn't. Svelte takes care of this well before you execute any code.

Svelte attempts to add reactivity as transparently as possible. There is no special syntax to make a value reactive. All you have to do is reference the value in your HTML. This makes adding reactivity in Svelte fairly straightforward. It does mean that we are adding side effects to what would otherwise be a simple variable declaration. I might be overthinking things a bit, but foot-guns here are not inconceivable.

Because Svelte's compiler handles generating reactivity bindings for you, making a variable reactive is straightforward. You only have to reference the value in your HTML.

<script>
  let buttonCount = 0;

  function handleClick() {
      buttonCount += 1;
  }
</script>

<button on:click={handleClick}>{buttonCount}</button>

Every time our button is clicked, our buttonCount variable is incremented and our new value is rendered. You simply declare that you want to display the value for buttonCount and Svelte generates code that handles the binding for you. Svelte makes it easy to bind values to HTML, but its reactivity model extends to Javascript values as well.

Declarations

Declarations are the first feature that truly feels like something only Svelte offers. I think declarations are the most interesting feature of Svelte. Declarations allow you to create composable data streams that can be reflected into your HTML.

You can create a declaration inside your <script> tag with new grammer introduced by : $: NAME = VALUE. The $: NAME creates a reactivity binding that listens to changes to VALUE. Every time VALUE changes, NAME will be updated. All references to NAME in HTML will then be updated as expected.

Composing declarations is as easy as using a + operator. $: NAME = VALUE + OTHER will cause NAME to be updated if VALUE or OTHER ever changes.

I love this feature because it allows you to declaratively create really complex datastreams without much effort. Aside from the new syntax, creating a declaration is almost exactly the same as creating a plain variable. Really neat!

Statements

Svelts statements are like declarations except they add reactivity to entire Javascript statements, not just variables. For example, this means that we can make an if-conditional recompute every time a value within its block changes.

This is another feature that I absolutely love. In effect, it allows you to declaratively create reactive routines which can then be piped to other declarations or statements. Really good stuff!

Conclusion

I will definitely be exploring using more of Svelte in the future. I think the intuitive component model plus the innovative declaration + statement features create a compelling case for using Svelte for some of my projects going forward. If you're curious about Svelte, head on over to their website to get an even more detailed look about how Svelte works.

Happy coding! 🗿

Enjoyed this article? Head on over to Easy Web Dev and SUBSCRIBE to get access to in-depth web development tutorials and walk-throughs.