MVC4 Mobile and Desktop Web

As LoB applicatons are what I do on a daily basis, I have been looking at how we can use our existing expertise to build mobile applications.

This is the third component of my analysis (but only the second to be blogged), my android analysis can be found here.

As MVC4 has some improved web applications development features, such as Single Page Application templates, Mobile Application Templates, and the Web API, I decided to use this. I already blogged how the initial project templates were slightly confusing, so this time I decided to start with a standard template, and build from there.

Steps I took to getting up and running

• Set up the Framework and Business Logic - this is becoming second nature


• Set up a plain MVC Project


• Create my page Controller and default view


• Create my ApiController for the get/post operations
  
  
  
  • I recommend firefox for testing this, IE doesn't do JSON very well and firefox made debugging much easier.
  
  
  • Firefox (with the user agent spoofing plugin) also makes it easy to test the mobile enhancements.
  
  
  
  


• Create a script for the KnockoutJS ViewModel
  
  
  
  • This included the ajax calls to the ApiController to load and update data. I was unpleasantly surprised to see that while firefox worked immediately, IE10 (win8) required a lot of tweaking and in the end I had to switch from $.getJSON() to $.ajax() jquery calls.
  
  
  • As I am creating a multi-page application I defined this at the View level.
  
  
  • At this point I also had to modify the 'bundle' in global.js to include KnockoutJS - the default bundle definition did not include this. As a side note, I completely removed the default bundling later on, and created the bundles explicitly. This was necessary to ensure the mobile and desktop script bundles were used correctly.
  
  
  
  


• Update my View to use the KnockoutJS bindings

Once this was done, I had a functional website that I wanted to convert to a mobile friendly solution.

• Install (Nuget) JQuery Mobile


• Create a new script bundle to include JQuery Mobile js and css files


• Create a new _Layout.cshtml called _Layout.mobile.cshtml - this should use the mobile script bundle in the script header.
  
  
  
  • This is a cool feature in MVC4, when a mobile agent is detected, the ".mobile" content is rendered, not the standard view
  
  
  
  


• Update _Layout.mobile.cshtml to use the JQuery mobile data-role attributes for layout

We now have a mobile styled page and a desktop styled page using a single codebase. The next step would be to update the View to provide better mobile styling features, but I won't go into that here.

MVC4 Single Page Basics

I recently highlighted that I had a bit of an issue with the MVC4 tutorials that are available here as I do not believe the standard application structure for the default apps is adequately documented.

I also note that there are some unnecessary differences between the base templates that can further confuse the issue, predominantly in the View definitions, that make it difficult to discern the important differences between the template types e.g. Single Page Applications / Mobile applications / Web API.

For example, the Login.cshtml Header in the mobile template is defined as
@section Header {
    @Html.ActionLink("Cancel", "Index", "Home", null, new { data_icon = "arrow-l", data_rel = "back" })
    <h1>@ViewBag.Title</h1>
}

while in the SPA application it is defined as
<hgroup class="title">
    <h1>@ViewBag.Title.</h1>
    <h2>Enter your user name and password below.</h2>
</hgroup>

Now there is a realistic need for the actions to be defined in the mobile header and not in the SPA header, BUT I think the differing use of hgroup and @section Header should have been standardised.



As for a lack of basic plumbing documentation, I think the SPA application is very lacking in this area. The tutorials are very good at showing how the data access and data binding works, but one thing that really stood out for me was the lack of information on how the login page was loaded in a popup and how the actions were resolved as Ajax actions instead of standard actions.

Looking into the code it wasn't actually that difficult to identify where things were happening, for example the line
        <script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>

in the _layout file loads all the javascript code in the scripts folder, which in turn loaded the AjaxLogin script file.
The code below then overrides the onclick of the login links to render the link content in a popup instead of a new page.
// List of link ids to have an ajax dialog
    var links = ['#loginLink', '#registerLink'];

    $.each(links, function (i, id) {
        $(id).click(function (e) {
            var link = $(this),
                url = link.attr('href');

            if (!dialogs[id]) {
                loadAndShowDialog(id, link, url);
            } else {
                dialogs[id].dialog('open');
            }

            // Prevent the normal behavior since we use a dialog
            e.preventDefault();
        });
    });

The loadDialog function sets an additional query parameter (content=1) which the Controller accepts and renders a PartialView instead of a View (in ContextDependentView(), and prefixes "Json" to the action property in the ViewBag. The View itself uses this 'action property' as the post action, which ensures that the correct Action is called (either JsonAction or just Action) is called on the HttpPost for the View.

Yes once you know what is going on it is easy to follow, but all this detail is very important to the way Single Page Applications work, as much if not moreso than how to use upshot and knockout, and it is just left to developer to figure it out.

Anyway, this is Beta, but I just thought that for something so central to the development experience with Mvc4 there should be more emphasis on the basics to ensure that people understand what is happening rather than just guiding them directly to loading data.

MVC4

I have avoided really learning JavaScript for web development for a little while now. Or at least I have always had other things come up that has taken precedence. Despite one fairly large ExtJS project, and a smattering of JQuery controls, I have not spent much time learning JavaScript, HTML5, or CSS3.

With the release of MVC4 beta I decided to really try and get stuck into JavaScript and at the same time work on Mobile application development for rich internet apps.

One thing that I think is really lacking in the MVC javascript demos however is an explanation of the basic components of the projects. All the demos highlight how easy it is to load and manipulate data through the web api, and bind to elements on the page, but there is very little on the application plumbing, how pages are rendered, how navigation works, how the partial views are rendered to popups, etc. All of this requires diving into the code to work it out.

So hopefully in the coming weeks I'll post a few guides on these 'basics' as I start to build up my own knowledge.

5 Minutes of Android from a .net dev

Introduction

I have been part of a casual group of senior developers working on building a standard development platform for our teams, and have been using it for a few simple trial projects quite successfully.  The original design was to support desktop, web, and Windows Phone development, with the primary focus being the core tiers (data/business) with the presentation layers currently fairly underdeveloped. 

I have produced effective WP7 applications using this framework however, so I figured I would build an Android app to get some insight into how much effort would be involved in supporting multiple native applications.

Backend

I started with a simple design, a ratings system where users can rate, and view the average rating, for a list of items.  As Android doesn’t support SOAP very well, I decided to expose my services via webHttp (REST) endpoints, which works quite well with the ratings model that I am building.

I had a few issues setting up Json support through WCF, for a couple of reasons. 

Firstly I was using DataContract(IsReference=true) to support the data contract serialisation of my entities, which is not supported by DataContractJsonSerializer.  This was required to prevent circular references in my entity design for previous projects.  The solution was to turn this off, and ignore the circular references from my entities using IgnoreDataMember attributes.

As always, as this was within the WCF layer, the errors were woefully inadequate, and it took a while to actually identify this as the issue :/

Secondly, I downloaded and installed cUrl to test my POST/PUT calls, and getting the exact right quotes/escaping strategy for the Json parameter was a pain.  In the end I needed the entire parameter enclosed in single quotes, and each double quote for the key/value pairs needed to be escaped with a standard escape character (\) .

Android

So I now had a RESTful service that android would be able to access quite easily, so on to the android development part.

• Getting the tools
  • This was fairly easy, Google has a very simple guide on how to get the SDK, as well as links to appropriate IDEs
  • The development can be done in a variety IDE’s, including eclipse, but for a change I decided to go with Telerik IntelliJ Idea, which has “built in” android support.
  • It was a bit of a process to download all the components for development.  Once the SDK was installed there were then a number of sub-components to download.
  • And then I needed the right Java Versions, with android only working on Java 1.6 meaning I needed to sign up for an Oracle account to download a legacy jdk.
• Hello World
  • IntelliJ IDEA was good here, creating a new android project was straight-(ish) forward.
  • Much like java projects in general, the code, assets, and resources were scattered all over a number of folders, but at least the build files were all set up and everything built up front.
  • While IDEA has no graphical designer, it does have a preview.  I will need to work out how I can support test data in the designer to make sure things look right.
• Testing
  • Setting up an emulator was very simple, and deploying was automatic when debugging.
  • Debugging was very slow, I would definitely switch to a real device for tracing/debugging in anger.
• Next Steps
  • Web Access
    • Getting a single http request to my REST service was easy
    • note, do not use localhost (yeah i should have known this from my WP7 apps too)
  • Data Binding
    • Not quite there yet, but it is not as simple as I expected – there is no JSON binding support off the bat, and binding list data actually involves creation of arrays of hashmaps.  This was a big surprise.
  • Page Navigation
    • Haven’t looked at this yet
  • UI Design
    • Haven’t looked at this yet

 

Conclusion

I had a lot of reservations on how hard it would be to make a simple android app, but offloading all the logic to the service layer, using RESTful services and designing your application flow for the mobile form factor, it looks like it can be done with fairly minimal effort.

Obviously providing ‘local’ device processing and resources (inputs etc) will complicated this dramatically, but for LOB systems it is definitely feasible.  Providing a native WP7 and Android front-ends is definitely within reach of our application framework.

Autofac and A Simple Plugin Design

I am working on a web service that needs to support custom processing components depending on the input. I had started using Autofac as the DI container for the initial service implementation, but it wasn't until I required the custom processing components that I really needed DI.

The plan was to generate the components as independent assemblies so that they could be implemented and deployed independantly of the service. This also meant I needed XML configuration to register each new component.

The implementation would be to instantiate a Service, which had an IProcessor as a dependency

public Service(Common commonService, IProcessor processor)

I then register the service as a named service, which is named after the processor that is to be created. However, the named server needed to be configured to create a named instance of the IProcessor when resolved (as the WebService resolves the Service, not the IProcessor).

builder.Register(c => new Service(c.Resolve<TrimCommon>(), c.ResolveNamed<IProcessor>("CustomProcessor"))).Named<Service>("CustomProcessor");

In order to resolve the Service I need to register my CustomProcessor, which is where the 'trickyness' kicks in. I didn't want to add each CustomProcessor as a reference to my service, as that would be difficult to manage, so I could not just register the type Fluently.
This meant I had to go back to XML (eewww, spring.net) to register my IProcessor implementations. This was still very easy

<component type="CustomProcessor, CustomProcessor" service="IProcessor, Common" name="CustomProcessor" instance-scope="per-lifetime-scope" />

So in code, when I resolve

Service service = getInstanceContext().ResolveNamed("CustomProcessor");

I get a Service with the appropriate processor.

Unfortunately I realised that when trying to resolve the CustomProcessor class this failed, as it was not loaded into the AppContext, and did not exist in the GAC. To fix this I had to handle the AppDomain.CurrentDomain.AssemblyResolve event and load the assembly manually.

The code below handles the event and loads the assembly if it exists in the "plugins" folder of the running webservice

Assembly CurrentDomain_AssemblyResolve(object sender, ResolveEventArgs args)
{
System.IO.DirectoryInfo folder = new System.IO.DirectoryInfo(this.Server.MapPath("/plugins"));
AppDomain.CurrentDomain.AssemblyResolve += new ResolveEventHandler(CurrentDomain_AssemblyResolve);
System.IO.FileInfo[] files = folder.GetFiles("*.dll");
foreach (System.IO.FileInfo file in files)
{
try
{
Assembly assembly = Assembly.LoadFrom(file.FullName);
if (assembly.FullName.Substring(0, assembly.FullName.IndexOf(',')) == args.Name)
{
return assembly;
}
}
catch (Exception)
{
return null;
}
}

return null;
}

Autofac and WCF Lifetime Issues

I am building a fairly simple WCF service and decided to use Autofac / Autofac.Integration.Wcf for (admittedly very simple) dependency injection.

I have previously used Unity, with a custom wcf scoped lifetime manager, but I have heard good things about autofac.

Setting up the WCF instance was pretty straight forward following the wiki for a IIS hosted server, and I could immediately use the service.

The next step was to configure the service instance PerCall since I don't want session management, which was also straight forward.

Finally I wanted to register a dependency for the service, which caused some confusion, partly because I was 'doing it wrong', and partly because some of the guides I had seen were wrong.

My registration is shown below, and is based on the Autofac wiki examples
var builder = new ContainerBuilder();
builder.RegisterType<WcfService>();
builder.RegisterType<BusinessService>().InstancePerLifetimeScope();
AutofacHostFactory.Container = builder.Build();
The BusinessService is scoped as InstancePerLifetimeScope, which combined with the AutofacHostFactory definition in the service host markup should generate a new instance per WCF call.

I then called AutofacHostFactory.Container.Resolve() twice in one of my service methods witht he expectation that each call to the service method would create a single new instance of BusinessService, but the two calls in the one method would return the same instance. Unfortunately this was not the case, and a single instance was reused throughout all my service method invokations.

I should have known better and had the BusinessService as a dependency to my service constructor (which was indeed a misdemeanor) BUT, it took a considerable amount of time to find out why the manual service resolution was not respecting the expected Lifetime management. As it turns out, the AutofacHostFactory.Container was not the correct container to use, and now that I think of it, I can understand why, but there is very little description over what happens in the service configuration within Autofac.

Registering the container in the AutofacHostFactory actually creates an Autofac container on the Host Factory itself, which is why the resolution returned a common instance each time, even between calls. Obvious yes, but the code to get the actual container was far less obvious. It wasn't until I saw this 'bug request' that I understood what had happened.

The Autofac service host factory registers a new container lifetime when the service is created, and the only way to get it is to obtain it from the current WCF OperationContext. In Unity this was more explicit because I implemented the Lifetime Manager myself, but in Autofac the Integration.Wcf libraries which things a little more black box, and the lack of documentation was frustrating.

Anyway, as I said, I did it wrong to begin with - adding the BusinessService as a constructor dependency resoved the dependency exactly as I originally expected, but it can definitely be confusing for a developer as they cannot call resolve() on the same container they register it (on the AutofacHostFactory in this case).

Why the TFS Hate

For the last few months twitter has been abuzz with TFS hate, and I always wondered exactly why.

Sure there are some annoyances, but on the whole as a full SDLC tool, TFS is a pretty comprehensive and cohesive tool.

It integrates source control, task management, automated builds and testing into a single system, and handles each component pretty well.

Source Control
+ good branching, merging, labelling support
+ good IDE integration
- not as good as a DCVS (such as git)
- ties source code to source control, a massive pet hate and has caused countless issues in the past

Task Management
+ flexible enough to support release planning, resourcing, task management, bug tracking, etc
+ integrates with build and testing components
+ integrates with the IDE
+ fairly easy to modify
- flexibility poor is relative to something like JIRA

Automated Builds
+ flexible
+ integrates with the IDE
+ simple to set up
+ integrates with Unit Testing (and Test Manager for deployment/UI testing)
- complex to modify

Testing (via test manager)
+ integrates with task management (test failures can generat bugs)
+ integrates with builds (you can define a set of automated UI tests to execute on build success)


As a single system nothing comes close to this level of functionality and flexibility, and despite its warts it does work pretty well.

Saying that, I can name off the top of my head better alternatives for each component, such as Git/Mercurial for source control, TeamCity for builds, HP or Rational Test Managers, JIRA for task management/workflow. Some of these integrate with TFS or Visual Studio to varying levels, but setting them up and day to day integration between these systems is not going to be as cohesive as a single TFS solution.

Granted I know in the past I have struggled to correctly set up TFS, Sharepoint, Reporting Services, Test Center, and HyperV to all work correctly, so perhaps configuring all these external systems is not as difficult as I think.

Git and TeamCity are definitely items I want to become familiar with if only to find out what the hype is all about, but I again reiterate that I don't really understand all the hate with TFS.

Perhaps more experience with these other systems will turn me into a TFS hating ragaholic too :)