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.

Building MVVM apps

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.

Understanding JavaScript challenges

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.

Example 1 uses the jQuery ajax method to select items from
a contacts list. If the call is successful, an HTML table is
constructed and assigned to the inner HTML of a <div> element.
Note how the JavaScript must understand that the webpage requires a
table for display. Because of this design, the library cannot be reused
to display the data in a different way. If you wanted to show the items
in a list, for example, you would need to rewrite the success handler
to generate a list instead of a table. This is the challenge that the MVVM pattern seeks to address.