gistfile1.js

timeit = function(fn) {
    var a = (new Date()).valueOf();
    fn();
    console.log((new Date()).valueOf() - a);
}

this.renderWithJS = function() {
    timeit(function() {
        var d = ['<ul class="list-group">'];
        var i, user;
        for(i=0;i<$scope.users.length;i++) {
            user = $scope.users[i];
            d.push('<li class="list-group-item">' + user.id + ': ' + user.firstName + ' - ' + user.lastName + '</li>')
        }
        d.push('</ul>')
        element.innerHTML = d.join('');
    
    })
}
this.renderWithJS2 = function() {
    timeit(function() {
        var ul = document.createElement('ul');
        ul.className = 'list-group';

        var i, user, li;
        for(i=0;i<$scope.users.length;i++) {
            user = $scope.users[i];

            li = document.createElement('li')
            li.className = 'list-group-item'
            li.addEventListener('click', (function(user){
                return function(){
                    $scope.userSelected(user)
                }
            })(user))
            li.innerText = user.id + ': ' + user.firstName + ' - ' + user.lastName;

            ul.appendChild(li);

        }
        element.appendChild(ul);
    })
}

this.renderWithReact = function() {
    timeit(function() {
        React.renderComponent(UserList({scope: $scope}), element);
    })
}