21 November 2019
A case study from writing TypeRunner.js – a Svelte example app
Svelte is definitely among the most talked about new frontend technologies of the past few years. Somehow, it managed to stand out in the highly populated land of JavaScript frameworks. We have already talked about what exactly makes it stand out. This time, we’re going to give you our thoughts from an actual Svelte project we did to get an even deeper understanding of the technology.
If you don’t know much about Svelte yet and need to brush up on how it works and the numbers behind its popularity, we highly suggest you read our recent introduction to Svelte. This article is for those developers who are already familiar with the basic concepts behind Svelte, but they are still not sure if this technology is something worth investing their time in.
TSH developers Adam Polak and Bartosz Magier have teamed up for TSH’s very own project of a fun typing game, which granted them a perfect opportunity to see how Svelte fares in the heat of battle. Here’s a brief first-hand recap of their experiences.
The TypeRunner.js project – a Svelte example app
TypeRunner.js (you can take a moment to check it out now, it’s really quick to play) is a simple typing game, which has 2-4 human players compete against each other. The one to first type out the entire block of text wins. Sure, it’s not Half Life 3 level of ground-breaking, but:
“The main idea here was to test Svelte in a project that is somewhat more challenging and original than yet another TodoMVC app,” says Adam.
TypeRunner’s frontend was built with Svelte, while its backend is based on Node.js (take a look at our new Node.js features article later).
The TypeRunner.js was only recently made public on the internet, but TSH completed it shortly before this year’s meet.js Summit conference in Katowice. TSH was the Platinum Sponsor of the conference.
Why TypeRunner?
Why did we choose a project like this for a Svelte-based app?
“We really wanted to test Svelte in a project that is a little more advanced and unique than yet another to-do MVC app. The frontend market has been showing signs of a standstill in recent years. There are these three major frameworks (React, Angular and Vue), which dominated the landscape. And the truth is that there are not all that many fundamental differences between them. Svelte offers the opportunity to go back to the roots, that is pure vanilla JavaScript. This means no shadow/virtual DOM and possibly a significant performance boost,” believes Adam.
As different as it is, it shouldn’t suggest that it’s difficult to get into for seasoned frontend developers:
“It’s quite similar to Vue when it comes to file structure and the way you create components. Also, since there is no boilerplate, you can just sit and start writing your code,” says Bartek.
How does it work?
If you want to know exactly how the Svelte-based frontend of TypeRunner works, take a look at the code below. It features the main component, which is responsible for showing text, the progress of each player and the next button the sign is supposed to type.
What about the Node-based backend?
We decided to go with Command Patterns and introduce the Command Bus mechanism in order to improve separation (WebSocket itself doesn’t have built-in separation for separate features and includes just one entrypoint for the whole system) as well as extendability and future scalability of the system. Each message is a contract that is converted into a command.
The Command Bus is just a simple function, which decides whether something should be done or not based on a map of valid operations.
Each handler supports only one command, which makes for good separation. That way, adding new features is fast and simple.
Lessons learned from the Svelte project
Bartek, who was mostly responsible for the Svelte-based frontend, found the whole test project to be very successful.
“The experiment succeeded. I had been searching for something that would make it possible to write in vanilla JS without giving up on reactivity and with templating that doesn’t force me to stop and think which library I need to style it. Svelte give me all that and more. The templates are pretty much written in HTML, with a bit of something that resemble handlebars or mustache, but without their limitations.”
It doesn’t mean that writing in Svelte is always very easy or even comparatively easier than React or Angular. But it’s not really the most aspect of it.
“Frameworks make a lot of things easier, but they can sometimes negatively impact user experience. And it is the user the software is written for. When we create software, we should search for solutions that are most user-friendly rather than developer-friendly. I think that Svelte is user-friendly, because it makes for fast and light applications. It it also developer-friendly? That is something for everyone to answer on their own.”
Was the Svelte example app project successful?
Svelte has long stopped being just a curiosity, but does it really have a fighting chance to challenge the frontend framework status quo?
“I believe that Svelte can really do well in the area of PWAs and mobile apps. Smartphones are a perfect platform for Svelte’s main advantages, that is speed and small size of Svelte-based apps, to really shine,” believes Adam.
“Svelte will do well in any scenario in which aspects such as efficiency or limited computing power (little RAM, weak processor etc.) of the device are very important”, Bartek agrees.
And what do you think of Svelte? Have you already tried it out?
Or perhaps you are searching for developers and you think that Svelte would make a good choice as a frontend framework for your app?
Contact us and let’s talk about your project. Initial consultations at The Software House are always free.
