Talleyran/redtea_vs_underscore_bench.html

## redtea_vs_underscore_bench.html
<!DOCTYPE html>

<html>
  <head>
    <title>bench</title>
    <meta charset="UTF-8">
    <script src='redtea.js' type='text/javascript'></script>
    <script src='underscore.js' type='text/javascript'></script>
    <script src='jquery-1.9.0.js' type='text/javascript'></script>
  </head>
  <body>
    <div class='a'></div>
    <div class='b'></div>

    <script type='text/javascript'>


      var compiled = _.template( '<div class="product"><h1><%= title %></h1><p><%= description %></p><a href="<%= imageUrl %>">View larger image</a><form><label for="quantity">Quantity</label><input value="1" id="quantity" name="quantity" type="text"><input value="Add to Cart" type="submit"></form></div>' );


      var __hasProp = {}.hasOwnProperty,
          __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };

      var Product, params, product;
      Product = (function(_super) {

        __extends(Product, _super);

        function Product(product) {
          var self;
          this.product = product != null ? product : {};
          self = this;

          this.div({ "class": 'product' }, function() {
            this.h1(function() {
              self.title = this.tn(self.product.title);
            });
            this.p(function() {
              self.description = this.tn(self.product.description);
            });
            self.bigImageLink = this.a({ href: self.product.imageUrl }, function() {
              this.tn("View larger image");
            });
            this.form(function() {
              this.label({ "for": 'quantity' }, function() {
                this.tn('Quantity');
              });
              this.input({ type: "text", name: "quantity", id: "quantity", value: 1 });
              this.input({ type: "submit", value: "Add to Cart" });
            });
          });


          //another way do it with "setTo" (~5% slower becouse functons calls)

          //this.div  ({ "class": 'product' }, function() {
          //  this.h1  (function() {
          //    this.tn  (self.product.title).setTo(self,'title'); });
          //  this.p  (function() {
          //    this.tn  (self.product.description).setTo(self,'description'); });
          //  this.a  ({ href: self.product.imageUrl }, function() { this.tn("View larger image"); }).setTo(self,'bigImageLink');
          //  this.form  (function() {
          //    this.label  ({ "for": 'quantity' }, function() {
          //      this.tn  ('Quantity'); });
          //    this.input  ({ type: "text", name: "quantity", id: "quantity", value: 1 });
          //    this.input  ({ type: "submit", value: "Add to Cart" }); }); });


          //but in coffee it looks like

          //@div class: 'product', ->
          //  @h1 ->
          //    @tn( product.title ).setTo(self,'title')
          //  @p ->
          //    @tn( product.description ).setTo(self,'description')
          //  @a(href: product.imageUrl).setTo(self,'bigImageLink').add ->
          //    @tn "View larger image"
          //  @form ->
          //    @label for: 'quantity', ->
          //      @tn 'Quantity'
          //    @input type: "text", name: "quantity", id: "quantity", value: 1
          //    @input type: "submit", value: "Add to Cart"

        }

        Product.prototype.update = function(product) {
          this.product = product;
          this.title.nodeValue = this.product.title;
          this.description.nodeValue = this.product.description;
          this.bigImageLink.satr('href', this.product.imageUrl);
        };

        return Product;

      })(RTW);

      var params = {
        title: "Battlestar Galactica DVDs",
        thumbUrl: "thumbnail.png",
        imageUrl: "image.png",
        description: "Best. Show. Evar."
      };

      var params2 = {
        title: "XXX",
        thumbUrl: "thumbnail.png",
        imageUrl: "xxx.png",
        description: "Only Hardcore!"
      };

      var jqueryContainer = $('.a')
      var el = root.body.firstByClass('b')
//------------------------------------------------
      var products2 = []
      var t = (new Date).getTime()
      for(var i=0; i<1000;i++){
        var product = $(compiled(params))
        jqueryContainer.append( product )
        products2.push( product )
      }
      console.log((new Date).getTime() - t + 'ms')
//------------------------------------------------
      var products = []
      t = (new Date).getTime()
      for(var i=0; i<1000;i++){
        products.push( el.ins( new Product(params) ) );
      }
      console.log((new Date).getTime() - t + 'ms')
//------------------------------------------------
      t = (new Date).getTime()
      for(var i=0; i<1000;i++){
        products[i].update(params2);
      }
      console.log((new Date).getTime() - t + 'ms')
//------------------------------------------------
    </script>
  </body>
</html>
	<!DOCTYPE html>

	<html>
	<head>
	<title>bench</title>
	<meta charset="UTF-8">
	<script src='redtea.js' type='text/javascript'></script>
	<script src='underscore.js' type='text/javascript'></script>
	<script src='jquery-1.9.0.js' type='text/javascript'></script>
	</head>
	<body>
	<div class='a'></div>
	<div class='b'></div>

	<script type='text/javascript'>


	var compiled = _.template( '<div class="product"><h1><%= title %></h1><p><%= description %></p><a href="<%= imageUrl %>">View larger image</a><form><label for="quantity">Quantity</label><input value="1" id="quantity" name="quantity" type="text"><input value="Add to Cart" type="submit"></form></div>' );


	var __hasProp = {}.hasOwnProperty,
	__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };

	var Product, params, product;
	Product = (function(_super) {

	__extends(Product, _super);

	function Product(product) {
	var self;
	this.product = product != null ? product : {};
	self = this;

	this.div({ "class": 'product' }, function() {
	this.h1(function() {
	self.title = this.tn(self.product.title);
	});
	this.p(function() {
	self.description = this.tn(self.product.description);
	});
	self.bigImageLink = this.a({ href: self.product.imageUrl }, function() {
	this.tn("View larger image");
	});
	this.form(function() {
	this.label({ "for": 'quantity' }, function() {
	this.tn('Quantity');
	});
	this.input({ type: "text", name: "quantity", id: "quantity", value: 1 });
	this.input({ type: "submit", value: "Add to Cart" });
	});
	});


	//another way do it with "setTo" (~5% slower becouse functons calls)

	//this.div ({ "class": 'product' }, function() {
	// this.h1 (function() {
	// this.tn (self.product.title).setTo(self,'title'); });
	// this.p (function() {
	// this.tn (self.product.description).setTo(self,'description'); });
	// this.a ({ href: self.product.imageUrl }, function() { this.tn("View larger image"); }).setTo(self,'bigImageLink');
	// this.form (function() {
	// this.label ({ "for": 'quantity' }, function() {
	// this.tn ('Quantity'); });
	// this.input ({ type: "text", name: "quantity", id: "quantity", value: 1 });
	// this.input ({ type: "submit", value: "Add to Cart" }); }); });


	//but in coffee it looks like

	//@div class: 'product', ->
	// @h1 ->
	// @tn( product.title ).setTo(self,'title')
	// @p ->
	// @tn( product.description ).setTo(self,'description')
	// @a(href: product.imageUrl).setTo(self,'bigImageLink').add ->
	// @tn "View larger image"
	// @form ->
	// @label for: 'quantity', ->
	// @tn 'Quantity'
	// @input type: "text", name: "quantity", id: "quantity", value: 1
	// @input type: "submit", value: "Add to Cart"

	}

	Product.prototype.update = function(product) {
	this.product = product;
	this.title.nodeValue = this.product.title;
	this.description.nodeValue = this.product.description;
	this.bigImageLink.satr('href', this.product.imageUrl);
	};

	return Product;

	})(RTW);

	var params = {
	title: "Battlestar Galactica DVDs",
	thumbUrl: "thumbnail.png",
	imageUrl: "image.png",
	description: "Best. Show. Evar."
	};

	var params2 = {
	title: "XXX",
	thumbUrl: "thumbnail.png",
	imageUrl: "xxx.png",
	description: "Only Hardcore!"
	};

	var jqueryContainer = $('.a')
	var el = root.body.firstByClass('b')
	//------------------------------------------------
	var products2 = []
	var t = (new Date).getTime()
	for(var i=0; i<1000;i++){
	var product = $(compiled(params))
	jqueryContainer.append( product )
	products2.push( product )
	}
	console.log((new Date).getTime() - t + 'ms')
	//------------------------------------------------
	var products = []
	t = (new Date).getTime()
	for(var i=0; i<1000;i++){
	products.push( el.ins( new Product(params) ) );
	}
	console.log((new Date).getTime() - t + 'ms')
	//------------------------------------------------
	t = (new Date).getTime()
	for(var i=0; i<1000;i++){
	products[i].update(params2);
	}
	console.log((new Date).getTime() - t + 'ms')
	//------------------------------------------------
	</script>
	</body>
	</html>