Instant Gratification With Svelte

calvintam Oct 5, 2021

Awhile ago, I posted a video by fireship.io comparing some of the most popular JS frameworks available. If you have not seen it yet, here a link to it :

Each framework comes with it's pros and cons, but it comes at no surprise that Svelte is rated as the Most Loved framework. Developers that have never tried it before might be scratching their heads over this. As often we only rate frameworks by Most Popular and Most Supported, but Most Loved??, it's mostly unheard of, especially for a library in JS.

Fun and Approachable

When I first discovered Svelte, even before I even understood it's concepts and functions, I was amazed by it's tutorial. Often times, learning a library means toiling through it's documentations, trying to make sense of it all. Svelte's tutorial has changed the game, breaking it up into sections, and bundling an actual REPL (Read–eval–print loop) editor on the side. Digesting it's concepts and methods are fun, as you are presented with the example use cases that would require using the concepts being introduced.

Keeping it Simple

Many JS frameworks introduces various hacks and functions, even adding a virtual DOM, to achieve efficiency and provide advanced functionalities to developers. Svelte attempts to achieve the same high standards set by frameworks such as React and Vue, without the bloat and VDOM.

But how is that possible, you ask? Well Svelte, took a rather clever approach, some might even say, it's kind of cheating. Apparently, Svelte is also a compiler. Being a compiler, allows Svelte to ingest code and syntax that it understands, but spits out regular ol' javascript that the browser understands.

Rollup & Webpack

However looking at the state of JS libraries and frameworks these days, preprocessing js codes isn't a fancy concept. Many workflows these days involves having either Rollup or Webpack as a bundler. These tools are already there, going through your codes, making it compatible with various browsers, and minifying your codes with terser. So why not a compiler?

Reactivity

One of the most powerful feature of Svelte is it's approach to introducing reactivity into JS. As web apps becomes more powerful and demanding, reactivity makes the whole user experience more fluid, and for the developer, easier to code for and debug.

Take for example, the code below:

    let a = 5, b = 2;
    $: total = a + b;

The $ is a magic symbol used throughout Svelte to indicate reactivity, in the example on the top, the total variable will always be the sum of a and b, even if their values are changed. Let's look at how we can dynamically change the a and b variable.

<script>
    let a = 5, b = 2;
    $: total = a + b;
</script>
<input type="text" bind:value="{a}" />
<input type="text" bind:value="{b}" />
<p>Total : {total}</p>

Interesting! Right off the bat, there's some html present now. Svelte files can contain all 3 components used in a website, namely script, style and html. Script & style is to be enclosed in their respective XML tags, whereas the rest of the HTML will be parsed at shown in the DOM.

But let's get to the interesting part of the code, as seen above, the text inputs are binded with the javascript variables using the bind:value property, this unique feature of svelte allows the DOM to interact with javascript freely without going through functions like document.getElementById. As the inputs value change, the variables value change as well, which causes the reactive total value to also change to reflect the new total.

Initial run for script

After changing the values in both text fields

Components

If you were to say, write the entire website in one file. You would end up with a huge huge file, and things will quickly spiral out of control. Svelte's code conventions encourages splitting anything that is used for one than once into a separate file, and be imported as a component, below is an example :

//TableCell.svelte
<script>
    export var name;
</script>
<div class="rounded p-2">{name}</div>

<script>
    import TableCell from './TableCell.svelte'
</script>
//Table.svelte
<div class="divide-y divide-gray-300">
    <TableCell name="{'John'}" />
    <TableCell name="{'David'}" />
</div>

As shown above, the table contains several cells, which will always look the same. Instead of copy & pasting the same divs over and over, we are encouraged to split it into it's own svelte file, which turns it into a component. The component is then imported into the main table, with parameters passed into the component using curly brackets.

Summary

When you are in the zone

Just by the two example shown above, it's easy to envision how you are able to build your apps quickly. With little code, you are achieving functionalities that usually takes 10 or more codes to achieve. This itself is how we can do instant gratification with svelte. It's concise, it's readable, and it's fun.

Many that have tried svelte told me how they have started to enjoy coding again after getting their hands on Svelte! And I can't wait to see more developers ignite that flame in their heart with the power of instant gratification with svelte.