SUKUL Learning Series

1. SUKUL Learning Series Applying MVVM Principles to SharePoint 2010 Development Shailen Sukul Senior Solutions Architect EMC BSc | Mct | Mcpd (.Net 2/3.5) | Mcts (Sharepoint (MOSS/WSS), Biztalk, Web, Win, Dist Apps) | Mcsd.NET | Mcsd | Mcad) 19 October 2010 http://shailen.sukul.org

2. 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.

3. Unit Testing OOB Try 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.

4. Demonstration of OOB Unit Testing

5. Layered Design http://jeffreypalermo.com/blog/the-onion-architecture-part-3/ …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…

6. Layered Design Main application layers MVP • 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.

7. 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.

8. 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.

9. 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.

10. Message Flow

11. Code Structure Start with a WebPart project Add the DTO folder Add the mapped images folder Create a Service folder Create a mapped ISAPI folder Add service definition Allow token recognition in .SVC Add service config Include the JSON.Net project Register the service proxy in the webpart.cs file Add server side code and return JSON by using the JSON.Netserializer

12. Add the templating plugin Create templates in HTML code Use jQuery to invoke service and bind the resultant data to the template Create unit tests Build and deploy

13. UI Demonstration

14. Unit Test Demonstration

15. 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.

16. Questions ADFS and Federation will be explored in a future article.

17. Thanks! Questions/Feedback?email me: ShailenSukul@gmail.com Visit 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.

18. Feedback • http://www.surveymonkey.com/s/ZXMLK75