# Introduction

![](https://1597575908-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6W6qxSNpirGD4JLBmY%2F-ML-_x6pGjjn-ywf-yR-%2F-ML0SMhBvx_M9VHYM-iq%2FAJS%20Logo%20Full%20-%20Padded.png?alt=media\&token=5875624c-9eea-46f6-80d1-5487906806f7)

ActiveJS strives to be a pragmatic, reactive state management solution for JavaScript apps.

ActiveJS' reactivity is based on [RxJS Observable](https://rxjs.dev/guide/observable), hence, you can take full advantage of [RxJS operators](https://rxjs.dev/guide/operators).

It's built around **reactive data structures** called [**Units**](https://docs.activejs.dev/activejs/fundamentals/units) that resemble JavaScript's **native data structures** but are much more powerful.  All these feature-packed reactive data structures share the following qualities: 

* Observable value
* Reactive value mutation
* Type-safety
* Cache-enabled
* Optionally Immutable 
* Optionally Persistent

These Units help you share data among different parts of an app with minimum code and effort.\
Furthermore, ActiveJS helps in streamlining asynchronous data APIs like `XHR`, `fetch`, or third party abstractions like Angular's `HttpClient` or `axios`, etc.

## Installation

If you don't have [RxJS](https://rxjs.dev/guide/installation) installed already, you'll need to install it first `npm install rxjs`, and then

```bash
npm i @activejs/core
```

## Quick Example

This is how an implementation of a simple "counter" looks like, using a [NumUnit](https://docs.activejs.dev/activejs/fundamentals/units/numunit), one of the reactive data structures that ActiveJS provides. The [NumUnit](https://docs.activejs.dev/activejs/fundamentals/units/numunit) stores and provides a `number` value at all times ensuring the **type-safety**.

```typescript
// initialize a reactive data structure to store numbers
const counter = new NumUnit() // with default initial-value 0

// two pure functions to produce an appropriate new value
const increment = value => value + 1 
const decrement = value => value - 1

// subscribe for reactive value access, and log the value
counter.subscribe(value => console.log(value))
// immediately logs 0, and will log any future values

// increment
counter.dispatch(increment); // you'll see 1 in the console
// the pure function is called with the current value and
// the returned value is dispatched automatically

// decrement
counter.dispatch(decrement); // you'll see 0 in the console
// that's it our counter is complete

// you can also access the value directly
console.log(counter.value()) // logs 0
```

You never have to worry if the value of this **counter** is `number` or not, the [NumUnit](https://docs.activejs.dev/activejs/fundamentals/units/numunit) will ensure that it's a `number`, it'll ignore any non-`number` value dispatch. We'll talk about it in detail later.

## Quick Comparisons

A "counter" implemented in vanilla **Redux** vs **ActiveJS**. \
It's not a fair comparison because a [NumUnit](https://docs.activejs.dev/activejs/fundamentals/units/numunit) can do so much more alone, and Redux is powerful in its own way. But it is what it is.

![Redux vs ActiveJS](https://1597575908-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6W6qxSNpirGD4JLBmY%2F-MJv31iWOnLCO37G0TJF%2F-MJvF07bHgk9u6k3NSQc%2FRedux%20vs%20ActiveJS.png?alt=media\&token=c381d6e2-59a9-4bd9-9ed5-09ba75028920)

It's hard to  Compare with **NgRx** without involving Angular, but for argument's sake let's pretend that this stripped-down code is valid.

![NgRx vs ActiveJS](https://1597575908-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6W6qxSNpirGD4JLBmY%2F-MJv31iWOnLCO37G0TJF%2F-MJvF5zhSD-B6xt0SVmo%2FNgRx%20vs%20ActiveJS.png?alt=media\&token=3bafc003-6bb8-4515-b6be-7113f6fd89ce)

## Quick Overview

The following data-flow diagram roughly shows where ActiveJS comes into play.\
ActiveJS holds the state and every other part of the application directly shares it without any obscure façade.

![A very high level data-flow diagram of an App using ActiveJS.](https://1597575908-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6W6qxSNpirGD4JLBmY%2F-MAsFH3yDU9S0O2wrt5E%2F-MAurwB-A0FWl-CvM3rN%2FVery%20High%20Level%20Data%20Flow%20\(1\).svg?alt=media\&token=b89c5e63-33d9-41c5-9873-371ede39ac76)

ActiveJS is fully [fuzz-tested](https://en.wikipedia.org/wiki/Fuzzing) with **99.99%** code-coverage.

ActiveJS is really small in size, and it's **tree-shakeable** too.\
Also, there're **no reducers, no middleware, and not even a store for that matter**.\
It's much simpler than that.