Posts in this series:

• Post 1
• Post 2

Despite only around 1.2% of users having JavaScript disabled there is still a requirement to develop sites which work for users who have JavaScript turned off, especially sites which provide government services. The UK's Government Digital Services (GDS) require that a site works without JavaScript and is then enhanced using JavaScript. This causes all sorts of problems designing forms, especially where there is an "Add more" option for input fields.

Designing something like an "Add more" functionality with JavaScript is fairly trivial, having it work for those without is less so. Having encountered this problem several times I've written a summary of the approach I have used to address this.

The code

All the code for this tutorial is available on GitHub. I have used Git's branches to take snapshots of development changes. The final code is in the branch "step-5". Additonally I have hosted the website on Azure so you can see what the final page does here.

The product

We are designing a page to allow users to choose items from a menu, once they have selected as many items as they want, they submit the form and are taken to a summary of their active orders:

If you need to use some package which is dependent on System.Xml with Core CLR / DNX Core you simply add the Nuget package System.Xml.XmlDocument rather than referencing the GAC System.Xml.

This allows you to keep your code in Core CLR friendly mode.

Having played around with the Visual Studio 2015 preview a bit I've tried to learn how Gulp integrates with the Web Application project.

Gulp seems like one of those many, many, constantly appearing JavaScript libraries with names like YamahaPotplantSaucepan.js which are impossible to keep up with. However since it takes the place of the Bundle config it's important to be able to achieve a basic level of familiarity with it.

What does it do?

Gulp describes itself as a "streaming build system" which basically means you can wire up a pipeline of operations to perform on your content, such as JavaScript and CSS.

By default the project template comes with a gulpfile (shown in the image as #1). This is configured to take the dependencies from Bower (which is a package manager loading a few jQuery packages in by default) and copy them to the wwwroot/lib folder (#3 in the image).

When writing some automation tests using Selenium with SpecFlow recently I was faced with an odd error:

    No matching step definition found for the step. Use the following code to create one:
    [When(@"I add a new dog")]
    public void WhenIAddANewDog()
    {
        ScenarioContext.Current.Pending();
    }

The suggested code was using a [When("My Scenario")] step despite the feature file declaring it as a Given:

Scenario: Check for existing dog
    Given I have a new Dog Controller
    And I add a new dog
    When I check if the added dog exists
    Then The check is true

(This feature is written badly to illustrate the error).

The step it couldn't find was the And I add a new dog step. Despite showing as bound in the feature file and being able to navigate to the step definition, the running test couldn't find it and was looking for a When instead of a Given.

This is because the previous step was calling sub steps as follows:

public class DogControllerSteps : Steps
{
    [Given("I have a new Dog Controller")]
    public void CreateDogController()
    {
        Given("I have a new query bus");

        When("I create a new dog controller");
    }
}

Inheriting from Steps allows us to reuse step definitions from the same or other step files.

When SpecFlow runs this it knows that it last ran a When step, despite being in the definition of a Given. Therefore when the next step is defined with And, it looks for a When. To fix this you can simply change your feature to be more specific:

Scenario: Check for existing dog
    Given I have a new Dog Controller
    Given I add a new dog
    When I check if the added dog exists
    Then The check is true

Passing tests :)

We recently started using CQRS on a project to provide a new web application to manage a complicated permit process. The CQRS pattern combined with a proper domain model seemed like a good fit for the business logic.

Midway through development of our 2 tier solution (Web <-> Database) we were asked to instead asked to develop a 3 tier solution (Web <-> Api <-> Database) to avoid exposing the database to the web server (no WCF allowed).

Initially the change slowed development and resulted in an explosion in the Lines of Code to functionality ratio. After some thinking we realised it might be possible to use Web API as a command/query bus for our pre-existing CQRS setup, effectively allowing us to "pass-through" the API without needing to write a controller action per command.

This post summarises the ideas behind the working approach we developed. All the code used in this post can be found on Github but the code is very obviously simplified; both to avoid revealing implementation specific details such as security and to allow this post to focus on the concepts.

CQRS

If you're not familiar with CQRS read some of the articles available on the advantages and disadvantages of the pattern. Basically you separate commands (actions which update data) from queries (which read data).

This post will only deal with implementing the query side of CQRS over Web API. Commands should be simpler.

Query and QueryHandler interfaces are defined in a separate CQRS class library (ideally Queries and Query handlers live in separate libraries because your web project shouldn't have to reference query handlers).