We tried Svelte – a case study from writing the TypeRunner.js app

3 min

read

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

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.”

Will we use it again?

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 Svelt’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 it 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.

Estimate your project





or contact us directly at [email protected]

Thanks

Thank you!

Your message has been sent. We’ll get back to you in 24 hours.

Back to page
24h

We’ll get back to you in 24 hours

to address your needs as quick as possible.

Estimation

We’ll prepare an estimation of the project

describing the team compostition, timeline and costs.

Code review

We’ll perform a free code review

if you already have an existing system or a part of it.

Our work was featured in:

Tech Crunch
Forbes
Business Insider

Aplikujesz do

The Software House

Aplikuj teraz

wyślij CV na adres: [email protected]

CopiedTekst skopiowany!

Nie zapomnij dodać klauzuli:

Kopiuj do schowka Copy

Jakie będą kolejne kroki?

Phone

Rozmowa telefoniczna

Krótka rozmowa o twoim doświadczeniu,
umiejętnościach i oczekiwaniach.

Test task

Zadanie testowe

Praktyczne zadanie sprawdzające dokładnie
poziom twoich umiejętności.

Meeting

Spotkanie w biurze

Rozmowa w biurze The Software House,
pozwalająca nam się lepiej poznać.

Response 200

Response 200

Ostateczna odpowiedź i propozycja
finansowa (w ciągu kilku dni od spotkania).

spinner