Diners, Drive-Ins, and Decoupled Websites

24 MAR. 2019 | ROHAN BASSETT

Back ArrowCreated with Sketch.
Illsutration – Abstract No Connection

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!

Follow us

Are you interested in working with us?

Whether you have a clearly defined brief or you're not sure wherein the problem lies; drop us an email, or give us a ring for a chat about where you are at and how we might be able to help you.

03 9005 0055