DevExtreme and Modularity: Bundles, RequireJS, and WebPack

30 August 2016

Good news, the DevExtreme widgets are now available as separate modules in the v16.1 release! Modules provide benefits and are key components in Modularity:

Modular programming is a software design technique that emphasizes separating the functionality of a program into independent, interchangeable modules, such that each contains everything necessary to execute only one aspect of the desired functionality. Wikipedia

Separate DevExtreme widget modules can help you create a smaller bundle of necessary scripts that need to be loaded for your project.

However, there is a big warning with modules: You are now responsible for making sure to include the necessary DevExtreme modules that are referenced in your project. If you do not include the necessary modules then your project will have website errors.

I demonstrate and discuss these points in the webinar below.

Watch the webinar

Watch my recent webinar to learn how to use DevExtreme Modules with RequireJS and WebPack:

Links to helpful items

Here are several helpful links that were mentioned in the webinar:

DevExtreme links:
- DevExtreme examples on GitHub - These are the main DevExtreme module samples
- DevExtreme Basics: Add a wiget

RequireJS:
- RequireJS - Why
- RequireJS - Why AMD

WebPack:
- WebPack - Getting Started
- Webpack: When To Use And Why

Other links:
- Hanselman's blog post on NPM
- RequireJS optimization
- Bower packer manager

I'd love for you to watch the video, try the GitHub DevExtreme examples, and then give us your feedback. You can email me, drop me a comment below, or even tweet me.

Thanks!


Your Next Great .NET App Starts Here

Year after year, .NET developers such as yourself consistently vote DevExpress products #1.

Experience the DevExpress difference for yourself and download a free 30-day trial of all our products today: DevExpress.com/trial (free support is included during your evaluation).

1 comment(s)
yerzu

Hi!

Can I create many bundles using webpack and use these bundles on one site? For example:

1. load dxTextBox, dxButton, dxValidator, dxLoadIndicator and DevExpress.device

2. check that this is desktop or mobile

3. display login dialog

4. load async second bundle (for desktop) or third bundle (for mobile) with dxDataGrid, dxScheduler etc.?

5. if user type login and pass and click button to login then check that second bundle is loaded (show loadindicator)

6. open site with widgets from second bundle (without reload page)

Month ago I created two bundles but that was a problem with double refference of DevExpress (that means that I load first bundle and then second bundle then I click on button that open dxPopup twice!). Even I figured out how to fix rtlEnabled and other global DevExpress parameters to run test project. I tried any possible combinations (with or without some config lines) but without luck and I back to load dx.all.js.

Thanks!

7 September, 2016

Please login or register to post comments.