title: Javascript templating libraries' intelligibility and their performance (compared to mine)
body: <p>I've just started writing my own little templating library in javascript, because as I went through others, there is always this voice in head, which says: "Oh, this is a lot of code and functionality. Is that really necessary or would it slow down the performance?"</p>
  
  <p><em>If you are able to follow conventions, you would probably run into less issues.</em></p>
  
  <p>So I ended up with this little script with the upper quote in my head.
  The convention, here is that <em>data</em> needs an object and its keys must be the same like in template, mentioned between those delimiter-brackets "{{key}}"</p>
  
  <pre><code>function Template(url, data) {
  
      this.url = url;
      this.data = data;
  
      this.delimiter = ['{{','}}'];
  
  
      this.load = function() {
  
          var string = new String();
  
          var http = null;
          if ( window.XMLHttpRequest ) {
              http = new XMLHttpRequest();
          } else {
              http = new ActiveXObject("Microsoft.XMLHTTP");
          }
  
          http.open('GET', url, false);
          http.onreadystatechange = function() {
              if ( http.readyState === 4 ) {
                  string = http.response;
              }
          };
          http.send(null);
  
          this.template = string;
          return this;
  
      };
  
      this.exchange = function() {
  
          for ( var key in this.data ) {
  
              var bracketedKey = this.delimiter[0] + key + this.delimiter[1];
              var indexOfKey = this.template.indexOf(bracketedKey);
              var lengthOfKey = bracketedKey.length;
  
              var exchange = this.template.substring(indexOfKey, indexOfKey+lengthOfKey);
  
              this.template = this.template.replace(exchange, this.data[key]);
  
          }
  
          return this;
  
      };
  
      this.build = function(selector) {
  
          this.load();
          this.exchange();
  
          var div = document.createElement('div');
          div.innerHTML = this.template;
          div = div.firstChild;
  
          if ( typeof selector === 'string' ) {
              document.querySelector(selector).appendChild(div);
          } else {
              return div;
          }
  
      };
  
  }
  </code></pre>
  
  <p>But now I've started thinking about the fact, that other libraries include more code than mine and there must be a reason for it, mustn't it?</p>
  
  <p>There also a few more thingg, that are coming to my head, like:</p>
  
  <ol>
  <li><p>Less code = better performance?</p></li>
  <li><p>Why do so many people relate their projects with this templating libraries?
  (Matter of performance => that would refute my first point)</p></li>
  </ol>
  
  <p>It'd be cool, if someone could explain me a few things about this topic.</p>
  
  <ol>
  <li>Am I right with my mindset?</li>
  <li>When I am right, is there something that I could improve, or even when I am wrong?</li>
  <li>If you would recommend a library to me, what is your reason?</li>
  </ol>