Duplicate the digital widget instead of recreating it
Is there a way that I can duplicate or clone dijit widgets?
Basically, the idea is to improve the rendering performance of the pages by minimizing the time it takes to create the widget.
We have a single page web application and we don't reload the whole page whenever the user takes any action.
The flow of events looks like this:
-
The main page is loaded by the browser. It contains a dijit content pane that acts as the main container and displays the entire page using various other dijit widgets like text boxes, tabs, date field, extended grid, etc.
-
The user takes an action (for example, clicks the dijit button)
-
The app sends an ajax call to the server, which handles the button click event and generates the UI for the next page.
-
The browser receives a successful response from the ajax call and calls the dijit ContentPane's update method. What causes the destruction of existing widgets and a new set of widgets are created and placed in the appropriate position. (instead of refreshing the whole page)
-
The user again performs some action and the update method is called again, which causes the destruction of existing widgets and a new set of widgets created and placed in the appropriate position.
Because of this architecture, the browser has to destroy existing widgets and recreate them over and over. This results in poor performance.
The idea is to have a set of widgets always readily available in the browser, clone them and place them in the appropriate position, and update them instead of recreating them every time.
source to share
Yes, it is possible with something called _AttachMixin
.
Basically, there is no way around the fact that your widgets will need to attach event listeners to the HTML document. What can be cut is the time in the Dijit Widget lifecycle to create the DOM. As we well know, simple Dijit widgets like dijit / form / Button have a div inside a div inside a div, etc.
This is explained in detail here http://dojotoolkit.org/reference-guide/1.9/dijit/_AttachMixin.html
Here's an example using Node.JS as a backend. http://jamesthom.as/blog/2013/01/15/server-side-dijit
This is a complex issue and the concept is not explained very thoroughly. If you have a backend that is not Node.JS you have to manually create the widget string and pass it as a response to your AJAX and follow the example from the 1st link (Ref Doc)
We had a lot of widgets in our application that look client-side. A much less complex approach would be to simply show / hide (instead of rendering and destroying) the widgets as needed. I am assuming that the application access policy will focus on the data, not who has access to the widget.
source to share