Chronicling our journey from building monoliths to decoupled, and how we built a better page builder experience in the process by incorporating the ant design system.
When we started the journey from monoliths1 to decoupled2, we didn’t realize what a complete change it would be. Two years later, we’re more excited than ever and more certain as well: the future is headless. The reasons we feel that way align with our initial research: faster, more secure, increased flexibility. However, as we’ve come to learn, it also opens up a whole new world of possibilities with regard to frameworks we can integrate with.
The most exciting of those being the Ant Design System. This open source design system, when integrated with Figma, a token workflow, and Storybook on the frontend, and likewise integrated with WordPress, Gutenberg, and Graph QL on the backend, solves a problem that has been around as long as websites have been being built: how do we ensure that what is designed in a design program, can be built pixel for pixel on the front end?
But that’s only the beginning. Here’s a peek at some of the other problems it solves:
- Unique styles per break point, managed in the Gutenberg Editor
- A completely component based management experience, allowing your content creators to experiment with new strategies for presenting their content, without requiring developer assistance.
- True guardrails for your brand. Content editors are no longer editing frontend code, they’re editing content and display instructions sent through an API that are rendered perfectly and in a higly performant and secure manner into the front end via Next JS and React. Behold, the perfect page building experience!
- A true library of design components, no more templates.
This is the beginning of a new era in web design and web development. Throw away your clunky WordPress page builders and embrace the only way sites will be built a few years from now, or perish and turn to dust, these are your only options.
Footnotes:
- Monoliths – refers to sites built with your front end and back end in a single code base. For instance, a site built completely on WordPress or Shopify.
- Decoupled – refers to a site built with a separate application for front end and backend. We use React with Next JS for our front end application. For the back end, we use WordPress or Drupal, with Gutenberg as the editor for both.
