From EverybodyWiki Bios & Wiki
Original author(s)Giraldo Rosales
Developer(s)Nitrogen Labs and community
Initial releaseMay 2016; 6 years ago (2016-05)
Written inJavaScript
    TypeJavaScript library
    LicenseMIT Logo.png 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.


    During the end of 2012, there was a rise in Javascript frameworks[2][3]. 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[4][5][6].

    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[7]. Revolving around a unique style of data flow, Flux. The Flux architecture varied quite differently from the mainstream, Model–view–controller (or MVC)[8]. 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.[9]"

    And thus, ArkhamJS was born![10] 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.


    Flux Architecture[edit]

    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[edit]

    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.


    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[edit]

    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.
      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();
            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


    • 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


    1. "Releases – nitrogenlabs/arkhamjs". GitHub.
    2. "Journey Through The JavaScript MVC Jungle". Smashing Magazine. Retrieved 8 February 2018.
    3. "JavaScript Rise of the Single Page Application". Andre's Blog. Retrieved 8 February 2018.
    4. "On the ambitious but bumpy road to AngularJS 2.0". The Guardian. Retrieved 8 February 2018.
    5. "The reason Angular JS will fail". Retrieved 8 February 2018.
    6. "AngularJS the Bad Parts". Lars Eidnes' blog. Retrieved 8 February 2018.
    7. "React: Making faster, smoother UIs for data-driven Web apps". InfoWorld. Retrieved 8 February 2018.
    8. "React.js vs traditional MVC (Backbone, Angular)". The Code Experience. Retrieved 8 February 2018.
    9. "You Might Not Need Redux". Medium. Retrieved 8 February 2018.
    10. "ArkhamJS React Framework". Medium. Retrieved 8 February 2018.

    External links[edit]

    Other articles of the topic Free software : OpenKore, Genius (flashcard software), Avendesora Password Utility, KiriKiri, HomeBank, Tinyproxy, AggreGate Platform
    Some use of "" in your query was not closed by a matching "".Some use of "" in your query was not closed by a matching "".

    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.