TECH Insights

Viden og indsigter fra IT Minds' it-talenter

Global state management in Svelte

Skrevet af Mindster og Software Developer hos IT Minds on 07-05-20 09:36
Mindster og Software Developer hos IT Minds

Store all the things!

First of all, I would like to advocate what I think is a great strength of Svelte. I will make this short since I assume that everybody who writes a blog about Svelte, explains what it is. If interested look up svelte's homepage
on https://svelte.dev.

I use svelte for a tool to solve simple tasks. Do you need a site to ping microservices and show status for them? Do you need to show
a simple UI consuming an API? Svelte is perfect for these small components. What makes it really great, for me, is that I have all the tools in the Svelte toolbox, but the apps I create are still super lean, and basically cost-free to deploy, since all the things from Svelte I don't opt in to using, do not join my production bundle.

Enough talk, let me try to put my mouth where my money is.

Creating a svelte store is a bit like creating a database for your application.
You can have different types of persistence, you can have readable values, writeable values, and computed/derived values.

These concepts are mirrored in Svelte.

Writeable stores

Skærmbillede 2020-05-07 kl. 09.33.09

Readable stores

Skærmbillede 2020-05-07 kl. 09.33.53

Derived stores

Skærmbillede 2020-05-07 kl. 09.34.31

The test project

These things are relatively simple, but yet incredibly powerful. And one of the most interesting things
is the amount of effort and knowledge you need to commit, in order for you to get up and running with store management.

Creating a globally writeable piece of state is just 1 single line!

The sample project i equally small:

Skærmbillede 2020-05-07 kl. 09.35.09

Note here that I have used to different ways of getting values displayed in our page, the first one, which is
the 'manual' way, I create a variable, subscribe to the store, and update my local value on updates to the stored value.

This is fine, but also boilerplate, which is not the Svelte way. Therefore the $ syntax is provided.
If used in the template, this will do these things for you, as demonstrated by the cool points and the time based
cool points.

Basically this webpage will start with 0 coolPoints, which then means that we have 0 timeBasedcoolpoints and the timeBasedCoolPoints in derived
by multiplicating timeBasedLevel and amountOfCoolPoints. After 2 seconds though, our coolPoints are updated to 7, and now the numbers
start changing by an interval of 2, as set in the readable store.

Pretty neat.

These stores are global, but usage without proper management can turn a good framework into bad code.
Svelte provides all the tools, but it allows its users to create their own solutions, which is a thing I like.
This does sometimes demand more of the individual developer, especially in large-scale projects, but it's a tradeoff, I would be glad to pay.
And my motto is

There is never a reason to not do it properly

Insights fra de bedste softwaretalenter

En del af IT Minds’ DNA er, at vi spotter og tiltrækker de bedste softwaretalenter, som er stærke i de nyeste teknologier og frameworks. Derfor vil vi gerne dele ud af vores viden og erfaringer vores konsulenter opsamler, når de afprøver og arbejder med nye teknologier og frameworks.

Seneste indlæg