The Power of Public Media

Published: 2 years ago

Antiques Roadshow: How we used Node.js to build a better website

Here at WGBH, we recently launched a large portion of a newly redesigned and rebuilt Antiques Roadshow website. Roadshow is one of PBS’s most popular series, and the website is a treasure trove of information around the program, including an appraisal archive of everything that’s been appraised throughout Roadshow’s many seasons. The site hadn’t seen significant updates in several years, to either the design or the application behind it. It was due for some work.

For our development team, rebuilding Roadshow’s online presence was a big undertaking that involved Roadshow’s content management system, a RESTful django API and Node.js. Throughout the process we learned a lot about how to iterate quickly and work together without a heavy waterfall process. One big part of that success was our use of Node.js to act as a web server. I’d like to share a bit about how we used Node in this way.

When we began the project, we knew we would expose Roadshow’s data as a content API because Roadshow uses an internal content management system that doesn’t have an easy way to expose data to the outside world. Working within this limitation, we decided to build an API (written in python) to bring Roadshow’s program data to the web in a structured way. The API works by sucking data into a django application from Roadshow’s internal content management system, and exposing it to the web as a RESTful content API. Once we’d built the content API, we turned to the question of building a website on top of it. This is where Node.js came into the picture.

The idea to use Node.js as a light-weight web server began a few years ago when I read a post about a novel way to use it in web projects. The post, by Nicholas Zakas, a well-known JavaScript engineer, is called “Node.js and the new web front-end”: http://www.nczonline.net/blog/2013/10/07/node-js-and-the-new-web-front-end/ . It’s a few years old but still worth a read. He argues that a lot of what happens on a web server is actually front-end logic – things that directly relate to the user experience – but that traditionally fall under the purview of back-end developers – folks who are usually more concerned with data than with the way the website handles that data.

We chose Node.js to deal with everything we called “UI-related tasks”. Now, typically, most folks working in the web think about the user interface as the browser environment only, i.e. HTML, CSS and JavaScript. But that isn’t strictly true. A lot of UI-related logic also happens on the server, such as routing, templating and authentication workflows. Our team took the step of grouping all UI logic together under one proverbial roof, whether it happens on the client (browser) or the server.

Using Node for this purpose turned out to be a really good fit for our problem We’re dealing with short, stateless transactions: Take a request for a page, query the content API for the relevant data, such as details of an appraisal, build a web page and send it back to the user. Node excels at this sort of task. And what’s more, Node is just JavaScript, so the environment is one that already feels somewhat comfortable to most front-end developers. This makes building things a bit easier and helps the front-end developer be more productive because there’s no mental switcheroo to a different language or paradigm for handling server work.

We found several other advantages to setting things up this way with Node, too. It decouples Roadshow’s data – and all the business rules around it – from the way the user experiences that data. It meant we could rapidly build, test and iterate the design and other UI pieces, such as templating and routing, without waiting for backend work to proceed or being constrained to the assumptions of back-end developers who are mostly concerned with data and rules around it. It also let the back-end developer focus more on real business logic problems, like exactly how to format an Appraiser’s name or how to calculate the median value of an appraisal object.

I’m excited by our success with this model, and I’m excited to see how this approach will pay dividends in the future. The next time we want to redesign the Roadshow site, we can work on the house without having to pull up the entire foundation. That’s all thanks to using Node as a web server and building an API to use Roadshow’s data in a simple, logical way. Moreover, now that Roadshow’s content is in a structured API, other applications besides the website can use it. In fact, we’ve already built a play-along game around the same API data that the website uses. See it in action here: http://www.pbs.org/wgbh/roadshow/games/playalong.

We hope everyone enjoys the new Roadshow website and getting a little peek under the hood!

Jesse Weisbeck – Senior Developer – WGBH Digital – @jlweisbeck

 

Have a Comment?

Some HTML is OK