React-MVx

React-MVx is the MVVM JS application framework built upon three technologies:

• React as a view layer.
• Type-R as a data layer and UI state management.
• NestedLink for two-way data binding.

Contrary to the popular React approaches, React-MVx does not try to avoid the distributed mutable application state. Instead, it is focused on bringing stateful components capabilities to their maximum.

Key features:

• Run-time type asserts. Application state defined with Type-R is protected from improper assignments, including incompatible JSON coming from the network.
• Speed. Collections of 10-20K items are being parsed and processed with sub-second delays.
• Complex state support. Component's state is described with Type-R Record and its attributes can be composed of complex types, including other records and collections with indefinite nesting.
• Automatic serialization. All state elements are serializable to JSON by default with no additional effort.
• id-references support. References by object ids in JSON are resolved automatically, including the situation with multiple collections of records holding cross-references which are being fetched independently.
• Deeply observable changes. Updates are executed in transactions allowing the bunch of changes to be made as reactions on other changes, without introducing extra change events and renders.
• Mutable data structures with pure render support. For some reason, many people believes that it's impossible.
• Two-way data binding. Dealing with complex forms is the strong side of the React-MVx.
• Forms validation. You'll get it for free, just attach the check to the state's attribute.
• Layered application state. You can create and dispose as many stores as you want dynamically. In many cases, you don't even need the store - there's no any difference in managing the component's local state and the store.
• MVVM pattern support. MVVM scales perfectly, and we believe its support is a must.

Examples

• Babel + Webpack boilerplate
• Checklist tree
• TodoMVC
• UsersList
• Flux Comparison

Documentation

Installation & Requirements

Supported browsers: Chrome, Firefox, Safari, IE10+.

Requires react, prop-types, and type-r as peer dependencies. Installation (assuming that React is installed):

npm install react react-mvx type-r prop-types --save-dev

The best way to start is to use the boilerplate which already has babel, webpack, and the minimal set of required dependencies configured.

TypeScript is unsupported (yet) but may work.

Developer tools

The modified version of the React Developer Tools with fixes required for React-MVx is available in the Chrome Web Store.

• Fixed an exception when inspecting the props with custom getters in prototype.
• Collections are displayed as an array (system fields hidden).
• Record is displayed as an object (system fields hidden).
• Component's state (which is the Record) is displayed as an object.

MIT License. Used and supported by Volicon and Verizon Digital Media Services.