ArkhamJS

ArkhamJS

Original author(s)	Giraldo Rosales
Developer(s)	Nitrogen Labs and community
Initial release	May 2016 (2016-05)
Written in	JavaScript
Engine
Platform	Cross-platform
Type	JavaScript library
License	MIT
Website	arkhamjs.io

Search ArkhamJS on Amazon.

ArkhamJS is an open-source JavaScript state management framework maintained by Nitrogen Labs and a host of independent developers. Based on the Flux Archived 2020-10-27 at the Wayback Machine architecture, data flows unidirectionally through the app, from a single state tree—the single source of truth.

The framework is designed to allow developers to focus more on app development and less on framework integration, a less intrusive approach. The flexibility of ArkhamJS allows it to mold to each developer's style, creating a rapid development environment and not adding any restraints to creativity. Actions are simply dispatched; components react.

History

During the end of 2012, there was a rise in JavaScript frameworks. These libraries managed dynamic data flowing through a Single-page application. With the popularity of these JavaScript libraries growing, their use began to widen, as well as their inclusion in increasingly complex applications. Many were not ready and began to bottleneck development.

By 2014, large corporations looked for next-generation frameworks to solve the demands of their ever-growing project requirements. One of the top contenders emerged, React. Revolving around a unique style of data flow, Flux. The Flux architecture differed quite significantly from the mainstream, Model–view–controller (or MVC). It emphasized a unidirectional flow of data. This allowed application components to react to changed data, not be limited by an umbrella of trickled-down data.

The only problem that surfaced was the fact that React is only the view layer of the framework and not a complete framework. While Facebook pushed its Flux architecture, it did not have a Flux framework to partner with its popular view layer, React. One developer, Dan Abramov, created Redux (JavaScript library). A single-store, functional framework creating a unidirectional flow of data via the React component's context. While this worked well with some projects, Redux was not suitable for all projects, as Dan states:

"However, if you’re just learning React, don’t make Redux your first choice."

And thus, ArkhamJS was born! In late 2015, Giraldo Rosales created ArkhamJS. The concept originated after involvement with several platforms from corporations including: ADP, Raise Marketplace, and Grubhub. The projects ran into the early obstacles faced by the first generation of JavaScript frameworks. With Flux as the foundation and Redux as an inspiration, it propelled ArkhamJS into a sleek new framework, targeting projects of any size, small and large.

Highlights

Flux Architecture

The Flux programming pattern emphasizes a unidirectional data flow and consists of three parts: the dispatcher, the stores, and the reactions/views.

Single Store

All the data needed is in one store—the single source of truth. This is a departure from a traditional Flux architecture. Using a single source is extremely reliable, fast, and debug-friendly. By using selectors to dig through the app state and obtain context-relevant information, only relevant data is processed on any given dispatch.

Immutable

To prevent object referencing, the use of immutable objects is important. When a mutable state changes, the state's property is not the only item that changes; the item it references can also be updated with it. To prevent passing objects between different states, immutable objects provide your data with a one-way update path.

Basic Usage

There are two classes that are used most, Flux and Store.

import {Flux, Store} from 'arkhamjs';

The Store is used to model data in the state tree.

class SessionStore extends Store {
  constructor() {
    // Set the store name.
    super('session');
  }

  initialState() {
    // Define default values.
    return {
      user: {}
    };
  }

  onAction(type, data, state) {
    // Define how each action type will affect the state.
    switch(type) {
      case 'USER_UPDATE':
        return {...state, user: data.user};
      case 'USER_RESET':
        return this.initialState();
      default:
        return state;
    }
  }
}

The Flux object is used to dispatch actions.

const user = {firstName: 'Bruce', lastName: 'Wayne'};
Flux.dispatch({type: 'USER_UPDATE', user});

Flux is also used to listen for actions within components as well as retrieve data from the single store.

const onUpdate = (action) => {
  // Various ways to retrieve data from the state tree
  console.log(action); // {type: 'USER_UPDATE', user: {firstName: 'Bruce', lastName: 'Wayne'}}
  console.log(Flux.getStore('session.user')); // {firstName: 'Bruce', lastName: 'Wayne'}
  console.log(Flux.getStore('session.user.firstName')); // 'Bruce'
};

Flux.on('USER_UPDATE', onUpdate);

Additional documentation can be found on the ArkhamJS website

Features

• Single store
• Immutable data flow
• Flux architecture
• Object-oriented
• Low learning curve
• Automatically persists state tree
• Access state tree from anywhere in the app
• Easy unit testing
• Expandable via middleware

External links

• Official website

This article "ArkhamJS" is from Wikipedia. The list of its authors can be seen in its historical and/or the page Edithistory:ArkhamJS. Articles copied from Draft Namespace on Wikipedia could be seen on the Draft Namespace of Wikipedia and not main one.

📰 Article(s) of the same category(ies)

• HomerHEVC
• Microsoft Reflect
• Clutter (software)
• NL5 Circuit Simulator
• GuardianKey
• Sobi2
• Bareos

---