Marionette DocumentFragment CollectionView (v3)

Revision 3 of this benchmark created by Paul Tyng on

Preparation HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.1.0-bundled/backbone.marionette.min.js"></script>

<table><tbody id="target"></tbody></table>

Setup

var originalAppendHtml = Marionette.CollectionView.prototype.appendHtml;
    var originalShowCollection = Marionette.CollectionView.prototype.showCollection;
    
    var itemTemplate = _.template('<td><strong><%= name %></strong></td><td><%= description %></td><td><em><%= language %></em></td>');
    
    var repositories = new Backbone.Collection([
      {
        "name": "typeahead.js",
        "description": "A fast and fully-featured autocomplete library",
        "language": "JavaScript",
        "value": "typeahead.js",
        "tokens": [
          "typeahead.js",
          "JavaScript"
        ]
      },
      {
        "name": "cassandra",
        "description": "A Ruby client for the Cassandra distributed database",
        "language": "Ruby",
        "value": "cassandra",
        "tokens": [
          "cassandra",
          "Ruby"
        ]
      },
      {
        "name": "hadoop-lzo",
        "description": "Refactored version of code.google.com/hadoop-gpl-compression for hadoop 0.20",
        "language": "Shell",
        "value": "hadoop-lzo",
        "tokens": [
          "hadoop",
          "lzo",
          "Shell",
          "hadoop-lzo"
        ]
      },
      {
        "name": "scribe",
        "description": "A Ruby client library for Scribe",
        "language": "Ruby",
        "value": "scribe",
        "tokens": [
          "scribe",
          "Ruby"
        ]
      },
      {
        "name": "thrift_client",
        "description": "A Thrift client wrapper that encapsulates some common failover behavior",
        "language": "Ruby",
        "value": "thrift_client",
        "tokens": [
          "thrift",
          "client",
          "Ruby",
          "thrift_client"
        ]
      },
      {
        "name": "mustache.js",
        "description": "Minimal templating with {{mustaches}} in JavaScript",
        "language": "JavaScript",
        "value": "mustache.js",
        "tokens": [
          "mustache.js",
          "JavaScript"
        ]
      },
      {
        "name": "grabby-hands",
        "description": "A JVM Kestrel client that aggregates queues from multiple servers. Implemented in Scala with Java bindings. In use at Twitter for all JVM Search and Streaming Kestrel interactions.",
        "language": "Scala",
        "value": "grabby-hands",
        "tokens": [
          "grabby",
          "hands",
          "Scala",
          "grabby-hands"
        ]
      },
      {
        "name": "gizzard",
        "description": "A flexible sharding framework for creating eventually-consistent distributed datastores",
        "language": "Scala",
        "value": "gizzard",
        "tokens": [
          "gizzard",
          "Scala"
        ]
      },
      {
        "name": "thrift",
        "description": "Twitter's out-of-date, forked thrift",
        "language": "C++",
        "value": "thrift",
        "tokens": [
          "thrift",
          "C++"
        ]
      },
      {
        "name": "flockdb",
        "description": "A distributed, fault-tolerant graph database",
        "language": "Scala",
        "value": "flockdb",
        "tokens": [
          "flockdb",
          "Scala"
        ]
      },
      {
        "name": "flockdb-client",
        "description": "A Ruby client library for FlockDB",
        "language": "Ruby",
        "value": "flockdb-client",
        "tokens": [
          "flockdb",
          "client",
          "Ruby",
          "flockdb-client"
        ]
      },
      {
        "name": "standard-project",
        "description": "A slightly more standard sbt project plugin library ",
        "language": "Scala",
        "value": "standard-project",
        "tokens": [
          "standard",
          "project",
          "Scala",
          "standard-project"
        ]
      },
      {
        "name": "snowflake",
        "description": "Snowflake is a network service for generating unique ID numbers at high scale with some simple guarantees.",
        "language": "Scala",
        "value": "snowflake",
        "tokens": [
          "snowflake",
          "Scala"
        ]
      },
      {
        "name": "haplocheirus",
        "description": "A Redis-backed storage engine for timelines",
        "language": "Scala",
        "value": "haplocheirus",
        "tokens": [
          "haplocheirus",
          "Scala"
        ]
      },
      {
        "name": "gizzmo",
        "description": "A command-line client for Gizzard",
        "language": "Ruby",
        "value": "gizzmo",
        "tokens": [
          "gizzmo",
          "Ruby"
        ]
      },
      {
        "name": "scala-zookeeper-client",
        "description": "A Scala client library for ZooKeeper",
        "language": "Scala",
        "value": "scala-zookeeper-client",
        "tokens": [
          "scala",
          "zookeeper",
          "client",
          "Scala",
          "scala-zookeeper-client"
        ]
      },
      {
        "name": "rpc-client",
        "description": "A scala library that encapsulates RPC communications.",
        "language": "Scala",
        "value": "rpc-client",
        "tokens": [
          "rpc",
          "client",
          "Scala",
          "rpc-client"
        ]
      },
      {
        "name": "twitcher",
        "description": "A tool for executing scripts when ZooKeeper nodes change.",
        "language": "Python",
        "value": "twitcher",
        "tokens": [
          "twitcher",
          "Python"
        ]
      },
      {
        "name": "killdeer",
        "description": "Killdeer is a simple server for replaying a sample of responses to sythentically recreate production response characteristics.",
        "language": "Scala",
        "value": "killdeer",
        "tokens": [
          "killdeer",
          "Scala"
        ]
      },
      {
        "name": "ostrich",
        "description": "A stats collector & reporter for Scala servers",
        "language": "Scala",
        "value": "ostrich",
        "tokens": [
          "ostrich",
          "Scala"
        ]
      },
      {
        "name": "rubyenterpriseedition187-248",
        "description": "Twitter's updates to Ruby Enterprise Edition, itself based on MRI 1.8.7-p248",
        "language": "Ruby",
        "value": "rubyenterpriseedition187-248",
        "tokens": [
          "rubyenterpriseedition187",
          "248",
          "Ruby",
          "rubyenterpriseedition187-248"
        ]
      },
      {
        "name": "scala_school",
        "description": "Lessons in the Fundamentals of Scala",
        "language": "Scala",
        "value": "scala_school",
        "tokens": [
          "scala",
          "school",
          "Scala",
          "scala_school"
        ]
      },
      {
        "name": "querulous",
        "description": "An agreeable way to talk to your database",
        "language": "Scala",
        "value": "querulous",
        "tokens": [
          "querulous",
          "Scala"
        ]
      },
      {
        "name": "xrayspecs",
        "description": "extensions to scala specs",
        "language": "Scala",
        "value": "xrayspecs",
        "tokens": [
          "xrayspecs",
          "Scala"
        ]
      },
      {
        "name": "kestrel-client",
        "description": "A Kestrel client library for Ruby",
        "language": "Ruby",
        "value": "kestrel-client",
        "tokens": [
          "kestrel",
          "client",
          "Ruby",
          "kestrel-client"
        ]
      },
      {
        "name": "finagle",
        "description": "A fault tolerant, protocol-agnostic RPC system",
        "language": "Scala",
        "value": "finagle",
        "tokens": [
          "finagle",
          "Scala"
        ]
      },
      {
        "name": "naggati2",
        "description": "Protocol builder for netty using scala",
        "language": "Scala",
        "value": "naggati2",
        "tokens": [
          "naggati2",
          "Scala"
        ]
      },
      {
        "name": "twitter-text-conformance",
        "description": "Conformance testing data for the twitter-text-* repositories",
        "language": null,
        "value": "twitter-text-conformance",
        "tokens": [
          "twitter",
          "text",
          "conformance",
          "twitter-text-conformance"
        ]
      },
      {
        "name": "twitter-text-rb",
        "description": "A library that does auto linking and extraction of usernames, lists and hashtags in tweets",
        "language": "Ruby",
        "value": "twitter-text-rb",
        "tokens": [
          "twitter",
          "text",
          "rb",
          "Ruby",
          "twitter-text-rb"
        ]
      },
      {
        "name": "twitter-text-java",
        "description": "A Java implementation of Twitter's text processing library",
        "language": "Java",
        "value": "twitter-text-java",
        "tokens": [
          "twitter",
          "text",
          "java",
          "Java",
          "twitter-text-java"
        ]
      },
      {
        "name": "twitter-text-js",
        "description": "A JavaScript implementation of Twitter's text processing library",
        "language": "JavaScript",
        "value": "twitter-text-js",
        "tokens": [
          "twitter",
          "text",
          "js",
          "JavaScript",
          "twitter-text-js"
        ]
      },
      {
        "name": "joauth",
        "description": "A Scala library for authenticating HTTP Requests using OAuth",
        "language": "Scala",
        "value": "joauth",
        "tokens": [
          "joauth",
          "Scala"
        ]
      },
      {
        "name": "schmemcached",
        "description": "A prototype implementation of a Memcached client & server in Scala using Finagle",
        "language": "Scala",
        "value": "schmemcached",
        "tokens": [
          "schmemcached",
          "Scala"
        ]
      },
      {
        "name": "chainsaw",
        "description": "A thin Scala wrapper for SLF4J",
        "language": "Scala",
        "value": "chainsaw",
        "tokens": [
          "chainsaw",
          "Scala"
        ]
      },
      {
        "name": "streamyj",
        "description": "Scala sugar for the Jackson JSON parser",
        "language": "Scala",
        "value": "streamyj",
        "tokens": [
          "streamyj",
          "Scala"
        ]
      },
      {
        "name": "cloudhopper-commons-util",
        "description": "The ch-commons-util package contains common utility classes for Cloudhopper-based Java projects.",
        "language": "Java",
        "value": "cloudhopper-commons-util",
        "tokens": [
          "cloudhopper",
          "commons",
          "util",
          "Java",
          "cloudhopper-commons-util"
        ]
      },
      {
        "name": "twitter.github.com",
        "description": "A listing of open source efforts at Twitter on GitHub",
        "language": "JavaScript",
        "value": "twitter.github.com",
        "tokens": [
          "twitter.github.com",
          "JavaScript"
        ]
      },
      {
        "name": "time_constants",
        "description": "Time constants, in seconds, so you don't have to use slow ActiveSupport helpers",
        "language": "Ruby",
        "value": "time_constants",
        "tokens": [
          "time",
          "constants",
          "Ruby",
          "time_constants"
        ]
      },
      {
        "name": "commons",
        "description": "Twitter common libraries for python and the JVM",
        "language": "Java",
        "value": "commons",
        "tokens": [
          "commons",
          "Java"
        ]
      },
      {
        "name": "scala-bootstrapper",
        "description": "initial setup for a scala library or server, using sbt",
        "language": "Ruby",
        "value": "scala-bootstrapper",
        "tokens": [
          "scala",
          "bootstrapper",
          "Ruby",
          "scala-bootstrapper"
        ]
      },
      {
        "name": "sbt-thrift",
        "description": "sbt rules for generating source stubs out of thrift IDLs, for java & scala",
        "language": "Ruby",
        "value": "sbt-thrift",
        "tokens": [
          "sbt",
          "thrift",
          "Ruby",
          "sbt-thrift"
        ]
      },
      {
        "name": "cloudhopper-smpp",
        "description": "Efficient, scalable, and flexible Java implementation of the Short Messaging Peer to Peer Protocol (SMPP)",
        "language": "Java",
        "value": "cloudhopper-smpp",
        "tokens": [
          "cloudhopper",
          "smpp",
          "Java",
          "cloudhopper-smpp"
        ]
      },
      {
        "name": "cloudhopper-commons-charset",
        "description": "Java utility classes for converting between charsets (mostly \"mobile\" in nature) such as Unicode to GSM-7/GSM-8 and vice versa.",
        "language": "Java",
        "value": "cloudhopper-commons-charset",
        "tokens": [
          "cloudhopper",
          "commons",
          "charset",
          "Java",
          "cloudhopper-commons-charset"
        ]
      },
      {
        "name": "cloudhopper-commons-gsm",
        "description": "Java utility classes for working with GSM mobile technologies such as SMS and MMS.",
        "language": "Java",
        "value": "cloudhopper-commons-gsm",
        "tokens": [
          "cloudhopper",
          "commons",
          "gsm",
          "Java",
          "cloudhopper-commons-gsm"
        ]
      },
      {
        "name": "util",
        "description": "Wonderful reusable code from Twitter",
        "language": "Scala",
        "value": "util",
        "tokens": [
          "util",
          "Scala"
        ]
      },
      {
        "name": "Rowz",
        "description": "A sample gizzard application",
        "language": "Scala",
        "value": "Rowz",
        "tokens": [
          "rowz",
          "Scala"
        ]
      },
      {
        "name": "scala-json",
        "description": "Scala JSON toolkit. Originally from the Odersky \"Stairway\" Book, tightened up and tests added by Twitter",
        "language": "Scala",
        "value": "scala-json",
        "tokens": [
          "scala",
          "json",
          "Scala",
          "scala-json"
        ]
      },
      {
        "name": "twui",
        "description": "A UI framework for Mac based on Core Animation",
        "language": "Objective-C",
        "value": "twui",
        "tokens": [
          "twui",
          "Objective-C"
        ]
      },
      {
        "name": "bootstrap",
        "description": "Sleek, intuitive, and powerful front-end framework for faster and easier web development.",
        "language": "JavaScript",
        "value": "bootstrap",
        "tokens": [
          "bootstrap",
          "JavaScript"
        ]
      },
      {
        "name": "scrooge-runtime",
        "description": "Runtime classes for scrooge-generated Thrift code",
        "language": "Scala",
        "value": "scrooge-runtime",
        "tokens": [
          "scrooge",
          "runtime",
          "Scala",
          "scrooge-runtime"
        ]
      },
      {
        "name": "sbt-scrooge",
        "description": "An SBT plugin that adds a mixin for doing Thrift code auto-generation during your compile phase",
        "language": "Scala",
        "value": "sbt-scrooge",
        "tokens": [
          "sbt",
          "scrooge",
          "Scala",
          "sbt-scrooge"
        ]
      }
    ]);

Teardown


    Marionette.CollectionView.prototype.appendHtml = originalAppendHtml;
    Marionette.CollectionView.prototype.showCollection = originalShowCollection;
    
    document.getElementById('target').innerHTML = '';

Test runner

Ready to run.

Testing in
TestOps/sec
Raw Marionette
(function() {

var MyItemView = Marionette.ItemView.extend({
  tagName: 'tr',
  template: itemTemplate
});

var MyCollectionView = Marionette.CollectionView.extend({
  tagName: 'tbody',
  itemView: MyItemView
});

var collectionView = new MyCollectionView({ collection: repositories, el: document.getElementById('target') });

collectionView.render();

})();
ready
Document Fragment
(function() {

Marionette.CollectionView.prototype.appendHtml = function() {};
Marionette.CollectionView.prototype.showCollection = function() {
  originalShowCollection.apply(this, arguments);
  
  var fragment = document.createDocumentFragment();

  this.children.each(function(view) {
    fragment.appendChild(view.el);
  });

  this.el.appendChild(fragment);
};

var MyItemView = Marionette.ItemView.extend({
  tagName: 'tr',
  template: itemTemplate
});

var MyCollectionView = Marionette.CollectionView.extend({
  tagName: 'tbody',
  itemView: MyItemView
});

var collectionView = new MyCollectionView({ collection: repositories, el: document.getElementById('target') });

collectionView.render();

})();
ready

Revisions

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