Microsoft Sharepoint 2013 : Understanding app patterns (part 1) - Building MVVM apps - Understanding JavaScript challenges

This section details app patterns that can be used with these development scenarios. Specifically, the Model-View-ViewModel (MVVM) pattern is presented for JavaScript with REST and the Model-View-Controller (MVC) pattern is presented for C# with CSOM.

The MVVM pattern provides a flexible way to build JavaScript/REST apps that promotes code reuse, simplifies app maintenance, and supports testing. The pattern consists of three different components. The Model component is defined as the entities on the SharePoint server such as lists, libraries, and service applications. The View component is defined as the webpages that make up the app user interface. The ViewModel component is defined as the JavaScript that binds the Model and the View together. Figure 1 shows a simple block diagram of the MVVM pattern.

Figure 4-1. You use the MVVM pattern to isolate data, business logic, and display functionality.

The goal of the MVVM pattern is to separate the display of data from the business logic, which is in turn separated from the underlying data. In practical terms, this means that all JavaScript is removed from the app webpages and segregated into libraries. These libraries are responsible for interacting with the back-end data, applying business logic, and feeding data to the webpages for display.

The biggest challenge in implementing apps with JavaScript is the intimate relationship between the webpages and the libraries. In many JavaScript implementations, the code in the libraries must have detailed knowledge of the markup in the webpages.

readAll = function () {
    $.ajax(
            {
                url: _spPageContextInfo.webServerRelativeUrl +
                    "/_api/web/lists/getByTitle('Contacts')/items/" +
                    "?$select=Id,FirstName,Title,WorkPhone" +
                    "&$orderby=Title,FirstName",
                type: "GET",
                headers: {
                    "accept": "application/json;odata=verbose",
                },
                success: function (data) {
                    readAllSuccess(data);
                },
                error: function (err) {
                    alert(JSON.stringify(err));
                }
            }
        );
},

readAllSuccess = function (data) {
    var html = [];
    html.push("<table><thead><tr><th>ID</th><th>First Name</th>" +
              "<th>Last Name</th><th>Title</th></tr></thead>");

    var results = data.d.results;

    for(var i=0; i<results.length; i++) {
        html.push("<tr><td>");
        html.push(results[i].ID);
        html.push("</td><td>");
        html.push(results[i].FirstName);
        html.push("</td><td>");
        html.push(results[i].Title);
        html.push("</td><td>");
        html.push(results[i].WorkPhone);
        html.push("</td></tr>");
    }

    html.push("</table>");
    $('#displayDiv').html(html.join(''));
}