Wijmo UI for the Web
AMD with RequireJs
| Wijmo User Guide > Concepts > AMD with RequireJs |
Since Wijmo now contains over 40 widgets, our Wijmo JS file has become very large. To improve performance, especially in projects that only use a couple of widgets, we have added support for AMD, or Asynchronous Module Definition.
AMD is a way of loading your project dependencies using Require.js and modules. Instead of adding a reference to the Wijmo JS file that contains all of the widgets as we recommended in the past, now you only reference a Wijmo theme, CSS, and RequireJs, and our AMD loader takes care of the rest for you, and minimizes the file size that downloads to the client.
The Widget Explorer that installs in the Samples folder with Wijmo is now ported to use AMD, so you can see all of the widgets using it there, and you can also check it out in the new Using AMD sample. The quick start topics in this user guide are gradually being ported over to using AMD.
Drop down to see all of the references required to use Wijmo with AMD and RequireJs
AMD assumes that the filename is the same as the module name, so if it is different, you have to change its path. To do so, add a script to configure RequireJs with Wijmo's baseUrl and paths. You also need to add code like this inside the script that contains your document ready function to tell the page which portion of Wijmo is required.
require(["wijmo.wijgrid"], function () { });
Here is the script and the extra code in the document ready function with a Wijmo Grid that you can add to the <head> section of your HTML file below all of the references.
 |
Caution: Remember the closing }); just inside the closing </script> tag of the document ready function. |
Drop down to see jQuery Script for a grid using AMD with RequireJs
Here is a live widget showing a Grid using AMD with RequireJs.