Rista vs. React

Benchmark created by RubaXa on December 3, 2015

Preparation HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.32/browser.js"></script>
<script src="https://fb.me/react-0.14.3.js"></script>
<script src="https://fb.me/react-dom-0.14.3.js"></script>

<script src="https://rawgit.com/Riim/rista/master/rista.js"></script>

<div style="height: 200px; overflow: hidden;">
<rista-test-app></rista-test-app>
<div id="react-test-app"></div>
</div>

<script type="text/babel">
(function () {
        let SEX_ALL = -1;
        let SEX_MALE = 0;
        let SEX_FEMALE = 1;

        const appModel = window.reactAppModel = {
                friends: [
                        {id: 1, name: 'Костя', sex: SEX_MALE, online: true},
                        {id: 2, name: 'Миша', sex: SEX_MALE, online: false},
                        {id: 3, name: 'Настя', sex: SEX_FEMALE, online: false},
                        {id: 4, name: 'Даша', sex: SEX_FEMALE, online: true},
                        {id: 5, name: 'Евгений', sex: SEX_MALE, online: true}
                ],

                filterOptionSex: SEX_ALL,
                filterOptionOnline: false
        };

        const bus = window.reactBus = {
                _list: [],

                addChangeListener(callback) {
                        bus._list.push(callback);
                },

                emitChanged() {
                        const list = bus._list;
                        let idx = list.length;

                        while (idx--) {
                                list[idx]();
                        }
                }
        };

        const FriendList = React.createClass({
                render() {
                        return <ul>{this.props.items.map(user => <li key={user.id}>{user.name}</li>)}</ul>;
                }
        });

        const TestApp = React.createClass({
          componentDidMount() {
                bus.addChangeListener(() => this.forceUpdate());
          },

          _onInputSexChange(evt) {
                appModel.filterOptionSex = +evt.target.value;
                bus.emitChanged();
          },

          _onInputOnlineChange(evt) {
                appModel.filterOptionOnline = +evt.target.checked;
                bus.emitChanged();
          },

          getFilteredFriends() {
                return appModel.friends.filter(user => {
                        if (appModel.filterOptionSex != SEX_ALL && user.sex != appModel.filterOptionSex) {
                                return false;
                        }

                        if (appModel.filterOptionOnline && !user.online) {
                                return false;
                        }

                        return true;
                });
          },

          render() {
                return (
                        <div>
                                <fieldset>
                                        <legend>Фильтры</legend>
                                        <p>
                                                <select onChange={this._onInputSexChange}>
                                                        <option value={SEX_ALL}>Все</option>
                                                        <option value={SEX_MALE}>Мальчик</option>
                                                        <option value={SEX_FEMALE}>Девочка</option>
                                                </select>
                                        </p>
                                        <p>
                                                <label>
                                                        <input checked={appModel.filterOptionOnline} type="checkbox" onChange={this._onInputOnlineChange}/>
                                                        Онлайн
                                                </label>
                                        </p>
                                </fieldset>
                                <FriendList items={this.getFilteredFriends()}/>
                        </div>
                );
          }
        });

        ReactDOM.render(<TestApp/>, window['react-test-app']);
})();
</script>

<script type="text/es7">
(function () {
        let d = rista.d;

        let SEX_ALL = -1;
        let SEX_MALE = 0;
        let SEX_FEMALE = 1;

        class User {
                @d.observable name = undefined;
                @d.observable sex = undefined;
                @d.observable online = undefined;

                constructor(data) {
                        for (let name in data) {
                                this[name] = data[name];
                        }
                }
        }

        let appModel = window.observableAppModel = {
                @d.observable viewerFriends: rista.list([
                        new User({ name: 'Костя', sex: SEX_MALE, online: true }),
                        new User({ name: 'Миша', sex: SEX_MALE, online: false }),
                        new User({ name: 'Настя', sex: SEX_FEMALE, online: false }),
                        new User({ name: 'Даша', sex: SEX_FEMALE, online: true }),
                        new User({ name: 'Евгений', sex: SEX_MALE, online: true })
                ]),

                @d.observable filterOptionSex: SEX_ALL,
                @d.observable filterOptionOnline: false
        };

        rista.component('rista-test-app', {
                renderInner() {
                        return `
                                <fieldset>
                                        <legend>Фильтры</legend>
                                        <p>
                                                <select rt-change="_onInputSexChange">
                                                        <option value="${SEX_ALL}" selected>Все</option>
                                                        <option value="${SEX_MALE}">Мальчик</option>
                                                        <option value="${SEX_FEMALE}">Девочка</option>
                                                </select>
                                        </p>
                                        <p>
                                                <label><input ${appModel.filterOptionOnline ? 'checked' : ''} type="checkbox" rt-change="_onInputOnlineChange"> Онлайн</label>
                                        </p>
                                </fieldset>
                                <friend-list></friend-list>
                        `;
                },

                _onInputSexChange(evt) {
                        appModel.filterOptionSex = +evt.target.value;
                },

                _onInputOnlineChange(evt) {
                        appModel.filterOptionOnline = evt.target.checked;
                }
        });

        rista.component('friend-list', {
                @d.computed filteredViewerFriends: function() {
                        return appModel.viewerFriends.filter(user => {
                                if (appModel.filterOptionSex != SEX_ALL && user.sex != appModel.filterOptionSex) {
                                        return false;
                                }
                                if (appModel.filterOptionOnline && !user.online) {
                                        return false;
                                }
                                return true;
                        });
                },

                renderInner() {
                        return `<ul>${this.filteredViewerFriends.map(user => `<li>${user.name}</li>`).join('')}</li>`;
                }
        });
})();
</script>

<script>
Array.prototype.forEach.call(document.querySelectorAll('script[type="text/es7"]'), function(script) {
        babel.run(script.innerHTML, {
                optional: ['es7.classProperties', 'es7.decorators', 'es7.functionBind']
        });
});
</script>

Test runner

reactAppModel.filterOptionOnline = !reactAppModel.filterOptionOnline;
reactBus.emitChanged();

observableAppModel.filterOptionOnline = !observableAppModel.filterOptionOnline;

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published by RubaXa on December 3, 2015