Alternative to kendo.all.min.js

[Carl]

When profiling load time on my UI for ASP.NET MVC web app, the slowest is kendo.all.min.js and is causing significant delay in start-up time for my web app.

However, most of the Telerik demos and docs seem to reference kendo.all.min.js rather than the individual scripts for the individual controls.

When I attempt to use only kendo.menu.min.js and kendo.grid.min.js, I get various errors including the following: window.kendo is undefined, D is undefined, etc, etc, etc.....

So what additional scripts are required for use with kendo.menu.min.js?

What additional scripts are required for use with kendo.grid.min.js?

Telerik should provide meaningful documentation and demos for use with individual controls and individual scripts that do NOT require use of kendo.all.min.js!!!!

That file kendo.all.min.js has grown way too large and slow on download and startup of a web app if placed at the top of a web page.  However every time I have attempted to place it at bottom of web page, it does not seem to work properly.

So what about some better demos and docs that provide alternatives to use of kendo.all.min.js and that pay attention to speed and load time at startup???

Telerik could also consider improving speed and response time of its own support web site as demonstration example???  I often find myself waiting and waiting just to login to the site and/or access my products page looking for updates on my products.  Why so slow?

[Ianko]

Hello Carl,

The same topic is discussed in the support ticket send to us through the ticketing system. 

For anyone else, interested on the same question: You can find a detailed answer here: http://docs.telerik.com/kendo-ui/intro/installation/what-you-need. Shortly, the easiest way to get only the scripts you need is to use the  Kendo UI Custom Download app.

Regards,
Ianko
Telerik by Progress

[Chris]

HI

Why the Kendo.Mvc.Examples use the kendo.all.min.js (2,968 KB)?? 
The performance of the Kendo.Mvc.Examples with kendo.all.min.js is VERY VERY VERY BAD right ?
(PageSpeed Insights - Kendo.Mvc.Examples /home/index got the score MOBILE 10, DESKTOP 44, YES, MOBILE 10 ONLY in Chrome)
(Chrome Audits [Mobile/Performance/Simulated Slow 4G] score 30 below)

  https://developers.google.com/speed/pagespeed/insights/

The cost of convenience are too big (Because the performance of the Chrome javascript parse/compile/evaluate are VERY SLOW for big .js files)

I think the Kendo.Mvc.Examples should tell the developer what is the right implemenation and how to do with kendo javascript library.

Example, the page(.cshtml) with combobox, treeview only : 

PageSpeed Insights MOBILE 50 DESKTOP 70
Chrome Audits [Mobile/Performance/Simulated Slow 4G] score 90 above

Styles for page, bootstrap/kendo/jquery/others

...
<link href="@Url.Content("~/Content/kendo/2017.2.621/kendo.common.min.css")" rel="stylesheet" type="text/css" />
...

Common scripts for widgets

<script src="@Url.Content("~/Scripts/kendo/2017.2.621/kendo.core.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2017.2.621/kendo.data.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2017.2.621/kendo.popup.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2017.2.621/kendo.list.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2017.2.621/kendo.fx.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2017.2.621/kendo.userevents.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2017.2.621/kendo.draganddrop.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2017.2.621/kendo.mobile.scroller.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2017.2.621/kendo.virtuallist.min.js")"></script>

Specific scripts for combobox 

<script src="@Url.Content("~/Scripts/kendo/2017.2.621/kendo.combobox.min.js")"></script>

Specific scripts for treeview

<script src="@Url.Content("~/Scripts/kendo/2017.2.621/kendo.treeview.draganddrop.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2017.2.621/kendo.treeview.min.js")"></script>

Other common scripts, ASP.NET MVC, Culture and others

<script src="@Url.Content("~/Scripts/kendo/2017.2.621/kendo.aspnetmvc.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2017.2.621/cultures/kendo.culture.zh.min.js?date=20170820-1000")"></script>
<script src="@Url.Content("~/Scripts/kendo/2017.2.621/cultures/kendo.culture.zh-TW.min.js?date=20170820-1000")"></script>
<script src="@Url.Content("~/Scripts/kendo/2017.2.621/messages/kendo.messages.zh-TW.min.js?date=20170820-1000")"></script>
<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>


Best regards

Chris

 

 

 

[Ianko]

Hi Chris,

Thank you for your feedback. We are aware the kendo.all.min.js is a heavy script that impacts on the page score. We have a logged an internal item to research and if technically possible optimize the kendo scripts so that they do not cause such a low pagespeed score. 

For the time being, you can safely use only the needed components' scripts to  the application or build a custom kendo script. 

Regards,
Ianko
Progress Telerik

[Chris]

HI

I have found a good choice too - RequireJS : 


RequireJS
https://docs.telerik.com/kendo-ui/third-party/using-kendo-with-requirejs

I will try it.

Best regards

Chris

 

 

[Chris]

HI

There have a problem about UI for ASP.NET MVC with requireJS : 

kendo is not defined.
(The kendo is the identifier of kendo.syncReady)

Because the requireJS is execute asynchronously.

View (.cshtml)
  
  @(Html.Kendo().DropDownList()
        .Name("LinksCombo")
        .Items(items =>
        {

          items.Add().Text("L1");

          items.Add().Text("L2");

          items.Add().Text("L3");

        })
  )

  <script>
  kendo.syncReady(function(){jQuery("#LinksCombo").kendoComboBox(...);})
  </script>

*Don't tell me use the Deferred() method.

Best regards

Chris

 

 

[Ianko]

Hi Chris,

I am afraid, in order to use RequireJS in MVC to load Kendo script you need to use the Deferred() method. With scripts loaded asynchronously, there is no other technical way to call the widget initialization when scripts are loaded.  Here you are a demo showing how to use the Deferred method with RequireJS: https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/general/kendorequirejs. 

Regards,
Ianko
Progress Telerik