More Fun Creating Dojo widgets and MVC

Here is another article in my "Fun with Dojo" series.

Dojo traditionally has been considered slow.  One reason is that Dojo loads alot of modules before it instantiates the page.  Dojo with AMD helps reduce the number of modules when it first loads but not the number of modules.  This is great.  However, one thing that I really dislike are Dojo Dijit widgets.  They are heavy, slow, and require a lot of modules to be loaded.

We like the Bootstrap widgets because they are lightweight. So instead of using Dijits that are built into XPages we created our own lightweight Dojo Bootstrap widgets that utilized the most minimal amount of required Dijit modules and dependencies.

One of the things that we had to figured out was what bare bone modules that we needed beside dijit._Widget in order to create our own widgets and include them in the loading process.  When we were using Dojo 1.53, we created a custom loader with all the required modules contained in a single file.  Rather than including _TemplateMixin and _WidgetsInTemplateMixIn and other mixin modules, we did everything using our own code within the buildRendering lifecycle.  This help reduce the additional modules that was required.

<div id="happy" class="user">
 <button class="icon"><i class="fa fa-user fa-lg"></i></button>
</div>

However, this approach eliminated a very power module.  In the example above, you can get a handle to the button node of the widget by using:

var btnNode=dojo.query('button',this.domNode)[0];

or

var btnNode=dojo.query('.icon',this.domNode)[0];

For users not familar with Dojo "this.domNode" is a handle to the widget, "this" being the widget itself.  Please note that "this.domNode" does not exist until it goes through the buildRendering lifecycle.

This is how we were getting a handle since we did not need all the stuff that was in the module dijit/_TemplatedMixin since we were calling buildRendering directly.  This worked fine but this approach added more code then we wanted for the widget.

So we took another look at how we could utilize what was included with Dojo, but at the same time not load stuff that we did not need. Within _TemplatedMixin, there is a call to another core module, dijit/_AttachMixin.  This module creates attach points and events to get a handle to different parts of the widget DOM and events. So in our previous example, rather than using dojo.query all you have to do is add the attribute "data-dojo-attach-point" to the DOM fragment and run
this._attachTemplateNodes(this.domNode) during the buildRendering lifecycle.

<div id="happy" class="user">
 <button class="icon" data-dojo-attach-point="btnNode">
  <i class="fa fa-user fa-lg" ></i>
 </button>
</div>

So your widget code will be:

define("mywidgets/button",[
 "dojo/_base/declare",
 "dijit/_WidgetBase",
 "dijit/_AttachMixin",
 "dojo/dom-class"
],function(declare,_WidgetBase,_AttachMixin,domClass){
 return declare([_WidgetBase,_AttachMixin]),{
  buildRendering:function(){
   this.domNode=this.srcNodeRef;
   this._attachTemplateNodes(this.domNode);
  },
  postCreate:function(){
   this.inherited(arguments);
   domClass.add(this.btnNode,'blue');
  }
 });
});

So now we have a handle to the button node using "this.btnNode". Simple and easy. A view/controller in Dojo can just be a Dojo widget with Dojo widgets inside. Therefore you can extend the same process if you are using Dojo for your MVC framework.  This will be the topic of another future blog.

"this.srcNodeRef " is the reference to the DOM fragment on your HTML page that represents the widget.