JS MVC Frameworks

JavaScript performance comparison

Test case created by Tobias Otte

Preparation code

<script src="http://sb.taurus.uberspace.de/jslib/jquery-1.7.1.min.js"></script>
<script src="http://sb.taurus.uberspace.de/jslib/handlebars.1.0.beta.5.js"></script>

<script src="http://sb.taurus.uberspace.de/jslib/ember-0.9.5.min.js"></script>

<div ng:controller="App.Controllers.TodoController" id="todoapp">
    <header>
        <h1>Todos</h1>
        <form id="todo-form" ng:submit="addTodo()">
        <input id="new-todo" name="newTodo" type="text" placeholder="What needs to be done?">
        </form>
    </header>
    <section id="main" ng:show="hasTodos()">
        <input id="toggle-all" type="checkbox" name="allChecked" ng:click="toggleAllStates()">
        <label for="toggle-all">Mark all as complete</label>
        <ul id="todo-list">
            <li ng:repeat="todo in todos" my:dblclick="editTodo(todo)" ng:class="(todo.done && ' done ') + (todo.editing && ' editing ')">
                <div class="view">
                    <input class="toggle" type="checkbox" name="todo.done">
                    <label>{{ todo.title }}</label>
                    <a class="destroy" ng:click="removeTodo(todo)"></a>
                </div>
                <form ng:submit="finishEditing(todo)">
                    <input class="edit" type="text" name="todo.title" my:focus="todo.editing" my:blur="finishEditing(todo)">
                </form>
            </li>
        </ul>
    </section>
    <footer ng:show="hasTodos()">
        <a id="clear-completed" ng:click="clearCompletedItems()" ng:show="hasFinishedTodos()">{{ clearItemsText() }}</a>
        <div id="todo-count"><b>{{ remainingTodos() }}</b> {{ itemsLeftText() }}</div>
    </footer>
</div>

<script src="http://sb.taurus.uberspace.de/jslib/angular-0.9.19.min.js"></script>

Preparation code output

Todos

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
angular JS
//
pending…
ember JS
//
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment