October 15, 2020

Akita — Do we have a new Gen State Management finally?

Like you, I have also sifted lots of articles before jumping onto Akita for my new project. I believe, state management is one thing where if you go wrong, then you might regret in the later stage because things get so tightly-coupled that it becomes a blocker to refactor your code. Please choose it wisely!

There are lots of compelling reasons (and lots of articles out there) why you should use Akita, but according to me below are some of the pointers which, according to me might entice you to give a TRY!!!

Pre-requisite: You must have some knowledge about other solutions to reap the benefits of Akita.

Simplicity

Though NGRX and NGXS state management libraries can do what you are trying to do with Akita, when it comes to boilerplate code, Akita is outstanding, because it does stand out of the crowd. If I tell you that whatever you want to achieve using those two libraries can be achieved by Akita with fewer lines of code, then wouldn’t you give a try to it? If your application is small then solutions like NGRX and NGXS can be overkill. But with Akita, no matter what size your application is, you can use it with ease without any performance issues.

Easy To Learn

When I started learning NGRX, it took me 3 days to go through all the blogs and videos available on the Internet to grasp the basic concepts of Redux and connect all dots: State, Action, Reducer, Effects, and Selector. I had to draw a map of all this to understand the flow. I still remember I was hooked to the screen and reading till 11 p.m. in the office when all my teammates had gone home.

Now, when it comes to Akita, it took me just 4 hours to get the basics of it and why it was created in the first place. Though it is built on top of RxJs and has borrowed concepts of multiple stores from Flux and immutable state from Redux, learning Akita is like feeling at home. If you are an OOPS guy and know a little bit (though not necessary) you will be able to digest Akita’s terminologies — store, query, and model — very easily. Even once you start implementing basic examples, you will get a feeling that why such a library didn’t exist before?

Also, it is not only you who will work on the project, just imagine a scenario where the application has grown to its extent and the new developer joins the team, how hard it would be for him/her to know what’s going on. The biggest problem of boilerplate code is that you miss the vital parts (like business logic) of the application. And the true cost of the product is not an initial investment, but maintenance cost.

Data Persistence

The most important part of any state management solution is to let the application save the state into local/session storage. This is required because if a user hard refreshes the page, the whole state will be wiped out from the browser’s in-memory and a user would still like to see the same state as before. Akita, like other libraries, does provide you an option to save all or select states in the local or session storage and retrieve it as per your needs.

0 Bug Policy

I am impressed by this claim from the Akita team. FYI, Akita is backed by a company called Datorama which is a Salesforce company. They take every bug seriously as they are using Akita in their production environment and don’t rely on sponsors to fund the project. So, this automatically makes it more trustworthy and gives you more confidence should you face any critical bug in your application. I think you should check the number of issues pending to be resolved for yourself on this page.

Caching

We do face a situation where the performance of the application is all that counts in the production environment and we also know the benefits of client-side caching. Just tell Akita for how much time you want the data to be cached and then it will decide whether to give you data from its cache or fetch the new records from the server. I recently tried one trick, where I prefetch data of the next record and save it in the cache, and then load that cached data when a user visits the next record.

Server Side Pagination

When you are using third-party UI libraries — Dev Extreme, PrimeNG, ag-Grid — they provide the way to cache the already fetched records in the data table itself. But not every application uses such advanced libraries. When we talk about the basic data table, it doesn’t have built-in server-side pagination functionality with caching. Akita has it for you. It can remember your metadata (e.g, filters you applied) if you navigate from one page to another and then come back to the same page again; it will clear caching when you perform sort operation so that you get accurate data; etc.

Reset Store

I was astonished when I implemented the feature to reset the store when the user logs out of the application. Just fire one command and that’s it. It was also very easy to configure which stores need to be reset in case you need to preserve a few. As you can see in the below code snippet, just set the resettable property and Akita will take care of the rest of the things to reset it to the initial state.

No Need To Subscribe

In NGRX, when you want to get value from the store, you always need to subscribe to it. Now, just imagine that you need a raw value, in other words, a snapshot and not a stream of data, then it’s not a good idea to subscribe. Akita solves this issue by giving you both options: getValue() to read the current value and forget it and select() to keep observing the changes.

Undo/Redo

A nice to have but a crucial feature, if you want to let users revert his/her actions. Akita maintains the history of all actions and it can replay when you need it. Utilizing this same concept, it has a plugin that you can use it to undo/redo actions.

Dev Tools

To monitor the changes in the states, you can install the Redux dev-tools extension in your browser. Akita provides integration with it and you don’t need to install anything else. However, it has a limitation of not supporting live skipping or dispatching actions because Akita is not powered by a Redux-like pattern.

Two Stores

In Akita, you have the choice to create two different types of stores: basic and entity. In basic store, you can save unstructured data (e.g. UI State) like a session, current UI theme, data table filters, browser zoom level, API call loader, etc. But if you need to store the whole set of structured objects (Domain State), you can go for an entity store. The entity store is similar to your table in the database. It maintains the id for each object and provides you with various functions as an update, delete, insert, etc. to manage the entities.

Multi-Platform Support

Initially, Akita was Angular oriented, but it was designed to be platform-agnostic from the beginning. So, no matter if you are an Angular or React developer, you can easily switch or migrate your projects and still have the same store with little to no changes in the code. Even if you find the articles written for Angular, you can just replace the component implementation in the code samples and you are good to go. No need to scratch your head ✨ Not only this, you can use Akita in Svelte, VueJS, Web Components, and Vanilla JavaScript as well.

Documentation

The success of any technology or framework depends upon many factors and one such factor is documentation. We always need authentic sources and good code examples to start the journey and Akita has proved itself in it. It maintains the documentation and also takes suggestions to improve it and to keep it up to date. I personally tried many samples from their documentation with Angular 10 and I didn’t observe any obsolete content.

Form Support

Have you ever created a multi-step form and tried to manage the controls’ values and validations? Believe me, it can be a nightmare if your second form depends upon the values of the first form. So, Akita can help you over here with its custom solution to synchronize the store and form controls, and then you can easily access the form values from anywhere in the application. You can also check the form’s different statuses like pristine, errors, valid, invalid, disabled, touched, etc.

Akita CLI

To save you from creating files manually, you can generate stores based on the specifications quickly using Akita’s CLI tool.

Library Downloads

Well, this is not the only measurement to decide whether to use this library or not, but I can say that the weekly downloads are increasing gradually and it indicates that developers are getting more and more attracted to it.

Summary

I don’t want you to take my words on Akita, but I would like to urge you to create two projects with the exact same functionality and try to implement both NGRX/NGXS and Akita. You will come to the conclusion with confidence. ✔✔ Don’t forget to tell me in the comments about your choice! 🙂