On Jun 6th we conducted a webinar titled “Building Uncomplicated Single Page Apps (SPA) with Kendo UI”. This is part of an ongoing webinar series we here at Telerik India are doing targeting APAC region. We call this the Telerik .NET Ninja Developer Webinar Series. You can take a look at the Jun-Jul schedule here: https://telerikhelper.net/2013/05/24/telerik-webcasts-june-july/

SPA or Single Page Application is a way of building web applications which literally consists one single html page.  The application works by creating screens on the client side which is basically nothing but templates and getting the required data at different intervals as JSON payloads. So we showcased Kendo UI power and feature of building these SPA without any complication. The backbone of Kendo UI SPA is Rouer, View and Layout. So through this webinar I showcased how a SPA can be built with much hassle and very easily. Hope you go through the slide decks and the video recording of the webinar and find it useful for you.

Slide Deck:

Here is the slide deck used for the webinar:

Video Recording:

As many of you have been asking, we did record the webinar. So here is the video of the webinar:

Questions & Answers:

During the webinar there were many questions that you guys had asked. We tried our best to answer as many as we can. As a regular practice, we answer all the questions in the recap post. So here are all the questions and answers for them:

Q: where we can use SPA?
A: Anywhere User experience is critical – both enterprise and consumer apps.

Q: How does grid adapt to mobile?
A: Grids are not ideal for mobile applications. You may want to use ListView if you are primarily targeting mobiles.

Q: What is an Observable?
A: Observable is Kendo UI object that is used for supporting MVVM.

Q: How can i design Grid View UI as look like Windows 8?
A: You need to put custom CSS on Kendo Grid to achieve Windows 8 metro GridView look

Q: Do we have any IDE intelligent enough for kendo?
A; If you are using Visual Studio as IDE you will be able to get intellisense. Since its just plain JavaScript you can actually use any editors even Notepad.

Q: Can we have SPA project template for visual studio? i think development can be much quicker using that?
A: We currently don’t have it. Having said that its as easy as adding a stylesheet and a JavaScript and you have Kendo UI in your application. So you don’t need a SPA template as such. But our product team will start looking towards this.

Q: All the data binding must happen in a script tag?
A: Data binding happens in model that ultimately uses Kendo UI DataSource. It saves you a lot of writing AJAX code.

Q: What is a Router?
A: Router is the back bone of SPA feature using Kendo UI. It is responsible for tracking application state and navigating between the app states. You can read more on Router here: http://docs.kendoui.com/getting-started/framework/spa/router

Q: If our SPA is having multiple window and each window is having some sort of datagrids, charts , different lists etc, say various aspects of sales info. So, in that case where should we keep the templates, in the same page or we can put those in other files?
A: Templates can be in the same page or created as a separate script files. When you create templates as different files, you can use concept of Template Loader and load the template as you require. It all depends on your architecture.

Q: Can we create models on the fly? like dynamic?
A: Yes you can.

Q: Is kendo SPA having support for nested template?
A: Yes you can.

Q: Is there any Visual Studio plugin for Kendo UI SPA, which we can get from NuGet Package Manager? if not, does Telerik/Kendo UI has any plan to develop it? – it can be very useful for developers
A: Note that SPA is a feature available out of the box in Kendo UI solution. Kendo UI is available as NuGet package but be aware of the licensing terms. Kendo UI is not a free product. It is a licensed product.

Q: How we can change the Paging to Server side? We have to pass the page numbers and other parameters?
A: Kendo UI data source can page client side by default. If you don’t want that you can set ServerPaging to true and it will pass all the parameters required for paging to your service end point

Q: What about the performance of application when will have millions of record ? How it will be able to load in one time?
A: As a application architect you need to be wary of your data limits. Single Page Application is just a design paradigm of modern Web Applications. You will need to make sure you do paging on the server especially when you have million records. So you take control in this scenario for data loading.

Q: how to implement Kendo UI on SharePoint?
A: Kendo UI is all about 2 style sheet and 1 JavaScript file. So you can create your custom webpart and make sure to package the style sheet and javascript to the right location. The widgets will work as long as the path to the style sheet and script files are set correctly.

Q: Is Kendo UI libraries Open Source?
A: Nope. They are built, supported and sold by Telerik.

Q: Can I use WCF instead of Web API?
A: Yes. With HTTP binding that delivers JSON/ XML payload.

Q: You have edited the items only displaying in grid, if you want to edit more labels or data?
A: By default, the pop up mode of editing in Kendo UI Grid uses the column displayed to create the edit form. If you need to edit additional columns, you will need to create separate edit form and work with that.

Q: Can we use Kendo UI for offline purpose?
A: Kendo UI DataSource along with HTML 5 localStorage can be used.

Q: Data can be any custom XML. How difficult will it be to bind a custom XML with Kendo controls?
A: Yes any custom XML will do. It is as easy as just mapping what node maps to what property of the schema.

Q: IS JS wrapper. available in trial version for our Kendo UI POC that we need to show to our client?
A: Yes. Trial version is available on http://www.kendoui.com

Q: How to upgrade the Kendo UI version, once the application is already deployed
A: The Kendo UI is all about style sheet and JavaScript file. So you just swap the older version files with the new version files. That’s as easy as it can get.

Q: Does licensing allow to edit the source of kendo?
A: Yes. As a licensee you get the source code and you can modify it as per your needs. But you should know what you are doing :).

Q: Is there any service for android?
A: Yes. Please refer to Kendo UI Mobile. http://www.kendoui.com/mobile.aspx

Q: What is the licensing policy of Kendo UI?
A: The licensing is per developer and we do not charge you for deployments i.e. royalty free distribution.

Q: Will this support hybrid app development?
A: kendo UI Web is for web applications. If you are looking for Hybrid Mobile App Development you should take a look at Kendo UI Mobile. Kendo UI Mobile is a mobile control set which does adaptive rendering and is one of the best tools for Hybrid Mobile App development.

Q: What is the shortcut you are using to generate code snippet?
A: I was our Static Code Analysis product called JustCode. JustCode has a feature of Code Templates. So all my demo code were created as templates and a shortcut key associated with them. When have a key stroke which makes JustCode to autocomplete the code pertaining to the short cut key.

Q: Can we dynamically change the themes?
A: Yes you can. It is as easy as grabbing the link tag and changing the style sheet to be used.

Q: supports IE6?
A: We support IE7+ i.e IE8 and on wards.

Q: How it is differ from Upshot supported by Microsoft for SPA?
A: UpShot is not a SPA framework or solution rather it is a JavaScript library to make data retrieval in JavaScript easier. Where as Kendo UI is a complete framework which supports SPA feature out of the box and has a client side data source feature which does the data plumbing between server and client.

Q: Can we able to get the data through database connectivity?
A: The data is retrieved from DB in this demo as well. You need to build a service layer with Web API, WCF Data Service or WCF or any other non-.NET technology to retrieve data from the database

Q: Can we include 3rd party libraries in SPA application?
A: Yes, you are free to include 3rd party libraries. We can’t guarantee that there will be no conflicts.

Q: Does Telerik Test Studio support testing automation of all these?
A: Yes, Test Studio supports automation of Kendo UI controls.

Q: I see you used only JSONs as data type.. what other data-types available?
A: Kendo UI data source works very well with JSON and XML.

Q: Packaging support for android or IOS?
A: If you use our cloud based IDE called ICENIUM, it supports packaging for Android and iOS platforms with just a click.

Q: What about integration with Telerik controls?
A: Sure, this integrates with other Telerik controls too. Depending on the scenario, you can mix and match Telerik technologies.

.NET Ninja T-Shirt Giveaway:

As usual, we will be giving out 2 t-shirts in this webinar also. So following are the lucky winners of this webinar giveaway:

• Udayakumar Mathivanan
• Srinivas Abhishek

Congratulations to the winners. We will be contacting you soon on the email ids you have provided us during registration. The t-shirts will be shipped to you soon. Others don’t worry we still have a lot of webinars to go. So keep trying your luck by attending our webinars.

Conclusion:

In our endeavor to bring the Telerik technologies to each one of you, we are doing these series of webinars. Hope you are finding them useful. Looking forward to your presence in future webinars too. Till next time – Happy Coding!

Update:

Here is the GitHub repo to the source code of Kendo UI SPA demo: https://github.com/lohithgn/kendouispa/