It has been one of my goals to start a blog writing about my learning journey: to document what I have learned, and to practice my skills in explaining it to a wider audience than the academic community. However, my procrastination was my own demise and that has lead me to delaying it for years ever since the start of my university life.

Naturally without any practice, my skill on web development has regressed back to that a beginner. Therefore, a beginner friendly framework is desirable to kick start my work on the blog. The framework needs to let me hit the ground running with the least effort. Of course, since we're working with TypeScript, we have to use the latest and the hottest framework on the market.

Let's introduce Svelte!

TLDR: Svelte is awesome and you should checkout its playground.

Why Svelte ?

While choosing the frameworks to start this blog, I kept the following requirements in mind:

• A beginner friendly tutorial and setups
• Clear cut documentation without having to dive deep into the APIs
• A playground to try out the framework
• A clear cut separation of HTML/CSS from the API scripts.

Svelte's syntax places HTML as first class citizen with TypeScript support for event handling for the component! It also has simple syntax for data bindings and make it intuitive to write in the Svelte components. I'll let the creators convince you why Svelte is least verbose and readable framework out there, but here are my favourite features of Svelte!

Data bindings

You want to add data from your script into the DOM? It's as easy as defining your variable in TypeScript and adding it to your DOM as follows:

<script lang="ts">
    let someData = ...
</script>

<div data="{someData}" />

There's also shorthand binding if you have the same variable name:

<script lang="ts">
    let data= ...
</script>

<div {data} />

Two-way data binding is as intuitive as the aforementioned data binding methods.

For both regular and shorthand two-way binding:

<script lang="ts">
    let regularData= ...
    let shorthandData= ...
</script>

<div bind:someVar="{regularData}" bind:{shorthandData} />

Reactivity

Not only does Svelte allow variables to be synced across DOM and script, it also enables syncing of variables within the script itself! You could use the code below to keep dependent updated reactively whenever the independent variable changes.

<script lang="ts">
    let independent = 0;
    // now whenever independent changes, the dependent variable will also update
    $: dependent = independent;
</script>

This is just the basic, the more advanced reactivity could be achieved through functions and even arrays. Check out the reactive statements tutorial section of the Svelte tutorial site.

Conclusion

In my opinion, I have never had as much fun coding a front end project as I did with Svelte for this blog. Although there are some pain points with regards to the load order of the scripts due to Server Side Renderings (SSR), the fixes for such problems are very logical and not dark magic unga bunga. With this first post, I commence the start of my personal blogging journey!