Headless / decoupled architectures

I had a great time at WordCamp Los Angeles 2018 this past weekend. One session I attended inspired a blog post about headless WordPress and WooCommerce sites with a decoupled front end presentation layer. In the session presented by Roy Sivan, he discussed this technique in use on an in-progress project for client Airstream.

Decoupling could refer to any API driven integration. We typically use this term when describing functional user interfaces that are custom developed and hosted by separate systems and often separate programming languages. In this case the front end shopping cart site was written in ReactJS.

Another useful technlogy that was presented was the use of GraphQL with the WordPress ReST API on its WooCommerce methods. This technology helps the API work faster and more efficiently through buffering and breaking down the data into smaller queries. I like to think of it as a form of caching and a very interesting idea. Of course caching, in particular Redis object caching, will still be useful inside WooCommerce to speed-up the administration UI back-end and managed hosting with full-stack support is still recommended.

There is no need to decouple WooCommerce from a front end to handle scaling. There are myriad managed hosts offering full-stack support WooCommerce. They can prove traffic handling based on load tests and case studies in their arsenals. That said, development teams may have their own reasons for the architecture, such as a healthy staff knwoledge of ReactJS and mobile friendly websites and apps.

There are some drawbacks to decoupling WooCommerce. For instance, payment gateways often use PCI compliant iFrames or AJAX tokenization methods which are designed to be presented by WooCommerce to the site visitors. In a headless use case, your front end application (the head) would need to integrate with the same payment gateway as you are using on WooCommerce and handle the PCI compliant tokenization and communications itself, then relay the payment token and transaction references over to WooCommerce before marking the order as paid.

Integration with third party services is here to stay. So is caching to speed-up sites by deciding what all should be preloaded or generated into cache and where that should live. While I can’t necessarily recommend decoupling WooCommerce from the front end for most users, there are excellent arguments for this technique in specific use cases and I am excited by what teams are doing in this space.