This is a series of articles that document how in the re-writing of a Virtual Cycling community web site I develop and maintain, I implemented Progressive Enhancement and the MVVM pattern.  In the introductory post for this series I listed all the tools and technologies I am using so I am not going to repeat that here, but before getting into any details of implementations I want to outline what I am going to cover in this series and talk about some of the patterns and principles I am using.

As a professional developer who works on a contract basis I believe it is important to understand the current best practices in terms of patterns and principles so in any personal project I work on I always implement it as I would any enterprise scale system for a client.  I practice Test Driven Development (TDD) as I believe it was originally intended (which is basically how Behaviour Driven Development (BDD) is described these days), I won’t get on my high horse about it but I consider working any other way a waste of my time.  I’ve come to prefer the combination of NUnit, SpecFlow, SpecSalad and Telerik Testing Framework for defining and automatically testing requirements including UI automation.  I won’t take up valuable space in these posts detailing the tests but they will be in code downloads I provide and I am happy to answer any questions or digress to write posts that might help you.

All data for the application is in a SQL Server database and I have an instance of SQL Server 2012 or SQL Server 2012 Express installed on all of my development machines.  To keep things consistent regardless of the SQL Server edition I have it installed as the default instance (so no SQLExpress in the instance name).  To create and update the database I am using v5 of Entity Framework, specifically the Code First and Migrations features.  Again I won’t be detailing this in these posts but all of the configurations and migrations will be in the code downloads I provide and again I am happy to answer any questions or digress to write posts that might help you.

One further set of things I am not going to detail in these posts (beyond this paragraph) is the components that comprise the stack of dependencies behind Controllers.  To ensure that I can test as much as possible I use separation and abstraction driven by unit tests, for me this is a normal outcome of practising TDD but some it might seem like over engineering.  Again I am happy to take questions or suggestions for posts regarding these components.  The following diagram presents the general dependency graph of Controllers:

All dependencies are provided via Dependency Injection (DI) using AutoFac.  Basically each controller will have a dependency on one or more application services (which contain all business logic).  Application services may have dependencies on one or more providers (e.g. EmailProvider, LogProvider), they also declare a single dependency on a RepositoryFactory (not shown in the diagram) which is used to create repositories as needed to access the model via an implementation of an Entity Framework IDbContext.  Data entities are retrieved by constructing an implementation of IQuery and passing this to a ResultsFrom method on the repository.  Queries are basically encapsulated LINQ expressions.  Each repository provides Add, Update and Delete methods.

So enough about what I won’t be detailing, what will I be covering.  I will be detailing how I use a combination of views and partial views along with a custom ViewResult and some related components to feed the appropriate content for rendering to browsers.  I’ll show you have I have implemented MVVM using knockoutjs to provide a rich responsive JavaScript enhanced experience when the browser supports it and js-signals for decoupled communication with JavaScript.

I’ll provide a link to the code with each article, but you should only need to download it once as it will be the same code.  The code will include four features Sign In/Out, Sign Up, Recover Password and Change Password and could potentially be used as a starter kit for a web application that requires membership features.

Hope you find the series helpful.

In my next article in this series I will explain how I applied progressive enhancement to the navigation of my site

Next Article