Till now my website, blog, URL shortener were distributed over different repositories as I had hosted everything on GitHub pages. The landing page was plain HTML, the blog was Jekyll and the URL shortener was built with React. I was in search of some framework or platform to port everything into one platform. After @raalzz gave me a brief intro on how to setup Svelte and how it works, I was impressed! Since I wanted some opinionated framework and did not want to set up everything on my own, I chose to go with the Sapper framework which is powered by Svelte. Here are a few of the things I have discovered so far.
Easy transition from other frameworks
Svelte has taken a lot of inspiration from the best parts of existing libraries and frameworks. So I did not have to change my thought process much. They have the component structure similar to that of React and Vue and it supports all of HTML markup. In case if you use Sapper, the routing is built-in and it follows the same format as Nextjs/Gatsby where each of the file/folders created will be a route in your application.
One of the things I found to be different was the Logic Blocks which are wrapped between {} and are used to display content blocks conditionally or in a loop. For Example,
{#if expression}...{:else if expression}...{/if}
{#each expression as name, index}...{/each}The most useful feature I loved about Svelte was {#await}...{/await} which can be used to show loading states while a promise is being fulfilled.
Built-in support for Reactivity and Store
State management is made easy in Svelte. We can tie any variable on the application to an event to make it reactive. For complex use cases that require global state management, Svelte has stores. I was able to set up a global store and subscribe to it from a component with less than 10 lines of code and without installing any external NPM package.
Automatic Code Splitting
The major characteristic of Svelte is that it is a Compiler, unlike a library or framework. All of your code gets compiled into Vanilla JavaScript. This brings the advantage of serving the code depending on what is needed by the client to render part of the application. This is not just limited to JS. If your component has unused CSS, it will not be included on the final bundle.
Support for Transitions and Animation
I had always found transitions and animation in CSS to be a pain in the neck to implement due to my limited knowledge of CSS. Svelte has transition directives that you can add to the HTML element or the component for some graceful transitions.
PWA and Offline Support
Sapper comes with the setup required for making your application into a Progressive Web App(PWA). All I had to do was to fill in the manifest.json and required icons to make my website installable.
How to get started with Svelte/Sapper?
The best way to start learning Svelte would be to go through their interactive tutorials. I have also added links to respective documentation pages inline for a few of the topics I discussed above. Other ways to learn and ask help are:
I will soon be making the Sapper version of my site live. Visit beta.vishwas.tech for a sneak peak. Update October 2020: Sapper Version of my site is live and you are reading this post on it.