Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ


Choose your language

InfoQ Homepage News The Guardian Creates a Newsroom Collaboration Tool Using Serverless, React and GraphQL

The Guardian Creates a Newsroom Collaboration Tool Using Serverless, React and GraphQL

This item in japanese

The Guardian created Pinboard, a discussion and asset-sharing tool integrated into a variety of content management platforms used by the company. The solution uses a range of technologies, including Typescript for coding the business logic, different serverless services for code execution, API endpoints, and GraphQL server, as well as AWS RDS (PostgreSQL) for storage.

The company uses a number of editorial tools while producing content, including Composer (content management system) and Grid (image asset management system). Tom Richards, senior software engineer at The Guardian, explains the need for creating a collaboration tool for the newsroom:

For the past few years, a lot of digital communication in the newsroom had been happening over email and chat – crucially outside our editorial tools (tools being the place where the content people are communicating about is actually being produced) which creates the potential for confusion and mistakes given the pace of the news agenda. Meanwhile, there was a general feeling that pieces would benefit from preparing assets (images and video) earlier in the production process.

To address the needs of the editorial staff, a small team has been working on a tool that would closely integrate with existing web-based tools to provide messaging and asset-sharing functionality. The goal was to embed the collaboration functionality into the existing toolset without creating a new standalone tool so that editors could collaborate in the context of content items being produced.

Pinboard uses TypeScript for client, server, and infrastructure code. The client application was created with Preact and Emotion and bundled using Webpack. It uses Apollo as a GraphQL client library. On the server side, AWS Lambda is used to execute all business logic, and AWS RDS for PostgreSQL for storing user and item data. AWS AppSync, AWS’ managed GraphQL service, is used for abstracting over various data sources, including Postgres database and other systems via APIs. AWS CDK and a custom CDK wrapper are used for infrastructure provisioning and esbuild as a build tool.

Pinboard Architecture (Source: The Guardian Engineering Blog)

The architecture of Pinboard relies heavily on serverless components, with Lambda functions responsible for a range of different roles, including serving the client application to be embedded within the editorial tools, providing AppSync resolvers, delivering email (with SES) and web push notifications, data synchronization, and authentication.

Pinboard uses GraphQL to source and aggregate data from multiple sources to avoid coding a custom data aggregation layer, acting as an adapter facade for APIs. GraphQL supports not only queries but also mutations, which are operations for adding/changing data and hence are executed sequentially by GraphQL servers rather than in parallel, like queries.

The third operation type GraphQL offers is GraphQL subscription, which represents a long-lasting fetch operation with the client maintaining an active connection to the GraphQL server (most commonly via WebSocket) to provide near real-time notifications about changes to back-end data. AppSync supports all three GraphQL operation types and additionally offers the ability to define subscription server-side filters and subscription invalidations. It also supports Pub/Sub APIs, that support asynchronous message delivery via WebSockets.

AWS AppSync Overview (Source: AWS AppSync Website)

With some internal promotion, Pinboard is gaining more adoption at The Guardian, and the team is looking to deliver new features, including the ability to exchange notes about editorial pieces to avoid notes being added to the body with the risk of being published accidentally, as well as an improved workflow around producing/enhancing images to replace the process relying on email and attachments.

About the Author

Rate this Article