ASP.NET 5 CORE integration with devextreme-angular

[varghesep]

I spent few hours to integrate devextreme-angular (Angular 2 version of devextreme) with my ASP.NET 5 CORE app.

This is my set up:

• I use devextreme-angular 16.2.2-beta.1
• I don't use webpack or browserify etc...
• I use GULP for copying the raw JS and MAP files to the wwwroot folder
• I don't do bundling of my full app in the development environment. But I do for the production.
• I use SystemJS to load the modules

Problem 1: When I install devextreme-angular, the npm installs two packages devextreme and devextreme-angular. I suggest that there has to be only one package.

Problem 2: There is no single distribution file for JS to copy. I have to copy devextreme//*.{js,css}, devextreme-angular//*.{js,css} to the wwwroot/lib folder.

Problem 3: I don't understand why devextreme-angular has a dependency on JQuery.

Is devextreme-angular completely re-written with the angular2 DOM manipulation techniques, or is it an adaptor to the devextreme components which were originally written with JQuery?

If JQuery is being used to modify the DOM and not angular2 techniques, there will be performance problems because of many layers of the code. The main purpose of frameworks like Angular2 or React is to move away from using JQuery. The power of devextreme-angular should be in providing faster business angular2 components that can work with simple binding.

[dxbykov]

Hi,

Problem 1: When I install devextreme-angular, the npm installs two packages devextreme and devextreme-angular. I suggest that there has to be only one package.

The devextreme-angular package depends on the devextreme package because the first one uses widgets from the second. So, DevExterme Angular 2 components are wrappers over the DevExtreme UI Widgets.

Problem 2: There is no single distribution file for JS to copy. I have to copy devextreme//.{js,css}, devextreme-angular//.{js,css} to the wwwroot/lib folder.

In the nodejs environment it's not a problem to configure SystemJS so it obtains modules right from the node_modules folder in development mode. Am I right that the reason you want to have a bundle is to have an easier way to copy it to the wwwroot folder, since it doesn't contain the node_modules folder? Or are there any other reasons you haven't mentioned?

Problem 3: I don't understand why devextreme-angular has a dependency on JQuery.

Is devextreme-angular completely re-written with the angular2 DOM manipulation techniques, or is it an adaptor to the devextreme components which were originally written with JQuery?

As I mentioned above, devextreme-angular uses devextreme that is currently based on jQuery. This aspect has been discussed here. We have plans to remove jQuery dependency in the future and provide more native Angular 2 components. For the time being, we haven't noticed any major performance degradation in comparison with jQuery DevExtreme widgets. Since DevExtreme Angular 2 components can use native Angular 2 templates, they can work even faster than the original DevExtreme widgets in some cases. If you notice any performance issues, please, let us know.

[varghesep]

Problem 2:

There is no better way than using a GULP task to copy the JS library files to the wwwroot folder. Having just the minimum number of files is encouraged rather than copying hundreds of files.

Problem 3:

The angular library is huge compared the previous version. With the DE widgets and JQuery libraries, the initial loading time would be high. I don't have a benchmark to substantiate, but my guess is that areas like the binding where you see may see delay.

[dxbykov]

You are right. The initial loading time might be an issue. Fortunately, web-browsers cache the loaded scripts and subsequent loads are much faster. There are several techniques that help to minimize the production bundle size and first loading time. First, you can reference only required modules, so only that modules will be included into the bundle.

If you need only a button widget, you can use the import { DxButtonModule } from 'devextreme-angular/ui/button' statement instead of the import { DevExtremeModule } from 'devextreme-angular' one.

You can also use Webpack 2 with the tree shaking feature. It automatically detects module exports that are not used and removes it from the final bundle even if you use the import { DxButtonModule } from 'devextreme-angular' statement. You can refer to this sample.