JavaScript template language shootoff (v783)

Revision 783 of this benchmark created by ghostCoder on

Description

A limited comparison of some popular JavaScript templating engines on a short template: 6 header tags, and 10 list items. Compared templating engines:

Preparation HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

 

 

 
<script src="http://yourjavascript.com/31213731129/dust.js"></script>
 
<script src="http://yourjavascript.com/97111314472/lodash-compat.js"></script>
<script src="http://qatrix.com/js/qatrix-1.1.min.js"></script>

<script>
var $ = jQuery.noConflict();
    window.sharedVariables = {data: {

        desc: "",
        endDate: "Not Specified",
        goalValue: "Increase Brand Awareness",
        owner: "PA - Deepa",
        startDate: "Not Specified" ,
        status: "Draft" ,
        tags: "voila, lets, add, some, tags, here"


    },   labels: {

        name:                    'Name',
        description:             'Description',
        goals:                   'Goals',
        setGoals:                'Select Goal',
        owner:                   'Owner',
        visibility:              'Visibility',
        status:                  'Status',
        startDate:               'Start Date',
        endDate:                 'End Date',
        tags:                    'Tags',
        title:                   'Campaigns',
        page:                    'Campaign',
        addNew:                  'Add new Campaign',
        basicInfo:               'Basic Information',
        helptext_basicInfo:      'Fill in basic information about the campaign',
        createNew:               'Create new',
        editItem:                'Edit',
        deleteItem:              'Delete',
        additionalProperties:    'Additional Properties',
        unsavedChangesHeader:    'Unsaved Changes',
        unsavedChangesWarning:   'There are unsaved changes on this page which will be lost if you proceed. Do you want to proceed? ',
        isGlobalSelectPlaceholder:  'Visible to all Clients',
        notGlobalSelectPlaceholder: 'Select Clients to share with',
        loadingSummary:             'Loading Campaign Summary',
        noData:                     'No data found for this campaign.',
        changesSaved:               'Changes were saved successfully',
        notSpecified:               'Not Specified',
        campaignStats:              'Campaign Statistics',
        publishCount:               'Publish Count',
        engagement:                 'Engagement',
        clicks:                     'Clicks',
        reach:                      'Reach',

        performanceView:    {
            title:  'Engagement over time',
            key:    'Engagement Summary'
        },
        performanceByChannelView:    {
            title:  'Engagement By Channel',
            key:    'Engagement by Channel Summary'
        },

        facets: {
            visibility: {
                local:  'Local',
                global: 'Global'
            },
            state:  {
                unarchived:   'Unarchived',
                archived:     'Archived'
            },
            status:  {
                approved:   'Approved',
                draft:      'Draft'
            }
        },

        tagsP:  'Enter Campaign Tags',
        tagsFormat:  'Type and press comma/enter',
        dateError1: 'You cannot specify an End Date without a Start Date.',
        dateError2: 'Start Date cannot be specified as a date after End Date.',

        view:   {
            n:          'View',
            tooltip:    'Click here to see the campaign details'
        },

        archive:   {
            n:          'Archive',
            u:          'Unarchive',
            tooltip:    'Archive a campaign to prevent it from being used in publishing'
        },
        views:  {
            grid: 'Switch to Grid View',
            list: 'Switch to List View'
        },
        btns:   {
            save:          'Save',
            saveChanges:   'Save Changes',
            cancel:        'Cancel',
            back:          'Back'
        },

        desc:   'Descending',
        asc:    'Ascending',
        deleted:                    'has been deleted.',
        delPerm:                    'will be deleted permanently?',
        del:    {
            n:  'Delete',
            ing:  'Deleting'
        }



    }}
  
  window.qatrixTemplate = Qatrix.$template(' <div class="c-section c-mason"> <div class="control-group " > <div class ="section-header"> <div>Campaign Details</div> <div class="dotline"></div> <div class="block-desc">{{data.desc}}</div> </div> <div class="section-body"> <div class=""> <div class="block-row clearfix"> <div class="body-row lfloat"> <label class="item-label lfloat"> {{labels.owner}}</label> <span class="item-value lfloat"> {{data.owner}}</span> </div> <div class="body-row lfloat"> <label class="item-label lfloat"> {{labels.status}}</label> <span class="item-value lfloat"> {{data.status}}</span> </div> </div> <div class="block-row clearfix"> <div class="body-row lfloat"> <label class="item-label lfloat"> {{labels.startDate}}</label> <span class="item-value lfloat"> {{data.startDate}}</span> </div> <div class="body-row lfloat"> <label class="item-label lfloat"> {{labels.endDate}}</label> <span class="item-value lfloat"> {{data.endDate}}</span> </div> </div> <div class="block-row clearfix"> <div class="body-row lfloat"> <label class="item-label lfloat"> {{labels.tags}}</label> <span class="item-value lfloat"> {{data.tags}}</span> </div> <div class="body-row lfloat"> <label class="item-label lfloat"> {{labels.goals}}</label> <span class="item-value lfloat"> {{data.goalValue}}</span> </div> </div> </div> </div> </div> </div> ');
  


  
 window.dustTemplate = '{#data} <div class="c-section c-mason"> <div class="control-group " > <div class ="section-header"> <div>Campaign Details</div> <div class="dotline"></div> <div class="block-desc">{desc}</div> </div> <div class="section-body"> <div class=""> <div class="block-row clearfix"> <div class="body-row lfloat"> {#labels} <label class="item-label lfloat"> {owner}</label> {/labels} <span class="item-value lfloat"> {owner}</span> </div> <div class="body-row lfloat"> {#labels} <label class="item-label lfloat"> {status}</label> {/labels} <span class="item-value lfloat"> {status}</span> </div> </div> <div class="block-row clearfix"> <div class="body-row lfloat"> {#labels} <label class="item-label lfloat"> {startDate}</label> {/labels} <span class="item-value lfloat"> {startDate}</span> </div> <div class="body-row lfloat"> {#labels} <label class="item-label lfloat"> {endDate}</label> {/labels} <span class="item-value lfloat"> {endDate}</span> </div> </div> <div class="block-row clearfix"> <div class="body-row lfloat"> {#labels} <label class="item-label lfloat"> {tags}</label> {/labels} <span class="item-value lfloat"> {tags}</span> </div> <div class="body-row lfloat"> {#labels} <label class="item-label lfloat"> {goals}</label> {/labels} <span class="item-value lfloat"> {goalValue}</span> </div> </div> </div> </div> </div> </div> {/data}'


var compiled = dust.compile(dustTemplate, "testTemplate");
dust.loadSource(compiled); 
  
window.lodashTemplate = _.template('<div class="c-section c-mason"> <div class="control-group " > <div class ="section-header"> <div>Campaign Details</div> <div class="dotline"></div> <div class="block-desc"><%=data.desc%></div> </div> <div class="section-body"> <div class=""> <div class="block-row clearfix"> <div class="body-row lfloat"> <label class="item-label lfloat"> <%=labels.owner%></label> <span class="item-value lfloat"> <%=data.owner%></span> </div> <div class="body-row lfloat"> <label class="item-label lfloat"> <%=labels.status%></label> <span class="item-value lfloat"> <%= data.status %></span> </div> </div> <div class="block-row clearfix"> <div class="body-row lfloat"> <label class="item-label lfloat"> <%=labels.startDate%></label> <span class="item-value lfloat"> <%= data.startDate %></span> </div> <div class="body-row lfloat"> <label class="item-label lfloat"> <%=labels.endDate%></label> <span class="item-value lfloat"> <%= data.endDate %></span> </div> </div> <div class="block-row clearfix"> <% if(data.tags && data.tags.length) { %> <div class="body-row lfloat"> <label class="item-label lfloat"> <%=labels.tags%></label> <span class="item-value lfloat"> <%= data.tags %></span> </div> <% } if(data.goalValue) { %> <div class="body-row lfloat"> <label class="item-label lfloat"> <%=labels.goals%></label> <span class="item-value lfloat"> <%= data.goalValue %></span> </div> <% } %> </div> </div> </div> </div> </div>')
  
    
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Qatrix
qatrixTemplate(sharedVariables);
ready
dust
dust.render("testTemplate",sharedVariables , function(err, out) {
                    
                });
ready
underscore
lodashTemplate(sharedVariables)
ready

Revisions

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