DevExtreme jQuery/JS - Link Modules

DevExtreme comes in pre-assembled bundles. dx.viz.js includes Charts, Gauges, Funnel, VectorMap, and other data visualization widgets. dx.web.js includes Grids, Scheduler, Form, and various editors. dx.viz-web.js and dx.all.js compile the previous two bundles. Bundles that include a particular widget are listed on the widget's overview page in the API reference.

Alternatively, you can use DevExtreme modules to import only the functionality you require. Unlike the bundles, modules are compact and can be loaded on demand. This optimizes memory consumption and speeds up your application.

You can create a smaller bundle from modules using Webpack or load modules using jspm or RequireJS.

Use Webpack

First, ensure the Webpack is installed globally. If not, execute the following command.

  • npm install webpack -g

Install the DevExtreme package to the directory where you wish to store the files.

  • npm install devextreme

To link up the modules to your application using Webpack, begin by defining the configuration object.

JavaScript
  • var path = require('path');
  •  
  • module.exports = {
  • entry: './index.js',
  • output: {
  • filename: 'bundle.js'
  • }
  • };

Link the bundle script file to your HTML page.

HTML
  • <script type="text/javascript" src="bundle.js" charset="utf-8"></script>

Add themes to your application.

HTML
  • <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" />
  • <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.css" />

Create an entry script of your application. For example, it can specify required modules.

JavaScript
  • var $ = require('jquery');
  • var dialog = require('devextreme/ui/button');
  • ...

Then, create the bundle.

  • webpack
NOTE
Check the supported versions of 3rd-party libraries. For details, see Integration with 3rd-Party Libraries and Frameworks.

The example below demonstrates how to create an application with a single button using modules, and how to configure Webpack to pick up and bundle all the required scripts to your application.

You can download the example from GitHub. To use it, follow the instructions on GitHub.

webpack.config.js

JavaScript
  • var path = require('path');
  •  
  • module.exports = {
  • entry: './index.js',
  • output: {
  • filename: 'bundle.js'
  • }
  • };

index.js

JavaScript
  • var $ = require('jquery');
  • var dialog = require('devextreme/ui/dialog');
  •  
  • require('devextreme/ui/button');
  •  
  • $("#myButton").dxButton({
  • text: "Say 'Hello world'",
  • onClick: function() {
  • dialog.alert('Hello world!', '', false);
  • }
  • });

index.html

HTML
  • <!DOCTYPE html>
  • <html>
  •  
  • <head>
  • <title>DevExtreme with Webpack and Knockout example</title>
  • <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" />
  • <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.css" />
  • </head>
  •  
  • <body>
  • <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
  • <div id="myButton"></div>
  • </div>
  • <!-- Include the bundle script -->
  • <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
  • </body>
  •  
  • </html>

Use jspm

First, install jspm in your application folder. For detailed information on installing, see the jspm documentation.

  • npm install jspm
NOTE
Install the DevExtreme package with the help of jspm.
  • jspm install npm:devextreme

To link up the modules to your application using jspm, first add links to the library and then the configuration file to your application.

HTML
  • <script src="jspm_packages/system.js"></script>
  • <script src="config.js"></script>

Create an entry script of your application. For example, it can specify the required modules.

JavaScript
  • import $ from 'jquery';
  • import 'devextreme/ui/button';
  • ...

Then, in the HTML page, import your application's main entry point.

HTML
  • <script>
  • System.import('./index.js');
  • </script>
NOTE
Check the supported versions of 3rd-party libraries. For details, see Integration with 3rd-Party Libraries and Frameworks.

The example below demonstrates how to create an application with a single button using the modules from a local directory.

You can download the example from GitHub. To use it, follow the instructions on GitHub.

index.js

JavaScript
  • import 'devextreme/dist/css/dx.common.css!';
  • import 'devextreme/dist/css/dx.light.css!';
  •  
  • import $ from 'jquery';
  • import 'devextreme/ui/button';
  • import dialog from 'devextreme/ui/dialog';
  •  
  • $("#myButton").dxButton({
  • text: "Say 'Hello world'",
  • onClick: function() {
  • dialog.alert('Hello world!', '', false);
  • }
  • });

index.html

HTML
  • <!DOCTYPE html>
  • <html>
  • <head>
  • <title>DevExtreme with Jspm and jQuery example</title>
  • <!--Include SystemJS loader and the config file-->
  • <script src="jspm_packages/system.js"></script>
  • <script src="config.js"></script>
  • </head>
  • <body>
  • <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
  • <div id="myButton"></div>
  • </div>
  • <!--Import of the application main entry point-->
  • <script>
  • System.import('./index.js');
  • </script>
  • </body>
  • </html>

Use RequireJS

First, install RequireJS to your application folder.

  • npm install requirejs

Then, install the DevExtreme package.

  • npm install devextreme

DevExtreme modules are defined using the CommonJS format. RequireJS does not support this format. Thus, convert DevExtreme modules to the AMD format before using them with RequireJS. Use the RequireJS conversion tool to convert modules. Follow these steps to convert the modules.

  • Add the devextreme package to the 'node_modules/devextreme' directory

    • npm i devextreme
  • Add global 'r_js' command

    • npm i r.js -g
  • Convert the devextreme package and save it to the 'devextreme_amd' directory

    • r_js -convert node_modules/devextreme devextreme_amd

To link up the modules to your application using RequireJS, begin by adding themes to your application.

HTML
  • <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" />
  • <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.css" />

Then, link RequireJS and define the configuration object.

HTML
  • <script src="node_modules/requirejs/require.js"></script>
NOTE
Check the supported versions of 3rd-party libraries. For details, see Integration with 3rd-Party Libraries and Frameworks.

The example below demonstrates how to create an application with a single button using the modules from a local directory.

You can download the example from GitHub. To use it, follow the instructions on GitHub.

HTML
  • <!DOCTYPE html>
  • <html>
  •  
  • <head>
  • <title>DevExtreme with RequireJS and jQuery example</title>
  •  
  • <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.common.css" />
  • <link rel="stylesheet" type="text/css" href="node_modules/devextreme/dist/css/dx.light.css" />
  • <!-- Include RequireJS -->
  • <script src="node_modules/requirejs/require.js"></script>
  • </head>
  •  
  • <body>
  • <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
  • <div id="myButton"></div>
  • </div>
  •  
  • <script>
  • require.config({
  • paths: {
  • "jquery": "node_modules/jquery/dist/jquery",
  • // The path where the devExtreme modules are located.
  • "devextreme": "node_modules/devextreme"
  • }
  • });
  • // Loads the required scripts.
  • require(["jquery", "devextreme/ui/dialog", "devextreme/ui/button"], function($, dialog) {
  • $("#myButton").dxButton({
  • text: "Say 'Hello world'",
  • onClick: function() {
  • dialog.alert('Hello world!', '', false);
  • }
  • });
  • });
  • </script>
  • </body>
  • </html>
NOTE
We recommend you use other approaches (for example, webpack or jspm) for better productivity.