Diners, Drive-Ins, and Decoupled Websites

Rohan Bassett
Mar 7 · 4 min read

As a digital agency, we work with our clients to best understand their needs and determine an appropriate technical solution, and with recent changes in the digital landscape, there can be many techniques and tools which don’t have the mindshare of more traditional methods.

One of the more frequent questions we receive when working on proposals for new projects is the distinction between a “decoupled” and a traditional website build. While decoupled websites are quickly becoming more common, they’re still an alternative offering that need a little bit of explanation to truly understand.

Consider the difference between eating in at McDonald’s, or using the drive-through. When eating in, you have to follow certain rules, and you’re limited by what they offer. If you really like sriracha on your burger, for instance, or you want to pair fries with champagne, you’re probably out of luck. However, if you use the drive-through, you can easily take your food home and hack your meal into something truly special. Whichever way you choose to order, it’s still the same food coming out of the same kitchen. Using the drive-through, or ordering in, just gives you a bit more flexibility in how you choose to consume your food.

The same logic applies to websites. Traditionally, WordPress sites have been designed like dine-in restaurants, where the entire experience is managed inside a single location. Visitors to your website sit in the dining room, and food is delivered from a kitchen that’s just a single swinging door away. There’s nothing wrong with this approach, and for many purposes it works very well; however, it lacks flexibility. You can’t easily renovate the kitchen, for example, without people going hungry in the dining room. If you want to renovate the dining room, the kitchen will have nobody to serve food to. And if you happen to find bugs in the dining room? There’s a good chance they’re in the kitchen, too.

The solution? Keep the kitchen and dining rooms separate. By decoupling the kitchen from the dining room, it’s a lot easier to create an amazing dining experience that will grow to match your needs, and give you flexibility to take advantage of new expectations.

You might be wondering — possibly for the first time — where the sriracha and the champagne fit into this metaphor. The easy answer is that they represent customisation and personalisation for the user. By decoupling the kitchen from the dining room — or, the back-end from the front-end — it’s a lot easier to create customised experiences for the users, who don’t all necessarily have to use the same chairs, cutlery, or condiments.

Decoupled websites are a fairly modern development, and are gaining traction as front-end builds are rapidly becoming more sophisticated and customised. Just as Uber Eats and Deliveroo are changing the way restaurants run their business, so too are recent developments in React, Vue and Angular giving developers new ways to create engaging, performant and accessible websites that take advantage of this decoupled approach to website development.

Crucially, this approach isn’t an all-or-nothing solution. Just as restaurants can have a dining room, a drive-through window, and somewhere for delivery riders to pick up food, websites can still use a frontend closely connected to the backend, while simultaneously exposing the CMS data for other services using an API (Application Programmable Interface) — a way in which one platform can talk to and integrate with another platform (represented in this increasingly-convoluted metaphor by, let’s say, the drive-through window). This approach allows the client to scale their website solution over time, and easily extend their platform to include multiple websites drawing data from the same source.

We’ve developed several decoupled websites in the past year, and each one led to greater efficiencies in development, hosting, and maintenance over time. Post-launch changes are much easier to manage when the front- and back-end code is less tightly connected, and there are many more possibilities involving third-party integrations (the best work is, as always, the work you don’t have to do yourself). There have, of course, also been projects which would not have benefited from the advantages of a decoupled approach — we spend a great deal of time at the beginning of a project assessing the current and future needs of the client to determine which solution will suit existing needs without sacrificing future growth.

At 24 Digital, we keep a keen eye on the latest developments in tech, and brainstorm ways in which they can create new possibilities for existing and future clients. If you’re excited about working in an environment that values creative thinking, experimentation, and occasional hack days for trying out some left-field concepts, we’d love to hear from you!

Rohan Bassett is a Developer at 24 Digital, a digital product design agency based in Melbourne, Australia.

About 24:

Instagram — @24_digital

Linked In- https://www.linkedin.com/company/24digital

Website — 24digital.com.au

We want to work with ambitious people & businesses to create amazing things.Does that sound like you? Say hello — hello@24digital.com.au

24 Digital

Discover the inner-monologue of the team from 24 Digital - a group of creative technologists looking to enhance the human experience through digital solutions.

Rohan Bassett

Written by

24 Digital

Discover the inner-monologue of the team from 24 Digital - a group of creative technologists looking to enhance the human experience through digital solutions.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade