What’s under the hood of the new Headless Torchbox.com PWA?

We wanted to give you a tour of the (flashy) tech under the hood of our new Torchbox.com site.

The stack:

• Wagtail for content management
• ReactJS for the front-end (with Storybook to manage the front-end components)
• Gatsby, the static PWA (Progressive Web App) generator to serve static sites
• Netlify to host the site

Content management with Wagtail

First up, we’re using Wagtail to create, manage and store all our content produced by the Torchbox team.

Wagtail has everything you need from a modern CMS and Wagtail’s new rich text editor based on Draft.js (Draftail) makes the job of adding content to Wagtail a breeze, with keyboard shortcuts and the ability to copy directly from Google Docs or Word without losing your formatting (and without pasting nasty cruft)

Off with its head!

We’re using Wagtail as a ‘Headless CMS’. This means content is produced in Wagtail, but published to a Javascript front-end (in this case React, which has revolutionised front-end web development over the last three years).

We’ve worked with Wagtail in a headless environment for several clients - we’re doing so right now with the UK Department of International Trade and New York Public Radio but we were particularly keen to use Torchbox.com as a testbed for Wagtail with GraphQL.

Component based design system

Our standard approach to ensure we deliver a scalable design that supports maintainable and consistent implementation is to produce a pattern library – an abstracted set of reusable design styles and components. For Torchbox.com, we’ve used Storybook to manage and review our React front-end components which helped us work faster.

Static PWA generator

We were dying to build a Wagtail-powered site that integrates with Gatsby, the open source static PWA (Progressive Web App) generator.

This bit of the puzzle is a little harder to get your head around... but in essence, it's a super modern approach to generate static HTML sites. “Modern you say?! Sounds pretty old skool.” Well, yes but... a Gatsby site can be highly optimised for performance (no page rendering). It can be hosted on the cheapest and simplest of web server setups. It offers a really slick, app-like user experience. And best of all, it provides total data security by being completely separate from the underlying CMS - even though content is still CMS-managed. This blog does a good job of describing the approach.

Gatsby is also designed to consolidate data from multiple sources (CMSs, CRMs, third party APIs and databases), and we think there are going to be a lot of relevant use cases with our clients.

Netlify

We’re hosting the Gatsby site on Netlify, which provides an environment that automates our code to create a high-performance, easily maintainable site. And, it’s cheap.

The benefits

• Gatsby has delivered a super fast digital product
• Updating the design in React components is easy & cost-effective
• We’ll get access to cool PWA capabilities (offline access etc.)
• Massively reduced hosting costs
• Working on a headless site means the back-end developers focus on building the CMS and front-end developers focus on the front end - good separation of concerns (this is especially relevant for big software engineering teams)

The draw backs

The ‘Headless’ approach is not ‘the golden ticket’ that will solve all of the web's challenges.

• It introduces complexities. For example, how does previewing work? We had to invest time to extend Wagtail's API so that the preview function would work in a headless context (this was time well spent though as we implement these learnings on our client projects for the Department for International Trade and New York Public Radio).
• It can slow down the process for generating new templates without input from specialist Javascript developers.
• The learning curve for Gatsby was also pretty tough and slowed down the project by a few days.

Conclusion

We’ll let you decide.

Get in touch if you’d like to find out how we can implement the latest tech on your project.

Check out this blog by Helen, our front-end team lead, if you'd like to read a more detailed technical write up of the project.