Introduction
The word ecommerce colloquially known as “online shopping” rings bells and is attributed to deeper discounts, wide range of selection and comfy deliveries. Ecom today is powered by rich and dynamic front ends built on modern tech stacks like React, Next and Angular. Headless and MACH architecture are the order of the day and they have enabled the flexibility of the front end. In this article I will discuss the flexibility brought in by modern ecommerce front ends and will compare some of the off the shelf platforms from a front end perspective.
Modularized front ends
Having started my ecom journey with Oracle ATG, if business had a requirement of changing the page layout ex:Adding a new carousel beneath the existing home page banner it would have meant a complete code change and a possible down time, it was the reign of the MVC architectures. Oracle commerce cloud(OCC) introduced design studio which gave non-technical users the power to configure front ends like a Jigsaw puzzle.
Above is a screenshot of the order confirmation layout with modular design where the new components like banner and notifications can be added with a simple drag and drop by business users with zero coding experience.
The process starts by the business users deciding the kind of components and their behaviour, developers build the components according to the specifications in React. Shown in the above screen shot is an example where the business requirement is to allow the border thickness to be configured. The kind of attributes that can be configured varied and not be limited to the cssproperties.
OCCdivides the layout into 12 column grid where it can be subdivided into smaller columns but should add up to 12. The 12 column grid occupies 100% of the screen width while rest of the column sizes occupy the screen proportionately.
When the page in the storefront renders, an API fetches the layout structure in the form of JSON and the core libraries in the frontend render the layout accordingly. The json contains the hierarchy of the components, custom properties and the css classes which specify the width of the component and allied attributes, data is injected into the layout from API calls like cart, profile information.
Competitors:
OCC is not the only platform in the market offering the flexibility and a lot of platforms will follow suite.
Salesforce commerce cloud, the market leader has also introduced similar functionality a few years ago and called it the “page designer”. Personally, I felt that the page designer much more complex to build and less flexible when compared to the design studio of OCC. I am yet to investigate the changes they brought in with the headless version with the OCAPIApi’s.
Adobe commerce is no doubt a robust platform and never missed being in the leaders space of the Gartner’s Magic quadrant. It also has a feature known as “page builder” but the flexibility of the same is very limited with PWA studio, the headless version of the platform. Only, the home pagecan be configured using the feature. It is yet to play the catchup game with respect to the modularity of the headless front ends.
Takeways:
Though these are not exactly microfrontends, they are very close to what it envisions. Developers can work in isolation on their respective piece of the jigsaw and have very few common files.
It has given business users the power to configure front ends and change the page layouts without any developer intervention while developers can focus more on code.