SUKUL LEARNING SERIES

Shailen SukulSenior Solutions ArchitectEMCBSc | Mct | Mcpd (.Net 2/3.5) | Mcts (Sharepoint (MOSS/WSS), Biztalk, Web, Win, Dist Apps) | Mcsd.NET | Mcsd | Mcad)

Applying MVVM Principles to SharePoint 2010 Development

19 October 2010http://shailen.sukul.org

Developing for SharePoint 2010 has become a whole lot easier with the included SharePoint templates in Visual Studio 2010 although, the templates do not lend themselves well to a clear separation of concerns. This leads to tightly coupled, untestable code, especially in UI development. In my experience, this leads to a lot of manual testing overhead and causes nightmares in regression testing. Such coupling is not limited to SharePoint, it can be found in Windows and Web Forms development as well.

Unit Testing OOBTry generating unit tests for SharePoint code

In addition to that, the target framework (4.0) on the unit test project in Visual Studio 2010 cannot be changed which makes testing against SharePoint 2010 (.Net 3.5) difficult.

Demonstration of OOB Unit Testing

…For your information, there's a lot more to ogres than people think...….Ogres have layers. Onions have layers. You get it? We both have layers…

Layered Design

http://jeffreypalermo.com/blog/the-onion-architecture-part-3/

Layered DesignMain application layers

Model-view-presenter (MVP) is a user interface design pattern engineered to facilitate automated unit testing and improve the separation of concerns in presentation logic.• The model is an interface defining the data to be

displayed or otherwise acted upon in the user interface.

• The view is an interface that displays data (the model) and routes user commands (events) to the presenter to act upon that data.

• The presenter acts upon the model and the view. It retrieves data from repositories (the model), persists it, and formats it for display in the view.

MVP

MVVM

The Model View ViewModel (MVVM) is an architectural pattern used in software engineering that originated from Microsoft as a specialization of the Presentation Model design pattern introduced by Martin Fowler.

Elements of the MVVM pattern include: Model: as in the classic MVC pattern, the model refers to either (a) an object model that represents the real state content (an object-oriented approach), or (b) the data access layer that represents that content (a data-centric approach). View: as in the classic MVC pattern, the view refers to all elements displayed by the GUI such as buttons, windows, graphics, and other controls. ViewModel: the ViewModel is a “Model of the View” meaning it is an abstraction of the View that also serves in data binding between the View and the Model. It could be seen as a specialized aspect of what would be a Controller (in the MVC pattern) that acts as a data binder/converter that changes Model information into View information and passes commands from the View into the Model. The ViewModel exposes public properties, commands, and abstractions. The ViewModel has been likened to a conceptual state of the data as opposed to the real state of the data in the Model.Controller: some references for MVVM also include a Controller layer or illustrate that the ViewModel is a specialized functional set in parallel with a Controller, while others do not. This difference is an ongoing area of discussion regarding the standardization of the MVVM pattern.

MVVM in SharePoint 2010

Although MVVM was primarily designed for WPF/Silverlight, the basic principles of modularity and separation of concerns can be applied to SharePoint development, barring some technical challenges. In this article, I will show you how to structure a SharePoint project to derive a lot of the same benefits out of MVVM. Lets take a look at how the sample webpart project can be retrofitted into the MVVM paradigm.

Message Flow

Code Structure

1. Start with a WebPart project2. Add the DTO folder3. Add the mapped images

folder4. Create a Service folder5. Create a mapped ISAPI

folder6. Add service definition7. Allow token recognition

in .SVC8. Add service config9. Include the JSON.Net project10.Register the service proxy in

the webpart.cs file11.Add server side code and

return JSON by using the JSON.Net serializer

12.Add the templating plugin13.Create templates in HTML

code14.Use jQuery to invoke service

and bind the resultant data to the template

15.Create unit tests16.Build and deploy

UI Demonstration

Unit Test Demonstration

Summary

As you can see, with a little refactoring, you can get test coverage for a large percentage of your SharePoint code with little effort.

Unit testing is does not depend on having access to the SharePoint context, this is now delegated to the web service.

There are still gaps in testing the ViewModel (i.e. the javascript controller). There are fameworks like JSUnit that allow testing javascript and will be explored in a later article.

Questions

ADFS and Federation will be explored in a future article.

Thanks!

Questions/Feedback?email me: ShailenSukul@gmail.comVisit my blog:http://Shailen.Sukul.org

Download link: http://tinyurl.com/2c34bmf Please do not distribute outside of EMC yet, it is being considered for publication by MSDN Magazine.

Feedback

http://www.surveymonkey.com/s/ZXMLK75