- Current status
- Flux implementation
- React Native support
- Care to help?
===. So, only the components whose state was altered are re-rendered.
Morearty puts state updates in a render queue and applies them asynchronously in requestAnimationFrame in one pass, falling back to
requestAnimationFrame is not available. This dramatically simplifies reasoning about the application and improves performance.
See documentation for more info.
Morearty requires React version 0.13 or higher (download) and Immutable 3.7 and above (download). Both should be available as global variables with names
Immutable unless you're using NPM. Require.js users can do something like:
Morearty 0.7 series changes:
- Support React 0.14 (starting from
- React Native support (thanks to @gilbox).
- Support React 0.13 and Immutable 3.7.
- Asynchronous rendering is the default, synchronous mode is no longer supported.
- Support cancelling transactions.
this.addBindingListener(...)in components for component lifecycle bounded listeners creation. Just listen for changes, all required cleanup is performed in
renderOnceconfiguration parameter useful to ensure rendering is performed only once. Other server rendering corrections.
Context.bootstraphelper method simplifying application bootstrapping.
- Support dynamic bindings (#36).
- Support passing custom React context (#37).
- Introduced observed bindings and observed props.
- Support IE8. Deprecate
Binding.deletein favor of
Morearty 0.6 series changes:
- React 0.12 and Immutable 3.0 or higher now required.
- Introduce bindings meta info that allows to store data you don't want to put in the main state, e.g. validation info, history, and so on.
- Generate less garbage during render.
- History module migrated on meta binding API.
See releases page for detailed per-release changes descriptions.
See Wiki pages for a thourough explanation of Morearty concepts.
Auto-generated API documentation is available here.
var Ctx = Morearty;
When you create components this way, each acquires a correctly defined
shouldComponentUpdate method which uses that component's binding (if any) to determine if its state was changed. By default, state is transferred to sub-components in the
binding attribute and can be retrieved using the
To continue this introduction, TodoMVC implementation based on Morearty.js will be used (repository, application). You should have some previous React knowledge to follow painlessly, only Morearty-specific parts will be described.
Let's now define main application module
var NOW_SHOWING = Object;var App = React;
getDefaultBinding method to retrieve its state binding and delegate it to its children. See
getDefaultBinding API doc for the discussion of the default binding concept.
var Header = React;
var TodoList = React;
onToggleAll callback sets
completed property on all items. Note how state is transferred to the children: only the relevant sub-state is passed using sub method which creates a sub-binding pointing deeper into global state. So, TODO item can only access and modify its own cell, and the rest of application state is protected from incidental modification. val method allows to retrieve the value stored in the binding or in its sub-path.
var TodoItem = React;
Here component title is written to the global state using set helper when text in changed. To remove the item no callback needs to be passed from the parent: item component just calls Binding's remove method which removes it from the list of items. In
onEnter method transaction is used to prevent re-rendering between state transitions. It effectively notifies global listeners once on commit.
var Footer = React;
Nothing special here so let's jump straight to...
Starting the application
var Bootstrap = Ctx; // will pass root binding to AppReact;
Ctx.bootstrap method creates Morearty application bootstrap component which is then passed to React render routine.
Principal differences from raw React
You can compare this Morearty-based TodoMVC implementation to the official React version. Main highlights are:
- No callbacks are passed to sub-components. This becomes especially useful when you find yourself trying to transfer a callback to a component's grand-children (you may never know how your DOM may be restructured after a redesign). There is nothing inherently wrong in passing callbacks to sub-components, but in many cases this can be avoided.
- No hacks in code simulating immutable state and other tricks (look at the comments within React version sources).
- Reasoning about the application is much simpler!
- Each component gets a
shouldComponentUpdatemethod, no need to define it manually (but you can if you like).
- Less code.
React Native support
Starting from version 0.7.16 running on React Native is supported:
var Morearty = ;
Care to help?
Feel free to provide ideas, suggestions, enhancements, documentation improvements. Any feedback or input is highly appreciated. Morearty development is currently driven mostly by feature requests.
Morearty uses NPM scripts for building:
npm run <command> where
command is one of:
- test (run tests);
- build (run tests and build dist files);
- doc (generate documentation).
- Alexander Semenov @Tvaroh (author)
- Marat Bektimirov @mbektimirov (collaborator)
- Tim Griesser @tgriesser (collaborator)
- Pavel Birukov @r00ger (collaborator)
- Gil Birman @gilbox (collaborator)
- Valentine Valyaeff @valff (collaborator)