3

Is there a way by which I can duplicate or clone dijit widgets?

Basically, idea is to improve page rendering performance by minimizing widget creation time.

We have a single page web application and we do not reload the entire page whenever the user performs any action.

The flow of events is as follows,

  1. The main page is loaded by the browser. It contains a dijit ContentPane which acts as a master container and displays the entire page using various other dijit widgets like textboxes, tabs, datefield, Enhanced grid etc.

  2. The user performs an action (e.g. click on a dijit button)

  3. The application sends an ajax call to server which processes the button click event and generates UI of the next page.

  4. Browser receives successful response from ajax call and calls refresh method of dijit ContentPane. Which triggers destruction of existing widgets and new set of widgets are created and placed at appropriate position. (instead of refreshing the entire page)

  5. The user again performs some action and again the refresh method is called which triggers destruction of existing widgets and new set of widgets are created and placed at appropriate position.

Because of such architecture the browser has to destroy existing widgets and recreate them again and again. Which results in slow performance.

The idea is to have a set of widgets always readily available on the browser clone them and place at appropriate position and update them instead of recreating each time.

Brij
  • 173
  • 1
  • 12
  • Why exactly do you want this? I've pages that have over 100 widgets and it's still rendering within a sec. – GuyT Dec 23 '14 at 14:14
  • Hey GuyT, I have updated the question with more details – Brij Dec 24 '14 at 13:45
  • 1
    I've also developed a SPA with Dojo and performance isn't a issue here. We are not refreshing the contentpane, but we use a tabcontainer. When we close a 'screen' the tab will be destroyed with all the widgets inside this tab(be aware of memory leaks: remove all connections etc.). How long does it take before the screen is rendered? – GuyT Dec 28 '14 at 13:48
  • It takes around 5-6 seconds before all the widgets are rendered and available for use. What I have noticed is that there are too many DOM node manipulation events (DOMSubtreeModified) that take place when the contentpane is loaded and widgets are created. – Brij Dec 30 '14 at 12:52
  • Could you create a fiddle were I can have a look? – GuyT Dec 30 '14 at 13:58
  • Sorry GuyT fiddle is not possible because the application is too complicated. – Brij Jan 05 '15 at 16:48

1 Answers1

2

Yes this is possible with something called _AttachMixin.

Basically there is no getting around the fact that your widgets would need to attach event listeners to the HTML Document. What can be cut out though is the time in the Dijit Widget's lifecycle to generate the DOM. As we well know, simple Dijit widgets like a dijit/form/Button has 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 is an example using Node.JS as a backend. http://jamesthom.as/blog/2013/01/15/server-side-dijit

This is a tough problem and this concept isn't explained very thoroughly. If you have a backend that is not Node.JS you have to manually make the widget string and pass it as a response to your AJAX and an follow the example from the 1st link (Ref Doc)

We have had lots of widgets of our app render nicely within the client side. A far less complicated approach would be to simply show / hide (instead of render and destroy) widgets as and when they are needed. I assume that you app's access policy would focus on data and not which person has access to which widget.

Gaurav Ramanan
  • 3,115
  • 2
  • 17
  • 28