emes v1.0.4

emes

Emes is a library in the vein for Entity Component Systems for javascript applications. It provides a centralized store for application state and a message bus to handle state changes and events. Reade more.

Installation

OS X & Linux:

npm install emes --save

Usage example

In app.jsx

class TodoApp extends React.Component {
    
    ... 

    componentDidMount() {
        manager.addSystem(function (message, manager) {
            if (message.name === "change")  {
                self.setState({todos : manager.getEntitiesByType("todo")});
            }
        });
        router.init('/');
    }

    ...
    handleNewTodoKeyDown(event) {
        if (event.keyCode !== ENTER_KEY) {
            return;
        }

        event.preventDefault();

        var val = this.state.newTodo.trim();

        if (val) {
            manager.notify(new Message("addTodo", {title: event.target.value}));
            this.setState({newTodo: ''});
        }
    }

    ...

        return (
            <div>
                <header className="header">
                    <h1>todos</h1>
                    <input
                        className="new-todo"
                        placeholder="What needs to be done?"
                        value={this.state.newTodo}
                        onKeyDown={this.handleNewTodoKeyDown.bind(this)}
                        onChange={this.handleChange.bind(this)}
                        autoFocus={true}
                    />
                </header>
                {main}
                {footer}
            </div>

Inside the model,

import {Manager, System, Entity, Message} from 'emes';
import Immutable from 'immutable';

export var manager = new Manager();

manager.addSystem(function (message, manager) {
    if (message.name == "addTodo") {
        var title = message.data.title;
        var todo = manager.createEntity("todo", {
            title: title,
            completed: false
        });
        manager.notify(new Message("change", {message: message}));
    }
});

Docs

The workflow is approximately this,

1. Every time state needs to be changed, create a new Message and notify the manager
2. Manager broadcasts the message to all registered Systems
3. Systems changes the store and notifies everyone via a change Message
4. UI changes its state by listening to the change message

Docco documentation avaiable here.

Release History

• 1.0.4
  • CHANGE: Documentation
• 1.0.3
  • CHANGE: Added serialising functions to Entity
• 1.0.2
  • CHANGE: Readme
• 1.0.1
  • CHANGE: First commit

License

Distributed under the MIT license.

Contributing

1. Fork it (https://github.com/moodyharsh/emes/fork)
2. Create your feature branch (git checkout -b feature/fooBar)
3. Commit your changes (git commit -am 'Add some fooBar')
4. Push to the branch (git push origin feature/fooBar)
5. Create a new Pull Request

Authors

• moodyharsh - Initial work