There’s a new player in the world of JS frameworks — Svelte. As its name suggests, Svelte is lean, extremely lean. In fact, Svelte’s modus operandi, of compiling code to (ideal) vanilla js during the build phase rather than interpreting it during the run phase, has had people describing it as a non-framework and its own creator calling it a language, rather than a framework. Specifically, one created for describing reactive user interfaces.
I’ve started playing around with Svelte and so far I’ve been having a blast. The tutorial offered by creator Rich Harris functions as a very pleasant introduction. After completing it, I started to wonder how Akita, the state management solution we’ve created here in Datorama, would work in conjunction with Svelte.
Svelte + Akita = A Great Combo
If you’re already familiar with Svelte, you might be asking yourself why additional state management is even required, as Svelte comes with built-in reactive store functionality. If you have a small application, you can probably get away with using Svelte API alone. However, larger and more complex applications require a full-fledged state management solution. It’s similar to how we need Redux when we have React’s Context API.
A note on Akita’s architecture:
The two main components of Akita are the store and the query. You can think of the store like a table that contains data in a database, and you can perform various actions on it like inserting, updating, etc. My svelte component will reactively get the data from the query. And since I want it to remain agnostic of its data source, I won’t import the store inside the component; Instead, I’ll create a service for the component to work with.
As you can see, Akita defines a strict pattern for managing your state data. It comes with powerful Entity management, a robust set of plugins and dev-tools, and its own cli. Svelte and Akita are a great natural combo because Akita’s queries can return observables, which Svelte supports out of the box. So here is one example of how the two can be used in tandem:
Incorporating Akita
To add Akita to my svelte app, I install it, and its cli, via npm. I start with a fresh Svelte seed and go ahead with creating the traditional “TODO” app using Svelte and Akita.
The TODO Entity Store
Since we’re dealing with TODO items, I opt to create an Entity Store in Akita. You can think of an entity store as a table in a database where each row represents an entity. To do that I use the Akita CLI.
The store itself has all the built-in methods I need in order to perform CRUD operations on my entities.
In addition to those methods, I add a filter parameter in the store creation, representing the UI State data used to filter the display of the TODO items.
The TODO Service
Next, I’ll create the aforementioned service:
It contains all the methods I’ll need to update/read from the server and the store.
The TODO Entity Query
Akita Entity Query’s built-in methods can be divided into two types. A method that starts with select, for which you get an observable for the requested data, and methods that start with get, in which you get the requested data directly. It’s important to emphasize that the subscription won’t be triggered unless the value you asked is changed by reference. To those, I add the following methods:
I use combineLatest to subscribe to the store, get the latest version of the TODO list, and filter it according to the latest filter selection.
The next step is to create the Svelte components that interact with the Akita Entity store:
The Filter Component
This component’s sole responsibility is to let the users determine the criteria by which they filter the TODO list:
The Add TODO Component
This component is in charge of dispatching a todo event for the purpose of adding a TODO:
The TODO Component
It is used to display a single TODO item, along with a button for deleting it, and a checkbox to toggle its ‘completed’ status:
Connecting the Dots
Finally, a TODOs component will use all the previously mentioned components, along with the query and service I’ve created, to manage my list:
The End Result
Before we conclude, I wanted to add one last tidbit: Another thing you can get from Akita out of the box, is the ability to persist the state via local storage. I simply add in the main JS file:
And voila, your state is now persistent!
You can find all the files for this example here.
In summary: Both Akita and Svelte offer a moderate learning curve and enable the easy creation of incredibly lean apps with super-efficient state management out of the box. I encourage you to try both, either together or separately 👯♀️
Follow me on Medium to read more about Svelte, Akita, JS!
Top comments (1)
good article :)