http://apvideohub.com

I used: OO Javascript | Unit testing | HTML5 | CSS3 | LESS | Selenium IDE

Associated Press is a 150 year old institution, the largest and most trusted newsgathering operation in the world. Their video archive includes over 1.5 million global news and entertainment stories dating back to the beginning of the 20th Century.

Their brand new site, AP Video Hub offers curated archive content mixed with breaking news topic pages, for preview and download in a variety of broadcast-ready formats. I was the front end developer on the project.

The beta version of the site has just gone live (April 2012) and is already generating major interest from media organisations.

Performance

The primary aims for the interface were speed and simplicity. We used server side templates and minimised the initial payload of Javascript, CSS and thumbnail images to make the above the fold render time as fast as possible. Other assets were lazily loaded after initial render, eg. instant search index, below the fold thumbnails, and the two remaining main views, to give a highly responsive experience.

Progressively enhanced single page app

I didn’t want to take the performance hit of rendering the initial page load using Javascript templating, so used server side templates (Razor). The 3 main views are switchable using left hand nav links.

I’d previously seen the History API used in the great Github interface with real URLs and ajax-powered view switching. Where the browser supports the History API, I intercept the any clicks on the links and reload just the main content panel using Ajax. The Ajax call is routed to the same server side template that’s used for the whole page load, and only the section of that template for the main content area is returned.

This setup gives the following benefits -

• progressive enhancement eg. the nav links function normally if the browser doesn’t support javascript or the History API, and reload the whole page with the changed URL / view. If History API is supported, you get ajax content switching
• the History API means the URL changes as you switch views so you can bookmark / revisit.
• speed – only a portion of the page is reloading so it’s very fast
• you only need to maintain one set of server side templates, and either the whole template is returned eg. if the user has hit a URL directly; or if an ajax request part of the template is returned

Code structure and testing

I used techniques I’d learnt on Betfair’s site rebuild to structure the code in a modular fashion.  Webstorm is firmly my favourite IDE now and brings built in Javascript unit testing with jsTestDriver. Simple to hook in Jasmine, and write tests easily, spawn test browsers and run the whole suite without leaving the IDE.

I also wanted to find a way to get higher-level functional test coverage and picked up Selenium IDE for the first time. I rate it better than Selenium 2 / Webdriver as a tool for developers to generate and run tests quickly, which I think is critical for test coverage to keep pace with development.

The site is iPad and iPhone compatible – an HTML5 video container used instead of the default Silverlight.

It’s been a great contract to work on – a talented team and a trusting and accessible client in AP. And I’ll miss the daily dive into Camden’s food stalls :)