Build Your Own DevExtreme

I want to tell you about a set of JavaScript UI widgets available on GitHub that my team and I work on daily. Specifically, my goal is to help you:

• Learn about DevExtreme on GitHub.
• Get started with the DevExtreme repo (fork, clone, build, etc.)

First, some background. DevExtreme is a UI component suite for front-end development and it's been around for years as a commercial product. Recently, we moved the library to GitHub and it's now available to use for free (if you've got a non-commercial project).

In this article, you'll learn how to modify the sources and make custom builds of DevExtreme! I'll focus on the GitHub repository, source code structure, techniques, tools, and practices. 

Let's get started. The commands below are for Ubuntu but you can use any operating system. Fork the github.com/DevExpress/DevExtreme public repo, then create a clone of your fork:

$ git clone https://github.com/<YOUR GITHUB ACCOUNT>/DevExtreme
$ cd DevExtreme/

To build DevExtreme and run tests, install the following SDKs:
- Node (LTS version is recommended).
- A recent version of .NET Core SDK (some parts of the tooling are written in .NET).
- Docker (Community Edition, not required, but super useful for unit testing).

The following command helps to check that everything is installed properly:

$ node -v && dotnet --version && which docker

To restore packages and also initialize the build and test environment, execute:

$ npm i
$ npm run build

The first time you run these commands, it may take a few extra minutes to complete the package restore. Subsequent runs are faster.

Working With the Source Code

Let's take a short tour of the DevExtreme source code.

The most important directory is 'js', where the most of the library code resides. JavaScript codebase is well-structured and split into hundreds of separate modules. The use of modules together with linters makes working with the code a breeze in an editor like Visual Studio Code:

The lint-staged package integrates with Git and prevents committing JS files when there are errors:

The 'icons,' 'images,' and 'styles' directories contain sources for DevExtreme themes; LESS preprocessor is used for styles. In the 'build' directory, the build ecosystem is located, in particular, Gulp tasks which have been run as part of the npm run build command. By the way, build results are stored in the 'artifacts' directory (which isn't under source control). The 'playground' directory provides simple boilerplate HTML pages for experiments.

The second most important location is 'testing,' to which the next section is dedicated.

Unit Tests

DevExtreme uses a custom unit testing framework based on QUnit. To launch the testing GUI, run the testing/launch script (testing/launch.cmd on Windows).

Within the test code, SystemJS module loader is used, so there's no need to invoke the build command after changes.

Docker and Drone CLI

The above testing web app is meant to be used during development and bug fixing; it's possible to run and debug individual test cases, suites, and categories. I recommend using Docker images because they let you run all your tests without locking up your browser. We've made specialized 'devextreme-­build' Docker images that are available on the Docker Hub. To run them, execute:

$ sudo docker run --rm -ti -e TARGET=test -v REPO_PATH:/devextreme \
devexpress/devextreme-build:TAG ./docker-ci.sh

REPO_PATH should be replaced with the absolute path to the repository. TAG should match the current release branch (e.g. 17_1).

For example, in my case on Ubuntu, the command is:

$ sudo docker run --rm -ti -e TARGET=test -v ~/DevExtreme:/devextreme \
devexpress/devextreme-build:17_1 ./docker-ci.sh

I'm a big fan of Docker, and the advantage of running tests this way is that the environment exactly matches the one used in Travis CI tasks. In case you are preparing a pull request to the DevExtreme repo, this technique guarantees that the GitHub automatic checks will pass if they pass on your machine.

Instead of typing the long docker run command, you can use Drone CLI as well:

$ sudo drone exec --matrix TARGET=test

Custom Release Builds

Making release artifacts (that is, with minification and cleanup) is as easy as invoking the following:

$ npm run build-dist

After it's finished, in the 'artifacts' directory you will find distribution files. The same set of files which is available via the official DevExtreme packages.

You can check out sources from GitHub and make builds with the latest bug fixes and features without waiting for official releases from DevExpress. You can also suggest changes to the product by sending a pull request. This is possible with the new Non­-Commercial, Non-­Competitive license which explicitly allows making changes and distributing modified versions of DevExtreme provided that other EULA terms are satisfied.

I hope you're excited about DevExtreme as much as we love to work on it. We plan to make preview release builds that will allow you try new widgets and features. To get updates on our progress, you are welcome to subscribe to the official DevExtreme GitHub repo by clicking the 'Star' / 'Watch' buttons.

Thank you.