Kendo UI Best practices: Creating a large SPA & Caching
The Kendo UI framework is a popular HTML5, jQuery-based tool for building modern web apps, and Burke and Cody from the Kendo UI team recently sat down with us during the Codementor Office Hours to answer some of their questions concerning Kendo UI.
The text below is a summary done by the Codementor team and may vary from the original video and if you see any issues, please let us know!
What are the best practices for creating a really large SPA?
First of all, Kendo UI does have its own SPA framework, and we do have an entire article series and demos to help you get started on SPA. The source code for all the demos are in one single file, and it should help you understand how single-page applications work.
The only drawback is that there are no best practices on how you should structure your app. However, if you use visual studio, you can look at this SPA template. It will use require.js and put the views in the appropriate folders, and it will also give you an opinionated structure for your applications.
If you’re not using visual studio, you can look at the Yeoman Kendo UI generator, which will do the same thing for you from the CLI if you’re using Yeomen.
How you should build your applications depends on how your brain works and the type of application you’re trying to do. If you have a hard time figuring out how the parts go together, piggyback on a lot of the backbone material on how to put an application together, since you can follow the same strategy used for backbone.
Should One use HTTP Network Caching or Should the Cache be Stored in an HTML5 local storage?
Step one: If you’re rendering a page, posting to a server and coming back, then you should include any data that you’re coming back with from the server if you can. It may not always be possible, but if you’re using something like MVC, PHP, or some server-side framework that’s allowing you to template out your pages, anything you can get in the page that you don’t have to go back and get from the server on the second trip, it’s just one less request you’ll have to make.
Step two: Kendo UI naturally has Angular integrations, and you probably don’t want to call the datasource again every time the page changes. If you have separate pages in Angular and each one has a KendoUI grid on it, then there should be an attribute called K-refresh. You can set it to false, and it will tell Kendo UI not to get new data when you move around.
Furthermore, there isn’t any official local storage support inside the Kendo UI data source, so you can always write your own local storage just to key value store. Another place to look is Kendo UI labs, which is a community project where a lot of people are contributing, where there is a local storage adapter for the Kendo UI dataSource.
You can see from that Brandon, the creator of that local storage adapter, just extended the dataSource and added in some local storage capabilities.
In general, network (HTTP) caching is good enough, and it has no performance issues. However, if you want an offline application, caching locally makes sense.
Other posts in this Kendo UI series with Burke & Cody:
