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 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, the use of them 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 varied quite differently from the mainstream, Model–view–controller (or MVC). It emphasized a unilateral flow of data. This opened up 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 one-directional flow of data via the React component's context. While this played well with some projects, Redux was not 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 the involvement of 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

Flux programming pattern places an emphasis on a unidirectional data flow, consists of three parts: the dispatcher, the stores, and the reactions/views.

Single Store

All the data needed, in one store... the single source of truth. A side step from the that of 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 imparable. When a mutable state changes, the state's property is not the only item that is changed, the item it references can also be updated with it. To prevent passing objects between different states, immutable objects provides your data 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

Some use of "" in your query was not closed by a matching "".Some use of "" in your query was not closed by a matching "".

• 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)

• Calculator 1.01
• MBomb
• NishchayFramework
• ReactiveUI
• Process Hacker
• Webswing
• PhpED

---