Remove jQuery and browser DOM dependencies and support Server Side Rendering (SSR)

[ybarbaria]

I want to know if you have planned to transform your jquery component in angular2 component ?
Your response will determine the purchase or of your library.

[dxbykov]

Hi,
 
We don't have plans to convert our jQuery-based components into Angular 2 based components. As you know, JS frameworks are born and die and it doesn't seem to be a wise strategy to stick to a single framework, because one day we'll have to convert our components to some other kind. On the other hand, we understand that jQuery dependency in our components becomes a drawback, not an advantage. So, I would say that we have plans to remove this obsolete dependency. It will allow us to integrate with other frameworks more smoothly and natively produce fast components. At this point, I'd like to ask you what is the main drawback of having Angular 2 wrappers over jQuery components for you?

[ybarbaria]

Hi,

Thx for your response.

Because I don't want jquery make DOM manipulation, there is Angular way.
I want use component made in typescript and made with angular.
At the moment I'm testing Wijmo, IgniteUI and your library . Wijmo have made theirs components in angular2 and the performances are better.
For example wijmo's grid is faster than your grid, faster during loading, faster during sorting ...

That the reason I think angular2 component are more effective than jquery component inside angular2 app.

[jFensch]

Breaking the jQuery DOM dependency also supports running the Angular 2 outside of the browser (service workers, server rendering, etc.)

Direct DOM manipulation is inherently slow and we've seen better rendering techniques in React, Angular 2, and other modern tools.

[dxbykov]

@ybarbaria Your point is clear and we completely share it. I should say that performance is one of the top priority aspects for us. Removing jQuery from the core of our library will help us improve it.

@jFensch I wonder if server-side rendering is what you would definitely use right now if we had it or it's just what you want to have in the future. Or, better performance is the main reason for you as well.

[jFensch]

Allowing pre-rendering on the server is a major performance win. This is easily enabled now not just for Node.js servers, but ASP.NET Core too.

Steve Sanderson from Microsoft does a great job explaining:

https://vimeo.com/157273325

[dxbykov]

@jFensch I got you. In my question I just referenced another aspect of performance.

And thank you guys for sharing your thoughts with us.

[sidorov-alex]

Hi, do you have any plans to implement this? I think the server side rendering is very important due to performance benefits.

[consigliory]

any plans to make server side rendering?

[artem-kurchenko]

Yes, this task is on our top priority list and we are actively working in this direction. Though, it is worth mentioning that the process is not easy and implementation requires considerable time, because this functionality affects all the framework logic.
 
We'll make an update here once we have any news.

[thesmartwon]

Any updates on the progress of this? It would be nice to be able to use DevExtreme with the full power of Angular.

[Mehul]

@thesmartwon As Artem mentioned, it's a big task and the team is actively working on it. As soon as there is any related updates, this ticket will be updated as well. I know you're looking forward to it, as we are, but beyond changing the code, we want to make sure and properly test, etc. Please stay tuned. :)

[rhythmnewt]

Just want to add a +1 to this change request. Definitely looking forward to a native angular implementation of these JS controls.

[wufuhai]

Good to know it's under development already. Looking forward to it.

[wellington1993]

+1 Waiting for server side rendering too!

[albrookesplowman]

+1 really waiting for this.... Any news? I am considering other UI component suites at the moment, such as Wijmo, but as we have used DevExpress previously I would be reluctant to migrate but we might have to.

[ybarbaria]

@albrookesplowman Don't use wijmo, since 1 year we buy the wijmo components for angular2. It's cheat library... Their grid has bad performance when u load lot of data. Their charts is not easy to use when u have to do something not usual (like create steppedLine).
In general their dom is poorly constructed and use lot of cpu. For example on mousemouve inside their grid, the cpu of my chrome tab, improve to 20-25%. Now we decided to create our component instead of wijmo, and use chartjs for the charts. it's easy to create our component and more maintenable.

[albrookesplowman]

@ybarbaria thanks for the tips. I might stick with devexpress if they can do the server side rendering and remove the link to jQuery

[ybarbaria]

@albrookesplowman I asked more than a year ago for the removal of JQuery, I think they will never do that :(

[albrookesplowman]

@ybarbaria - time to keep waiting then... :( do you know of any other pure Angular UI component suites?

[ybarbaria]

@albrookesplowman you can try PrimeNG : https://www.primefaces.org/primeng/#/ and/or https://material.angular.io/
We were inspired by this open source library. You can find their code into github.

PrimeNg also sell some commercial template like this one : https://www.primefaces.org/ultima/

[GoshaFighten]

Stay tuned to version 17.2. We will have something in this regard in this version

[rhythmnewt]

@GoshaFighten looks like you're already targeting Angular 5-beta. Given that 5-RC0 is already out, are you expecting to release 17.2 shortly after 5-final?

[GoshaFighten]

We will release version 17.2 along with the release of version 17.2 of DevExtreme. It will be at the end of this year. When Angular 5 is released, I believe version 17.1 will support it.

[albrookesplowman]

I have seen that v17.2 beta is available for download this includes an option to remove the dependency on jQuery.

Does this mean that DevExtreme will now support Server Side Rendering?

[GoshaFighten]

@albrookesplowman . Not yet. Server-side rendering is not supported. But, we are working to support it.

[albrookesplowman]

@GoshaFighten - that would put the icing on the DevExtreme cake!!

[albrookesplowman]

hi, do you have an ETA for server side rendering?

[dxbykov]

Hi,

We expect to publish the release that supports this feature by Summer. Hopefully, you'll be able to start testing it in our pre-releases earlier. Please bear with us.

[Shiko1st]

Ok, what year?
Is there any dates?

[GoshaFighten]

@Shiko1st
Jquery is not our dependency anymore from version 17.2. As for Server-Side Rendering, as @dxbykov stated, it's likely we will have something to show here by summer, i.e., in version 18.1.

[dxbykov]

Finally, we are glad to announce the pre-release with Angular Universal support. It's available on npm for early testing. Note, it requires Angular 5 or higher.

New to Angular Universal? Follow the official guide.

To install the pre-release:

npm i --save [email protected] [email protected]

For the best user experience, you need to enable the Transfer State feature. This prevents double HTTP requests and unnecessary components re-rendering.

Import the ServerTransferStateModule module into your server module (usually in app.server.module.ts) as follows:

import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';

@NgModule({
  imports: [
    ServerModule,
    ServerTransferStateModule,
    AppModule,

   ...
  ],
  bootstrap: [AppComponent],
})

We have updated our GolfClub demo to use server-side rendering.

You can also check our technical demo where almost every DevExtreme component is represented.

Current limitations: Some component renderings depend on their container size. Server doesn’t have the window object and its size. So, such components can’t be properly rendered without an extra update on the client. To avoid flickering, these components are partially rendered on the server-side and then updated on the client. We are considering improving this in further updates by replacing some JS rendering logic with CSS rules.

We are looking forward to your feedback here or in separate issues.

[evgeniynet]

Thanks a lot!

good news!

[alperenbelgic]

Hi everyone,
I did read everything in this thread and sorry if there was an answer to my question that I don't understand .
I am wondering if I can generate a native mobile app as well as the web application with a source code including devextreme angular components. I can understand that you are putting all web extensions on top of your base web framework. Are you planning to remove all web/html dependencies from the devextreme-angular so that it can also be built as an angular native mobile app?
Thank you very much.

[dxbykov]

Hi @alperenbelgic ,

There are three major approaches to developing mobile applications with JavaScript:

1. Using WebView (the embedded web browser) to render regular web pages built with HTML/CSS.
2. Rendering HTML/CSS markup into native mobile platform UI primitives (or vice versa).
3. Using native UI components that are controlled by JavaScript.

The first way is what is now supported by DevExtreme and used by Ionic so far.

The second way is supposed to use a limited subset of HTML/CSS. I don't know any popular Angular-related libraries similar to react-native-web or reactxp. Even if there are any, it'll require a lot of efforts to adapt DevExtreme Angular components to this approach.

The third way is supposed to have native components built separately for each mobile platform (iOS, Android, etc.). That's not the DevExtreme way.

Hope this helps.

[hakimio]

Is there any reason to keep this issue open since both jQuery dependency has been removed and SSR has been introduced?

[dxbykov]

Thanks to @hakimio for the reminder and to everybody who participated in this discussion or gave us feedback by any other means and motivated the team to go the long way :). The feature is available in the v18.1.3 release. I'm closing this thread. In the case of bugs or questions, feel free to create new GitHub issues or tickets in our Support Center.