Many times it becomes useful to be able to make an AJAX request for some data, insert it into some HTML that is already on the client, and then display it to the user. There are a few ways to implement this, each approach has its benefits and drawbacks.

##String Concatenation

Possibly the simplest way to accomplish the templating in JavaScript is to use simple string concatenation with ‘+’. This is the approach that I see many newcomers to JavaScript use in their code, as it is the simplest to implement. However, it does have a major drawback in that this method has the worst performance of all, especially in older versions of Internet Explorer. This could be implemented as below:

var html = '<div class="' + classname + '">' + content + '</div>;

##Array Operations

While this is not as simple as the string concatenation, it makes up for the slight uptick in complexity with the fastest runtime of any of the three solutions. If you are supporting Internet Explorer 7 or below, this is a solution that is able to run in an acceptible amount of time. An example is shown below.

var html_array = array();
html_array.push('<div class="');
html_array.push(classname);
html_array.push('">');
html_array.push(content);
html_array.push('</div>');
var html = html_array.join('');

##Mustache Templating

While the first two approaches are easy to get started and implemented, using Mustache templates are much easier to maintain as they look and function more like pure HTML. Performance-wise this is not nearly as fast as the Array Operations, but, depending on the actual templating engine you are using, can be much faster than simple string concatenation. An example of a simple Mustache template is shown below:

var html_template = '<div class=""><article class="post" itemscope itemtype="http://schema.org/BlogPosting">

  <header class="post-header">
    <h1 class="post-title" itemprop="name headline">Login Problems with Magento and Varnish</h1>
    <p class="post-meta"><time datetime="2014-03-30T02:30:43+00:00" itemprop="datePublished">Mar 30, 2014</time></p>
  </header>

  <div class="post-content" itemprop="articleBody">
    <p>When you have a Magento website configured to use Varnish as a caching frontend, there are certain scenarios where you may have some problems logging-in to the frontend of the website. It poses some unique problems that are not frequently seen on a typical website. This issue typically manifests itself to the end user by visiting the login page, entering the correct credential, submitting the form, and then the page reloads the login page again instead of redirecting to the My Account page or whatever page is specified in the configuration.
##Diagnosing the issue
So, it is quite interesting to see this happen as the user will still get notified that they are using the wrong username/password combination, but are unable to successfully authenticate with the website. In order for this issue to crop up, you have to have your site setup to use a particular domain, say www.example.com and have a redirect setup so that example.com redirects to www.example.com. Once the user experiences this issue, when you go into the developer tools in the browser, and investigate the cookies in place, you will notice that there are two cookies named “frontend”. However, these cookies have two different paths for them. One will be for example.com and the other will be for www.example.com.
##Recreating the issue
It seems difficult to recreate this issue up until the point that you actually do it, and then it becomes trivial. First, go to www.example.com and try to login to the site. Next, logout of the site. After that, visit example.com and try to login to the site. When you submit the login form, it will just refresh the login page without showing any error on the site.
##Resolving the Login Problems
This issue asserts itself when you utilize the Turpentine plugin from Nexcess to enable the proper caching configurations due to Magento’s reliance upon cookies being sent with every request. In the configuration of Turpentine, there is a special setting that allows Varnish to normalize the hostname that it requests from the server. Effectively what this will do for you is to take any request that hits Varnish, and translate it to whatever is specified, in this case, www.example.com. In most cases, this works great, and it fixes the login issues described in this article. However, it can create some other issues, specifically with <a href="http://thegeekspeaks.net/301-redirecting-in-varnish/">301 redirects</a>. Overall, once both fixes are in place, everything should work beautifully, and much faster than it did previously.</p>

  </div>

  
    
  

  <div id="disqus_thread"></div>
  <script>
    var disqus_config = function () {
      this.page.url = 'https://thegeekspeaks.net/2014/03/30/login-problems-with-magento-and-varnish.html';
      this.page.identifier = 'https://thegeekspeaks.net/2014/03/30/login-problems-with-magento-and-varnish.html';
    };

    (function() {
      var d = document, s = d.createElement('script');

      s.src = 'https://thegeekspeaks.disqus.com/embed.js';

      s.setAttribute('data-timestamp', +new Date());
      (d.head || d.body).appendChild(s);
    })();
  </script>
  <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>


  
</article>
</div>';

In the vast majority of cases, I prefer the Mustache templating approach as it is easy to read and maintain. However, if ultimate performance is required, and I am rendering much of the page in JavaScript, then I would utilize JavaScript Array operations instead.