Sean Conklin, WooCommerce Freelance Developer in California, Sean@CodedCommerce.com, vm: (818) 835-5960
Cart
My account

Headless / decoupled architectures

09/28/2018
Train cars coupling brackets connected together

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.

34.2007784-118.6153824

Share this:

  • Mail
  • Facebook
  • LinkedIn
  • Reddit
  • Twitter

Need help?

Request your free introduction call

Contact form
close

Search this site

Blog categories

  • Blog (87)
    • Events (11)
    • Marketing tips (26)
    • Official blog reposts (10)
    • Popular (9)
    • Technical tips (58)
    • Videos (12)

Product categories

  • Services44 products
  • WooCommerce code snippets261261 products
    • Back-end code snippets7070 products
      • Admin interface4949 products
      • Run-once2121 products
    • Front-end code snippets163163 products
      • Email notifications1818 products
      • Cart2424 products
      • Checkout2828 products
      • Elementor code snippets99 products
      • JetPack code snippets44 products
      • Navigation menus22 products
      • Payments66 products
      • Product pages2929 products
      • Search88 products
      • Shop and product categories1818 products
      • Storefront theme1717 products
      • User accounts2323 products
    • Site-wide code snippets4242 products
  • WooCommerce plugins44 products

Copyright © 2018-2023 Coded Commerce, LLC. Privacy policy
Automattic Inc. owns and oversees the trademarks for Woo™ and WooCommerce®.