Where BBC News developers blog about responsive design.

Opinions expressed on this blog are those of the individual contributors, and are not necessarily those of the BBC as a whole.

Colophon


Here’s the technical stack we’ve used to build responsive news.

Nb. BBC is a large(ish) organisation so we’ve already got a fully operational platform upon which to write applications, so I’ve not listed every last thing, just the tools and technology that we’ve selected to create our project.

Javascript

We use bonzo + qwery for dom manipulation and reqwest for xhr (we use runningskull’s fork with jsonp and error callback support), curl.js is our AMD loader and EventEmitter manages all the pub/sub events between interface components. Mostly these were chosen because they were very lightweight, hence suitable for low bandwidth services, and more geared towards a modern definition of browser support than tools like jQuery, YUI etc. The total javascript footprint, once concatenated with require.js for the project to date is around ~14kb + ~4.5kb (curl.js), which we are quite pleased with.

To help us test we use QUnitSinon.JS, and jshint to lint the code.

We wrote and contributed to the community Spassky, a simple test runner for our javascript.

CSS

We’ve used less to produce all of the CSS. Mark writes about how they are structured on our blog.

Our icon set (cf. css3 type) is generated via fontsquirrel.com.

The principal design work was done in Illustrator, whose vector format works nicely for previewing at different sizes on different devices.

PHP

The bulk of the page generation happens through the magic of PHP 5.3.2 on Apache with Varnish sat in front of everything.

For our prototype we used SilexTwig and Goutte, which had to make way for Zend Framework 1.x when it came to the production application development, inline with BBC standards.

We use Pimple for DI.

Testing

XHProfSiege and Tsung have all be useful to performance test the application.

All our features are documented in Gherkin DSL and we use Cucumber to execute these features as a test suite every commit to master. As an aside, we found this tool did not make it easy for the team to visualize and search through the feature files so we wrote Wally to help with that. For smaller projects with less custom requirements, Relish might suffice.

We use REST-assured, another BBC open source project, to mock our API service calls.

API

The journalism (the words, pictures, the editorialised indexes etc.) that makes up the majority of the site is sourced (by PHP, see above) from a set of internal APIs, the primary one being the ‘Content API’.

To store the news stories and indexes we use a Mark Logic XML Content Store and XQuery for document retrieval. This is abstracted via a Java/Spring/CXF JSR 311 compliant REST service. The REST API is accessible via HTTPS with an appropriate certificate. The API is designed as a generic façade onto the Content Store allowing XML data to transformed into JSON using Jackson and re-used in other BBC products. This service orchestrates XQueries and ensures that results are dynamically cached with a low ‘time-to-live’ (TTL) expiry cross data centers using Memcached.

More

There’s dozens of other critical code, systems, tools that teams across the BBC provide to make our lives easier, far too many to list here and it would be far too unfair to single any particular team out. Occasionally they will pop up on the BBC Internet blog to showcase their wares.