Why I chose to use Sapper for my portfolio and blog page
Sapper is a framework to build very lightweight and beautiful web apps. It suits a project of any size and if you are familiar with how example React and Vue works this feels already familiar for you.
I was introduced to Sapper and Svelte which Sapper is running on by my friend. At first, I was a little skeptical of its benefits since I already was familiar with Vue.js and Nuxt.js and was very happy to work with them. This was until after a couple of months after the release I spotted a typo on my portfolio page and tried to fix it quickly. This is the moment where the interest for Sapper, Svelte, and the topic for this blog post raised.
The issue was that JavaScript frameworks and libraries are known to evolve rapidly. After a couple of months, they were all needing an update. My old computer had given up in the meantime after the previous release and I had a new one so I cloned the project repo and executed the “npm install” command. That went through fine but when tried to run the dev server, there was just a list of errors that were caused by incompatibilities in multiple dependencies. I spent for a while trying to solve and investigate these issues but didn’t get too far so I ended up editing the compiled files with vim and that’s it. This led me to think that I need to do something for this and this inspired me to try Sapper.
With Sapper, I built the template for my new portfolio page in a couple of hours. Of course, writing the actual content took a little more but that is obvious. The boilerplate that “npx degit “sveltejs/sapper-template#webpack” my-portfolio” command generated was so comprehensive and clear that there was no need to read too much documentation to get started which I liked a lot. Also, the amount of hassle and “magic tricks” to get the thing working was absolute zero, it was just working!
The structure of the .svelte file is simple and clean. Below is my blog pages’ source code and as you can see the structure and code itself is readable and understandable even though I didn’t leave any comments or docstrings there. Each .svelte file contains the template, styles, and JavaScript that is needed for that component/page. I like to use the structure script → styles → template in my files which means that at the beginning of each file there will be all the scripts that are needed. After that, I like to add styles and the biggest reason for that is the fact that they are wrapped in style tag which separates the scripts and the template itself nicely from each other, and after the styles, I have the template. From the file, the template is the only part that is kind of required if you want to have something to see.
To explain a little the code above is responsible for my blog page (https://aaroalhainen.dev/blog) which contains a list or grid (depending on screen size) of my latest Medium articles. I’ll explain why I decided to do my blog this way in another blog post soon but in Sapper, this was an easy and pleasant process.
The idea of this post was to showcase one use case for Sapper. Vue and especially the new Vue 3 is a very powerful tool to build web apps and even though I liked a lot to work with Sapper and Svelte, I’m not going to ditch Vue from my toolbox any time soon if never.😁
If you need to build a static website, like a portfolio or blog, I would suggest that you give Sapper a change!
