The reason this is complex (and therefore interesting) is because bbc.co.uk has been going a long time, and is produced by many different teams. As a result it's now hosted on several different server architectures, with Journalism, our messageboard system (aka DNA), externally commissioned and hosted sites and our search system to name just a few, all using different server stacks.

To update content, like the masthead, on all these different stacks used to require making the change several times, on several systems. no longer however, because our page templating application, Barlesque, is now used by them all.

Last time I posted on the blogs about Barlesque I discussed a little of the early client side development work we did when designing it. Now I'd like to turn to the server side, specifically how we initially made it available to all the server stacks mentioned above, and also the challenges we've faced in the last 8 months migrating it to our new and shiny technical platform.

When we got the go ahead to redevelop the previous page templating system, Barley, the first place we needed to make the new system available was our core environment at www.bbc.co.uk. In 2007-8, this meant Apache, mod-include (aka SSI) and not much else. This gave us includes, variables, conditionals (including regular expressions) but no loops, arrays, functions, databases and so on. On the plus side it's as fast as a greased eel, so can be used on every page of the site without making our sys admin folk cry.

As a result the way developers use this interface to Barlesque is pretty trivial. First set some configuration variables, for example:

<!--#set var="blq-footer-colour" value="black" -->

Then include the head, masthead and footer includes in amongst the normal html, for example:

<!--#include virtual="/includes/blq/head.sssi" -->

And the new page is ready and waiting for content.

But what if the site in question isn't on the www.bbc.co.uk architecture - like news stories, search results or one of the many externally-hosted sites the BBC commissions every year?

The SSI webservice

Actually, it was quite simple to bridge this gap - we just made three .shtml pages that used SSI to include the three parts of Barlesque (head, mast and foot) and let all the external sites call them in over http.

Then, thanks to an open source BBC Apache module called mod_setsplitvars the webservice can be configured via the query string:

www.bbc.co.uk/includes/blq/webservices/head.shtml?blq-foot-colour=black

This query string interface also means the webservice response is cachable (with some the headers set using mod_expires to prove it), vital to ensure we didn't introduce cross dependency with the journalism stack in particular.

All good. Then the fun started.

The new BBC Tech Platform

Over 2008 our new server architecture was rolled out. Known internally as 'Forge', it's a fully dynamic architecture, with PHP, the Zend framework and its MVC structure. This meant going and getting the webservice wasn't a problem for the early Forge-based sites like Lab UK, but it also meant it was a very appealing platform to be developing key products like Barlesque on. So 8 months ago we decided to move house.

The core Forge system

The first step was to rewrite Barlesque on Forge (the bottom circle on that crazy spaghetti chart), which straight away has meant the code getting clearer and less hacky, and abstracting all those separate pan-site projects like the survey and the advertising system that got tangled up with Barlesque simply because SSI knew no better. Win.

We also took the opportunity to make some much needed tweaks to our variable naming - losing SSI's slightly rubbish manual namespacing, and my slightly rubbish Americanisms:

var name="blq_footer_color"

Becomes:

$blq->footerColour;

This did however leave us with two code bases, SSI and Forge, which proper programmers tell me is a Bad Thing, so...

SSI stack interface on Forge

...We had to find ways of migrating use of Barlesque on the SSI stack to Forge.

Unfortunately we couldn't realistically ask the last two years worth of sites released on the SSI stack to go back and update their Barlesque calls. Instead we built another simple layer that compiles all the SSI variables into a query string, using lots of not-very-sexy SSI like this:

<!--#if expr="$blq_footer_color" -->
    <!--#set var="blq_qs"
        value="${blq_qs}&blq_footer_color=${blq_footer_color}" -->
<!--#endif -->

That query-strung request could then be proxied (again via a caching layer) to a new interface on Forge that mapped the SSI API values to the Forge ones. Once done, the existing SSI-based sites could be switched to Forge Barlesque without making any changes.

One neat trick here: We were able to collect the head, mast and foot content in a single call rather than three, by returning some html for the head, and two large SSI variables for the mast and the foot. A nice win.

The Forge webservice

Finaly we migrated the SSI webservice to point at Forge. Not hard, just a proxy pass from SSI to a third Forge interface, and some foreach($params as $key => $value){} taking the place of setsplitvars.

All done.

Um. Actually not quite. Just for fun there's a fourth interface:

Old Forge interface

Remember I mentioned those early Forge sites, like Lab UK, that used the SSI webservice to get Barlesque off the old SSI stack? Well Barlesque just moved to Forge, so it would be a bit mad to still be going to the old servers to collect it, then being proxy-passed straight back. So we've rewritten that interface too, using the same configuration mapping array as the webservice and SSI interface to use Forge Barlesque directly.

Thus after 8 months we're finally back down to one codebase, and so we only had to write the new masthead once, and the same goes for all the exciting new features we have coming in the future too - heads up!

Hi - I'm Mat Hampson, the lead developer on a BBC project called Barlesque. (I know, I know: odd name. More about that later.)

This week, we've found the project featured in Private Eye's Birtspeak 2.0 column [Shurely shome mishtake - ed] which, in case you're not familiar with it, is the regular column where Private Eye casts its satirical spotlight on a jargon-filled missive or announcement from the BBC.

Having read the Eye for years, being on the receiving end has been fun. Aside from impressing our mums by appearing in the national press, it's also demonstrated again how a paragraph that makes perfect sense to those of us making the product can look like gobbledegook to everyone else. Anyway, we thought it might be useful to offer up a translation, and perhaps explain a little bit about Barlesque along the way.

First, the email snippet in question:

As you may be aware from the Barlesque mailing list, on May the 13th we are going to roll out a change to the Barley implementation used by DNA services in order to align it with the new global visual language being used across bbc.co.uk. This change will be carried out by the DNA team and will require no work on your part... See the attached PDF for details of the change ['Barley toolbar update - aligning legacy UK toolbars with the new visual language standard'].

All clear? Well, we think so...

Barlesque is bbc.co.uk's new web page layout system. Without getting too technical and boring everyone to death (I'll save that for a post in our forthcoming developer blog), that means the masthead at the top, the footer at the bottom and some of the underlying setup of every new page appearing on the site, for example on the new Doctor Who site.

Barlesque replaces a system called Barley^* (hence is Barley-esque - aha), which was designed and built just after the millennium and is used on hundreds of sites, including this one. Barley was a great product for its time, but it uses some really outdated technology. (IE3 support? Table layouts? Nowadays that's comparable to using wattle and daub to build a house.)

Another thing Barley does is use technological restriction to enforce consistency of design [Still with us? - Ed]: the page content is nestled inside a big HTML table with a limited set of widths, the navigation has a particular structure to its HTML, and so on. One of the main lessons learned since (as taught to me by Paul Hammond, its original lead developer) is that if you try to restrict designs like this, they will find new and unintended ways round your roadblocks - "Nature finds a way" as Jurassic Park so nearly says.

And that's exactly what happened to Barley: In updating it last week (to make it more visually consistent with Barlesque), we've counted literally dozens of variants and half-copies of Barley that sites have been forced to make over the years (including one on our DNA platform^** to which the Birtspeak column refers).

This causes a huge maintenance headache for us techies, so when the UXD (User Experience and Design) team devised a new "visual language" for bbc.co.uk (as discussed when the News and Sport redesign launched), we set out to build Barlesque to be as simple and flexible as possible in its implementation.

We launched the first version two months ago, and, while we're still improving it, it already includes:

• Valid, semantic XHTML and CSS - so it contains less code and is more accessible than its predecessor.


• Support for many languages, useful behind the scenes technical tools and visual customisations. (Teal-coloured navigation? No problem. White footer? Sure.) That said, it also has...


• A shallow learning curve for developers, since it works off-the-shelf, with none of the display configuration set up.


• Easy implementation for Indies (the source of many of the Barley variants) since it only requires one line adding to the Apache configuration to get going.


• Finally, the ability to deliver other pan-bbc.co.uk systems, such as user authentication, and surveys, which in turn makes them easier to implement and maintain too.

Bundle this all together, and we think that Barlesque effectively removes the need for sites to make their own copies of the layout system. That means greater technical and visual consistency, quicker updates, and best of all, frees up precious developer time to work on more exciting things!

At least, that's the plan - watch this space.

^* And as for Barley, that was named after a character from Charlie Brooker's NSFW spoof listings magazine TV Go Home, which gave rise to a Channel 4 sitcom called... Nathan Barley.

^** DNA is the system we use to power our messageboards and several of the BBC's other community-based sites like H2G2; the names DNA and H2G2 are derived from a British writer and one of his creations.

Mat Hampson is Senior Client Side Developer, BBC FM&T Intrernet Group.