You are currently viewing Utilizing Kendo UI to Control Cost Per View and Improve UI in an SPA with Excessive JavaScript
utilizing-kendo-ui-to-control-cost-per-view-and-improve-ui-in-an-spa-with-excessive-javascript

Utilizing Kendo UI to Control Cost Per View and Improve UI in an SPA with Excessive JavaScript

  • Post published:September 9, 2016

A web-based, commercial, SBA lending, Software Company required vteam #397 to improve the design of its user interface within Single Page Application (SPA). One of the conditions of the project was to reduce development and maintenance cost, where heavy JavaScript was involved, without affecting the overall application architecture. JavaScript, in this case, is predominantly used to initialize, bind and render the controls to save their values on the server via AJAX requests.

The goal for vteams would be to improve the overall UI binding, rendering and saving process within the Single Page Application.

During R&D, it was discovered that the SPA architecture was based on the Marionette framework; the Kendo UI controls were merely used to present data on the user interface. Much of JavaScript code was written to initialize the controls, binding their values (remotely retrieved from Web API), and to keep track of the changes within control values.

Additionally, jQuery AJAX requests were initiated to save the changes. To overcome these hurdles and to avoid any major changes within application architecture, vteams engineer Muhammad Umer decided to utilize Kendo UI’s framework components, which were already part of the architecture, and thus provide improved features to the SPA.

Surprisingly, development and maintenance costs were reduced by replacing legacy UI binding, rendering and saving techniques with other Kendo UI framework components.

Implementation Steps

The execution was divided into two steps of improvement, for a better binding mechanism and better data synchronization approach, using following components of the Kendo UI framework:

  1. Kendo UI MVVM for two way binding (model and view)
  2. Kendo UI DataSource for data synchronization with server
    .

Kendo UI MVVM is the preferred design pattern. It helps developer separate data, from the UI. It also offers automatic two-way binding, with built-in change and tracking mechanisms, which actually reduce much of the boiler plate code (previously needed for UI rendering, data binding, and tracking changes).

The Kendo UI DataSource supports CRUD data operations, and provides synchronization facilities too from the remote endpoint. Previously, data synchronization was handled entirely by jQuery AJAX requests. This required extra code for request and response manipulation. Instead the Kendo UI DataSource synchronization approach was utilized. This ended up requiring extra code, for explicit AJAX requests, for data synchronization.

//1) View
<input data-role="dropdownlist" data-text-field="description" 
data-value-field="approvalStatusID" data-bind="source: approvalStatuses"/>
//2 Model
 var dsApprovalStatuses = new kendo.data.DataSource({
                transport: {
                    read: {
                        accept: "application/json",
                        type: "GET",
                        url: "/api/ApprovalStatuses",
                    },
	        update: {
                        contentType: "application/json",
                        dataType: "json",
                        type: "PUT",
                        url: "/api/ApprovalStatuses",
                    },
	        destroy: {
                     	url: "/api/ApprovalStatuses",
                     	dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "approvalStatusID",
                        fields: {
                            approvalStatusID: { type: "number" },
                            description: { type: "string" },
                        }
                    }
                }
            });
//3) View Model & Bindings
var observable = kendo.observable({                
                approvalStatuses: dsApprovalStatuses,
            });

kendo.bind($("#grid-control"), observable);
//4) Save changes (sync after update or delete)
observable.sync();

Conclusion

This solution resulted in improved design and reduced development and maintenance cost, for each view, within Single Page Application. Due to the separation of concerns there was less code, which was cleaner and easier to manage and scale.