CODEWITHSUNDEEP
javascriptdojo
Himanshu
Himanshu

Reputation: 1002

Using string templates instead of HTML files

When we create our own widgets in DOJO, we provide a template file to it. And the template file is loaded using dojo/text module. The typical structure of the widget goes like this:

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dojo/text!./templates/SomeWidget.html"
], function(declare, _WidgetBase, _TemplatedMixin, template) {

    return declare([_WidgetBase, _TemplatedMixin], {
        templateString: template
    });

});

The HTML template looks something like this:

<div class="someClass">
    <div data-dojo-attach-point="titleNode" data-dojo-attach-event="onclick: clickAction">
    Sample Content
    </div>
</div>

Would it create any difference in terms of performance if we provide templateString to the widget directly as string and not load it via dojo/text module? Like this:

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dojo/text!./templates/SomeWidget.html"
], function(declare, _WidgetBase, _TemplatedMixin, template) {

    return declare([_WidgetBase, _TemplatedMixin], {
        templateString: "<div class=\"someClass\"><div data-dojo-attach-point= \"titleNode\" data-dojo-attach-event= \"onclick: clickAction\">Sample Content</div></div>"
    });

});

Would this change cause the page to load faster than the previous approach?

Upvotes: 3

Views: 214

Answers (2)

Stefano
Stefano

Reputation: 302

I think it's a little bit faster with templateString declared to the widget directly as string and not load it via dojo/text module because it doesn't have to load another file.

Upvotes: 0

GibboK
GibboK

Reputation: 73908

When using module dojo/text to load an HTML file (your template) in your application, a network request is made in order to fetch your HTML file.

So dojo/text in developer mode add some network overhead. In this environment it is not really a problem.

But when you ship your application in production you should consider building it.

The dojo build process will automatically include all your HTML files as a string in the layer (a layer is a JS file which could be one output of your build process) you are exporting so all the requests to HTML files are eliminated so their network requests.

Upvotes: 1

Related Questions