DEV Community: Inbal Sinai

Supercharge Your Svelte State Management with Akita

Inbal Sinai — Wed, 03 Jul 2019 11:11:55 +0000

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!

Managing Your State Navigation Data is a Breeze Using Angular and Akita

Inbal Sinai — Wed, 03 Jul 2019 08:41:30 +0000

The Akita ng-router-store is a neat package offered to Akita users, which enables binding the Angular router state to an Akita store. The benefits of this approach are:

The router state is stored in an Akita store named router, which serves as the single source of truth for things such as URL, state data parameters, query parameters, etc.
Our components don’t have to be familiar with the data source. The RouterQuery can be injected in any one of the queries to create an encapsulated derived selector.
The library exposes Akita style queries, saving you from dealing with all the required boilerplate code.
We can examine the current router state in the Redux devtools and perform ‘time-traveling’. To get started, install the package and add it, as well as Akita’s devtools module, to the app module:

At this point you should see the router store in the Redux devtools, and you have at your disposal the following query API:

For example, let’s say we want to query the current entity based on the URL id parameter, we can do the following in our ArticlesQuery class:

And use it in our component:

Voila — easy breezy navigation management!

Last but not least: A new version of Akita just landed in Github! You can check out the breaking changes and the new features here.

Follow me on Medium to read more about Angular, Akita, JS!

10 Reasons Why You Should Start Using Akita as Your State Management Solution

Inbal Sinai — Tue, 21 May 2019 13:22:05 +0000

State management is ubiquitous in web applications, be they big or small. One of the notable solutions in this field is Akita. Whether it's entities arriving from the server or UI state data, Akita has custom-built stores, powerful tools, and tailor-made plugins, which help you manage the data and negate the need for massive amounts of boilerplate code. Here are ten reasons why you should start using it:

Akita is a veteran in the field: It's been out for a year already and even before that it was used for over a year in Datorama, as part of a real-world app utilized by thousands of customers. The app includes elaborate state management, component communication, complex form handling, dirty checking, undo functionality, and rapid manipulation of big data.
Akita has the backing of Datorama: Akita doesn't rely on sponsors to continue evolving. It was created here, in Datorama, a Salesforce company. Datorama developers maintain it and improve it as part of our work schedule. Additionally, we often get inspiration for new Akita features from the needs of the continually growing and evolving Datorama app.
Akita is easy to pick up: It has a moderate learning curve, suitable for both experienced and inexperienced developers alike. It features a robust set of tools, anything you might need for quickly deploying a quality app.
Akita isn't coupled with Angular: Once you get the hang of using it, Akita can be used with React, Vue, Svelte, Angular, or even vanilla JS. No framework-specific adapter is needed; This means that if you swap framework, changes to Akita code are kept to a minimum.
Akita has a 0 bugs policy: Here at Datorama, we consider your bugs as our bugs. Since Akita is deployed in our production environment, it's crucial for us to solve any bugs you might discover ASAP. The Akita repo issues section is a testament to that.
Akita is very well documented: We understand the importance of thorough documentation, and do our best to supply Akita users with complete documentation of all necessary information. Additionally, we often write blog posts detailing the various ways in which Akita can be used in your apps. Like Akita itself, we constantly work on growing and improving this knowledge base.
Akita's community is growing, fast: With over 320,000 downloads to date, Akita is growing in popularity in lightning speed. Another sign of its ubiquity - familiarity with Akita has recently started showing up in Front-End position postings.
Akita is well-suited for full stack developers: Akita is based on object-oriented design principles rather than functional programming, so developers with OOP experience should feel right at home.
Akita developers are easy to reach: Akita has a dedicated Gitter channel which is staffed daily.
Akita has a full suite of accompanying plugins: redo-undo, persist state, dirty check, pagination, devtools, router integration, CLI, and more.
See something missing that you want to be added? We're very receptive to requests 🙂

In summary: There are plenty of reasons to pick up Akita today. I highly recommend you give it a try - you'll discover it provides you with an efficient and easy to use solution for all your state management needs! To get started go to the Akita repo on github.

Follow me on Medium to read more about Angular, Akita, JS!