Architecture Of A Composable eCommerce Store Using Elastic Path

At McKenna Consultants, we’ve recently been building a multi-lingual, multi-currency, global eCommerce store for the business-to-business sale of engineering components. The new web store replaces a legacy, bespoke web store that has been built up over a decade, but is a little long in the tooth now! The business requirements for the composable eCommerce store are complex, including highly-configurable complex products, sophisticated search and integration with ERP systems.

We looked at various monolithic solutions, but all of them required making a compromise somewhere. Sometimes a vendor didn’t have a very good CMS capability or a flexible enough search system, for example. All of this pointed us in the direction of composable eCommerce.

What Is Composable eCommerce?

Composable eCommerce is an extension of the concept of microservices, where a set of loosely-coupled services from different vendors can be combined to create highly cohesive eCommerce solutions. For example, we could take cloud-based systems and combine them into a single, fantastic eCommerce web store. These systems might include:

  • Elastic Path eCommerce
  • Fredhopper Search
  • Auth0 for identity management
  • Tacton CPQ
  • An ERP system for pricing and order placement
  • GoSquared Forms
  • Google Analytics
  • InRiver PIM

What Does Elastic Path Do?

The role of Elastic Path Commerce Cloud in all of this is to provide a cloud-based API and state management system for the core eCommerce functions such as creating baskets, checkout and payment integration to name a few. Elastic Path doesn’t provide the customer-facing user interface; it only provides the microservices required for eCommerce.

The Front End

The Front End for the web store is a simple React front end built using Gatsby. Gatsby is a fantastic React framework that ensures a very high performance web store by executing code at build time to build pages. For example, in a traditional web store, there would be a single product page (e.g. product.aspx) that would retrieve product information at runtime from various APIs and databases and build all the information. This is a flexible but slow approach. In the modern world where SEO is increasingly based on page speed, this approach is no longer good enough.

The Gatsby approach is to generate a page (from the PIM) for every product at build time, so that when the user views the page at runtime, there is little or no database or API access. This makes the web store run significantly faster as well as making it more resilient and more secure.

Back End For The Front End

Gatsby can’t build everything up front though. Some information is dynamic and does require runtime API calls. Searches occur in real time (using Fredhopper), and pricing and availability are also retrieved in real time. However, some of the third-party services we want to use (for search, eCommerce etc) use secure APIs (e.g. with a username and a password). We can’t put these secure credentials into our front-end Javascript, so instead we create a “Back End For The Front End” (BFF).

The BFF is the glue that holds everything together. It is a server-side API designed to provide all the functions that the front end requires. It is a very thin façade for the actual microservices that do the work and exists purely to satisfy a security requirement (there are no credentials to be stored in Javascript).

The front end talks to the BFF and the BFF talks to the other services. This does add a little bit of latency, but it provides the required security level. The Front End and BFF are typically hosted on exactly the same subdomain so that cookies work properly and there are no domain-related issues.

Graceful Fallback During Maintenance or Downtime

Not all of the microservices used by the eCommerce store are as reliable as one may like. ERP systems do not always cope well under load and sometimes have to go down for maintenance. As we have a BFF, we can deal with service quality problems there.

Each operation (such as retrieve price) may have a short timeout period after which the BFF will stop contacting the third-party service and instead return an “unknown” response to the Front End. The Front End can then return a suitably friendly message asking the user to be patient. As all of this activity takes place asynchronously, the web store remains fast and responsive, even though one or more of its microservices may be having quality of service problems.

No Database

A highly desirable side-effect of the composable eCommerce approach is that we ended up with no customer database to run the web store. The lack of a database has significantly reduced the support burden of the solution.

  • All state is provided by the third-party services
  • Elastic Path provides baskets, accounts etc
  • The ERP system stores orders
  • Users are managed by Auth0

This has been a whistle-stop tour of what a composable eCommerce solution might look like and how it can benefit an organisation, but there is a lot more to building a web store than we have covered here. If you would like more information about software integration or digital development, please contact us or fill in the form below.

Nick McKenna
Since 2004, Nick McKenna, BSc, MBCS Biography has been the CEO of McKenna Consultants. McKenna Consultants is a bespoke software development based in North Yorkshire, specialising in Cloud development, mobile App development, progressive web App development, systems integration and the Internet of Things development. Nick also holds a First Class Degree in Computer Science (BSc) and wrote his first computer program at the age of nine, on a BBC Micro Model B computer. For the last 21 years, Nick has been a professional computer programmer and software architecture. Nick’s technical expertise includes; Net Core, C#, Microsoft Azure, Asp.Net, RESTful web services, eProcurement, Swift, iOS mobile development, Java, Android mobile development, C++, Internet Of Things and more. In addition, Nick is experienced in Agile coaching, training and consultancy, applying modern Agile management techniques to marketing and running McKenna Consultants, as well as the development of software for clients. Nick is a Certified Enterprise Coach (Scrum Alliance), SAFe Program Consultant (SAI), Certified LeSS Practitioner (LeSS) and Certified [email protected] Practitioner. Outside the office, Nick is a professional scuba diver and he holds the rank of Black Belt 5th Dan in Karate.