Porting TeamPulse from Silverlight to HTML5 with Kendo UI

In Telerik we strongly believe in dogfooding our own products so we can make sure we listen to our customers and always deliver the best value. This can be seen in the latest version of TeamPulse where we introduced a new HTML5 interface built from the ground up using Kendo UI controls and wrappers.

Why we decided to build the new app?

Indeed, it was a very risky decision to start this initiative and invest all our resources into the new interface built on a different platform and with a completely new architecture. In general experts do not advise on doing this, but we had a few very important reasons to do it:

• • Cutting-edge UI – we wanted to introduce a new UI that meets the highest standards for usability and performance.
• • Mobile support – we needed to create a tool that facilitates the need of modern teams to work on mobile devices like iPads and Android.
• • Extensibility – we needed a more flexibly platform that allows us to add new features faster and meet the requirements of our customers in shorter timeframe.

To mitigate the risk of re-writing the end client interfaces we decided to do that iteratively. This meant that we would support the Silverlight and the HTML interface simultaneously for some time so the migration for the users would be less painful and we would have a few releases to get feedback and improve the new interface before dropping the old one.

Why we chose Kendo UI?

There were a lot of open source and free SPA frameworks we could have used to build an HTML5 applications. We looked at backbone.js and knockout.js because they can also be integrated with the Kendo UI widgets. But at the end we decided to go for the native support and chose Kendo’s MVVM framework, plus as I mentioned it was a great opportunity for dogfooding.

Here are some other factors that helped us choose Kendo UI:

1. UI Widgets and Server Wrapper with out-of-the-box functionality that speed up development
2. MVVM Framework with templates and DataSource binding for creating an easy-to-maintain architecture
3. Support for all major browsers for ensuring identical user experience
4. New features and bug fixes on regular intervals
5. First-class product support

How we used Kendo UI?

UI Widgets

In the new TeamPulse interface we are using almost all of the UI Widgets - AutoComplete, Calendar, ComboBox, DatePicker, DropDownList, Editor, Grid, ListView, Menu, NumericTextBox, Splitter, TreeView, Upload, and Window.

Here are some examples:

Editor for the rich text work item descriptions

Grid for the drag-and-drop work item lists

TreeView for iteration planning

ComboBox for assigning work items to team members

Data Visualization Widgets

Area chart for our real-time analytics dashboard

MVVM Framework

this.$gridEl = this.$containerEl.find('.workitems-grid');            
     that.$gridEl.bind('click', app.proxy(that._onGridClick, that));
            that.$gridEl.delegate('.row-selector', 'change', app.proxy(that._onCheckBoxChange, that));
            that.$gridEl.delegate('.row-selector-wrap', 'click', app.proxy(that._onCheckBoxWrapClick, that));
            that.$gridEl.bind('dblclick', app.proxy(that._onGridDblClick, that));
            //open an item on double tap 
            that.$gridEl.bind('touchend', app.proxy(that._onGridTouchEnd, that));
            grid = that.$gridEl.hide().kendoGrid({
                autoBind: true,
                rowTemplate: kendo.template(columnsHelper.rowTemplate),
                dataBound: app.proxy(that._onWorkItemsGridDataBound, that),
                change: function (e) { that._onWorkItemsGridSelectionChange(e); },
                columnResize: function (e) { that._onGridResize(e); },
                columnReorder: function (e) { that._onGridColumnReorder(e); },
                selectable: "Multiple, Row",
                resizable: true,
                reorderable: true,
                pageable: {
                    pageSize: pageSize
                },
                dataSource: {
                    transport: {
                        read: {
                            url: app.getPath('api/WorkItemsFilter', true),
                            data: app.proxy(that.gridSettings.getFilterAndSort, that.gridSettings)
                        }
                    },
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    serverGrouping: true,
                    serverAggregates: true,
                    aggregate: true,
                    type: "aspnetmvc-ajax",
                },
                columns: cols
            }).data('kendoGrid'); 

MVC Server Wrappers

Another Kendo UI feature that we used were the MVC Server Wrappers. We needed them to ensure fast and seamless filtering functionality for all TeamPulse views.

We used DataSourceRequest on the server side to read the filters sent from the client, which delivered significant performance gains. For example, in the Silverlight version of TeamPulse screens with over 3000 items used to take up to several minutes to refresh. Now with the server side paging, sorting and scrolling we can have as many items as we want and this will not affect the user experience. This played a major role in the development of the TeamPulse multi-project management functionality where a large amount of project data is gathered from multiple projects and displayed on one screen.

Another big advantage of the MVC Server Wrappers was that they allowed us to extend the built-in Kendo filters and sorting functionality with new custom filters.

What were the key ingredients for success?

A great team

The first thing was our team. We all managed to quickly switch from using Silverlight to using HTML and JavaScript. We also had some great user experience experts join the team bringing the latest best practices in application development.

Previous experience in the company with the HTML5 applications

The biggest challenge for us was to decide what will be the architecture of the new application. We had to write an enterprise-grade application in HTML5 and luckily for us we had the experience in the company in the face of Icenium MIST and Kendo UI. After a few meetings with the guys the choice for us was obvious – Single Page Application with the Kendo UI.

In conclusion

Using the Kendo UI suite was easy and saved us a lot of effort and time. The combination of out-of-the-box features and customization capabilities allowed us to achieve the results we were looking for and release the new HTML-based TeamPulse on time.

I encourage you to try the public demo of the new TeamPulse and see the amazing results we have achieved.

Explore the new TeamPulse

Yordan Dimitrov

Product Manager, Agile Project Management Division at Telerik