Practical experience creating Dojo widgets. Javascript code performance optimization

Good day, habrasociety.

I want to share with you some useful, in my opinion, information that will be of interest to those who are developing or planning to start developing their Dojo widgets. I want to immediately warn that in this article I will not talk about how to create my Dojo widget in stages (however, if the community is interested in this topic, I hope to set it out in a separate article). Instead, I want to focus on the main points and principles that should be known and taken into account by everyone who is developing Dojo widgets or has anything to do with this topic.

Dojo widgets

I think it will not be superfluous to say a few words about the concept of widgets.
The goal of Dojo widgets is to encapsulate visual Web components for reuse later. The Dojo widget is processed on the web browser side.
The structure of Dojo widgets is independent of the structure of DOM objects. Each Dojo widget has a unique widgetId and may not contain any, or contain one or more DOM elements, as well as Dojo child widgets.

A widget consists of several files. A JavaScript file is needed, while others are optional:

• The JavaScript code file (* .js) contains the widget logic in JavaScript. It manages visual elements using the JavaScript DOM Object API. (Dojo has many useful libraries to simplify standard functions.)
• An HTML template (* .html) provides a basic representation of the widget in HTML. If the template is very simple, you can represent it as a string in a code file.
• The CSS style file (* .css) contains the visual styles used by the HTML template and / or JavaScript code.
• Image files (* .gif, * .jpg, etc.) contain the images used by the widget.

Practical experience in creating widgets.

Software and declarative models for creating Dojo widgets

Dojo allows us to create widgets in two ways: declaratively and programmatically.
Programmatically, we can instantiate the widget using JavaScript code:

1.   var myWidget = new WidgetClass({
2.     //properties
3.     },”targetNode”);

* This source code was highlighted with Source Code Highlighter.

Widgets are declaratively created directly through the markup:

1.   

* This source code was highlighted with Source Code Highlighter.

Widgets declared declaratively will be detected and instantiated by the dojo parser immediately after the body.load event and before calling functions from dojo.addOnLoad . Therefore, in order not to block the flow of execution, it is best to defer the execution of resource-intensive tasks on addOnLoad wherever possible.

2. //Медленный вариант:
3. slowFunction(){doSlowStuff();}
4. //Оптимизированный вариант:
5. slowFunction(){dojo.addOnLoad(doSlowStuff());}

* This source code was highlighted with Source Code Highlighter.

Dojo developers are clearly inclined to describe the interface using special attributes of HTML tags, and not directly in the JS code. In the early versions of the library, it was the declarative model that was accessed, when in the HTML code the developer described the form using attributes, and after loading in the browser, the Dojo engine replaced the descriptions with rendered elements. Later, after a radical change in architecture and transition to branch 0.9, and then in 1.x, it turned out that the program model is more familiar and, most importantly, faster, especially in complex forms. Yes, and debugging seems simpler, and the possibilities are wider.

Widget startup

The final method for creating a widget is the startup () method. This method is especially useful in cases where we need to perform some actions after the widget has been fully initialized and rendered, but before it is displayed on the page. For example, if we need to add some element to the widget or a new tab to the tab container of the widget, then we can easily do this in the startup method.
The startup method will be automatically called by the parser in the case of the declarative declaration of the widget, however, if we create the widget programmatically, then we need to call this method manually.

Delayed execution of "heavy" functions.

As we all know, JavaScript multithreading is out of the question. All JavaScript code will be executed in the same thread. Therefore, the implementation of "heavy" (resource-intensive) tasks is better to put off until the last moment.
To do this, we can use timers in JavaScript, namely the setTimeout and setInterval functions, which allow you to organize delayed code execution after a specified period of time. In this case, the execution of the pending code is shifted in the execution queue of the JS engine, which makes it possible to complete the execution of more critical tasks.

1. dojo.addOnLoad(function(){
2.   setTimeout(function(){
3.     //отложенный код
4. }, 100);
5. });

* This source code was highlighted with Source Code Highlighter.

You can read more about using timers to optimize JavaScript code here .

dojo.query

Use dojo.query to access the DOM. Yes, dojo.query is much faster and has a more concise syntax than regular DOM APIs. For example, this code:

1.   // list every node with the class "progressIndicator":
2.   var list = [];
3.   var nodes = .getElementsByTagName("*");
4.   // iterate over every node in the document....SLOOOW
5.   for(var x = 0; x < nodes.length; x++){
6.     if(nodes[x].className == "progressIndicator"){
7.       list.push(nodes[x]); } }
8.   console.dir(list);

* This source code was highlighted with Source Code Highlighter.

using dojo.query looks like this:

1.   console.dir( dojo.query(".progressIndicator") );

* This source code was highlighted with Source Code Highlighter.

You can find more diverse examples of using dojo.query using various queries here .

dojo.behavior

Use dojo.behavior to add functionality. dojo.behavior is a very simple and easy mechanism for adding code to existing documents, which is based on dojo.query for selecting DOM elements and two simple API commands:
dojo.behavior.add (), which adds a “behavioral object” ( behavior object) to the document, and dojo.behavior.apply (), which applies the added “behavior”.
Use cases can be found here .

Event delegation

"Hanging" the same handlers on several different elements can be optimized using delegation. The meaning of this optimization of event processing is to "hang" one handler on one common parent element and use the event object received in the handler arguments to access the event initiator.

2.   
   1
3.   
   2
4.   
   3
5.   
   4
6.   
   5