ADAX

The power of simplicity.

ADAX mini-library (less than 2K gzipped) is the first step in an effort to dramatically streamline apps' developement and maintenance by simplifying their logic flow.

It is usually very easy to implement and reason about a single web component life cycle. Complexity rises when your app grows. Indeed, The more you code, the more it becomes harder to understand how everything fits together.

ADAX is committed to keeping your app as easy to maintain and reason about as it is with a simple web component!

ADAX is so simple there is hardly anything to learn. No external dependencies, no complicated patterns to adopt nor boiler plate code to write.

You may even chose to only use plain old JavaScript (or TypeScript) from start to finish. ADAX only helps you adhere to simplicity!

ADAX does not force you to throw your old code. You can start using ADAX gradually in already existing apps (either adopting ADAX completely or only partially).

React | Vue | Angular | Svelte | Solid | Vanilla JS :-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------: | | | | |

Not only is ADAX designed to be used by any front end library/framework but it also facilitates using different libraries in the same app. ADAX allows all parts/libraries of your app to fully access the same state and react to its changes. See an example with all of React, Vue and Vanilla javascript here

(NB: adax-core can be used with vanilla javascript or any library/framework. However, it is more convenient to use an adapter of your favorite library. We released adax-react whereas adax-vue and adax-angular are being tested. More adapters coming soon)

Overview

Here's a Typical scenario showing one of the ways ADAX can be used.

One can start by defining the:

• State: much like you define the local data/state of a single web component. You define the data/state for the full application or just a subset of it. Organize your state in any way you want. Per component, per group of components or the full app. Place it in a single store, multiple stores, in JSON file(s) ...etc.

• Query: (read) functions to reactively listen to the state changes. Views and components need to subscribe to the data portions they are interested in. For maximum flexibility, they subcribe to queries rather then to predetermined objects.

• Mutate: (create, update, delete) functions to change the state. Views and components can alter the app's data/state through functions as a result of user actions, server interactions, ...etc.

As always, you can use regular and simple JavaScript/TypeScript to implement Query and Mutate functions. All such functions can be used in both visual and non-visual "components".

• Rules(Optional): are ADAX's thin layer to allow the app to listen to the state and react to its changes. I.e. Rules for which query functions must re-run due to which mutate functions and under what conditions.

ADAX has a tiny API surface: trigger and useSync to wrap mutate & query functions respectively (Both shown as dashed arrows in the figure above. Red color is used for trigger and blue for useSync). The third function is addRule to customize when/if reactivity happens.

Documentation for ADAX and the imeplented adapters is being worked on. However, most developers should be able to understand adax by just checking the provided simple example. Simple adax-react example (It comes with a shorter explanation of ADAX).

There are a number of ways to control when/if reactivity happens (views re-rendered and side-effects fired). We encourage the use of Rules as done in the simple example above. Documentation and code examples about the other options to come soon.