Building n-Tier apps can be difficult. Instead of a single monolithic application that can easily hide its imperfections, a client-server model traditionally means making an API, choosing a transport, and sticking to it.

It’s like marriage, but with TCP/IP settings. Throw in a wireless client and it can be difficult to find a solution that fits. XML-RPC? SOAP? REST? Each way of communicating has benefits and drawbacks.

This is what we’re doing for client X, a niche healthcare business.

The requirements for the project are a web site with both static content and user-only pages with geolocation, pricing and communication features. These features are duplicated on iPhone/iPad and (in the future, Android) clients.

The obvious solution is an n-Tier architecture where we can centralize the business logic. The less obvious part is how to communicate with it. The iPhone app (Boomer) is using a wireless connection, so lightweight formats are obviously attractive. Also, iOS has a poor selection of XML-RPC and SOAP clients, so a JSON/REST solution makes sense.

On the other hand, the web client (Apollo) is running in the same location – initially on the same server – as the client, so it can use a fatter, more full-featured connection. Since we’re using Microsoft stack for this project, that means WCF. WCF also generates model code for the web client, so most of the work is just converting these models into HTML output. The server (Athena) consists of both conventional and restful WCF services each accessing the core logic of the server, which in turn consists largely of LINQ-based interaction with the database.

The neat thing about offering parallel services like this is that it makes adding additional transports much more straightforward. For example, if client X decides they want to use an RPC-based tool with the server, it just means adding another service; the business logic has already been prefactored out of the way.

It turns out that Flickr does the same sort of thing. Their solution: flags and flippers. Interesting read.

Converting a Photoshop pitch to a static HTML/CSS layout is a fundamental part of client-oriented web development. It can be hard work, not least because it is difficult to simultaneously focus on the appearance of the site and its structural foundations.

The usual solution to this is to muddle through and keep tweaking a steadily expanding morass of CSS until the site resembles the original .psd. This way of working is unstructured, which makes it stressful and self-limiting.

Let’s look at a better way.

Separating structure and appearance

A more disciplined way of working involves separating the structure and appearance of the CSS into two separate files, like this:

    <link rel='stylesheet' href='styles/structure.css' type='text/css' />
    <link rel='stylesheet' href='styles/appearance.css' type='text/css' />

But aren’t appearance and structure separate already in CSS?

At this point you may be thinking that CSS is already predicated on the idea that structure and content should be separate. HTML for structure and CSS for appearance, right?

This is true if “appearance” includes attributes such as float or position.

We want to really separate the the attributes responsible for layout – position, float, padding, margin, width, height, border, etc – from those responsible for decoration – background, color, font-*, text-*, etc.

We also want to be able to visualize the structure of the CSS. This means adding false background colors to elements in structure.css so we can see what effects those elements have on the layout. The predefined CSS colors such as “green” or “red” are great for this.

How structure.css and appearance.css see a page element

Structure.css might describe a page element like this:

div.feature_content
{
    background: green;
    padding: 5px 20px 15px 20px;
}

while appearance.css is concerned with this:

div.feature_content
{
    color: #00326a;
    background: #e8e8e8 url(images/feature_foot.png) no-repeat left bottom;
}

This means we can easily switch off the appearance file and look at a purely structural layout. If, for example, we need to add an element and inadvertently break a float clearance, we can metaphorically lift the hood on the layout and immediately see what is wrong. It’s like having X-ray vision for HTML.

With both stylesheets switched on.

With just structure.css switched on.

Visualizing in action

If you watch the animation at the start of this post again, pay close attention to the position of the top navbar.

When I first started blocking out the page the navbar was inside the top (‘header’) block. Later I realized it would be easier to position if it were the first element in the second (‘content’) block.

So I switched off appearance.css (by breaking the tag with an underscore,) and moved the nav bar’s div. The structure was fine, so I deleted that underscore and the hood went down.

The important part of this is that I was immediately confident that the change had no unexpected impact on other elements in the layout. I knew the layout of the page, even when it was in flux, because I could see it.

Divide and conquer

The important thing is that visualizing CSS isn’t a tedious “best practices” kind of thing. It really does remove a lot of stress and confusion from development. Give it a try; once you start dividing your CSS this way you’ll wonder how you managed before.

The library can create files or streams of PDF. I’m caching my output, so this example uses files:

        // create a document
        Document document = new Document();

        // associate it with a file
        String filepath = Request.MapPath("/Pdfs/test.pdf");
        FileStream file = new FileStream(filepath, FileMode.Create);
        PdfWriter.GetInstance(document, file);

        // write the pdf
        document.Open();
        document.Add(new Paragraph("OMG this thing works"));
        document.Close();