“There is no better time to move to headless and decouple your storefront. If you are an existing SAP Commerce customer, the move towards SAP Spartacus is a no-brainer decision that should be part of your immediate technology roadmap.”
Technology should be an enabler for better customer experience and not a constraint. Do you agree?
Often we engage with clients who are struggling to push the customer experience further due to technical complexities raised by engineering. A redesign of the Product Detail Page (PDP) that takes 3 months to deliver due to software upgrades and technical dependencies. Multiple features cannot be introduced in parallel because of code conflicts and merge issues. Full website regression testing is required when adding even the smallest features. The website has to be taken down for a two-hour-long deployment process which makes changes even slower and more costly. Everything seems to take longer due to technical issues that have no relevance to the customer experience at all. Sound familiar?
In software engineering, this problem is often caused by tightly coupled software that becomes difficult to change because every change has a side effect. A domino effect so to speak. A simple way to solve this problem is to identify the relationship between software components and decouple them to reduce friction. For example, moving the display of a piece of text should not require a database change. Filtering and loading more products should not require a full page reload. Changing the frontend should not require two-hour downtime deployments. This is exactly what headless storefronts attempt to solve.
By decoupling your storefront from your commerce software, you allow your front end to be shackle-free from the pieces of software the customer does not see or care about. Headless architecture is all about taking the software that relates to customer touchpoints and separating it from the rest of your system. In theory, this allows you to isolate customer experience changes, and provide those enhancements to your customers much faster.
As commerce businesses scale, this problem becomes more pronounced. Many SAP customers (hybris then) who started 5-7 years ago often hit this problem today. SAP’s response to this growing dilemma was the introduction of their own headless storefront called Spartacus.
You can read more about our journey with our first Spartacus implementation here. For those who want to know more about the benefits of headless commerce for SAP customers, keep scrolling.
Technical Benefits of Headless Commerce
A few ways one of our clients benefitted from headless commerce are as follows:
Flexible Front End CMS Components
Most marketing content is the same from a data viewpoint; they require images, text and form inputs. Tacit Knowledge developed a flexible and generic CMS component architecture, which allowed our client’s marketing team to create multiple components in the storefront and treat the CMS as a content repository. Our client can now focus on the user experience instead of worrying about technical dependencies. Integrated with SmartEdit, it allowed the business to have a seamless drag and drop experience that is cohesive and easy to use. This means changing the position of the text, resizing banners, creating new carousels and updating the look and feel of the website no longer require database, Java or XML config changes, cutting out unnecessary technical constraints.
Perceived Performance using Single Page Application (SPA)
According to Google, the probability of the customer leaving the page increases up to 123%, the longer the page loads.
However, speed is subject to the laws of physics, and optimization is limited on balance with media-rich pages. This is where SPA architecture becomes key. Spartacus uses SPA technology via Angular out of the box; it only loads portions of the webpage that are changing rather than reloading the whole page itself.
Compared to a traditional website, the SPA architecture of Spartacus means that we load less data for the customer after subsequent page loads. Combined with Progressive Web App (PWA) technology like Service Workers, we can cache this data allowing for even faster page load times for returning customers. For a brand selling high-end goods, where customers revisit the product pages multiple times before purchase, SPA architecture allows the customer to revisit and compare products in sub-seconds due to minimal page loads and server round trips.
Faster Engineering Processes
Since Spartacus is a headless storefront, engineers no longer require SAP Commerce to run in their local environment when making storefront changes. Java applications are memory intensive, and slow startup times are common. When a decent amount of sample data is required, this makes the build time even slower. Therefore, fixing issues in production can take a long time since setting up production-like data is a slow and cumbersome process.
Spartacus solves this problem by allowing engineers to point a local storefront to a running instance of SAP Commerce. It could be a shared test environment or even the production environment! The critical point here is that sample data setup, and building hybris locally is no longer a bottleneck. A developer can quickly point to a shared instance of SAP commerce and fix any issues in the storefront much more rapidly compared to a traditional commerce monolith.
Since Tacit Knowledge is a DevOps organisation, we decided to extend this further by creating smoke environments where we can deploy the storefront independently. This reduced the overall build time since it no longer waited for the Java Artefacts to build.
Parallel and Distributed Engineering Teams
Headless architecture is a better fit for parallel and distributed teams. Tacit Knowledge has engineers working from 4 different continents (Europe, South America, North America and Asia) and as many as seven countries, not including other third parties. Headless commerce means we can agree on ‘API contracts’ among different teams and our engineers simply develop against the approved contracts.
The SAP Spartacus team also has a remote open-source culture which fitted in well with Tacit’s engineering best practices. Tools such as Slack, GitHub, PR workflows etc. are shared remote practices and tools that allowed both SAP and Tacit Knowledge to be productive.
Distributed technology supported by distributed engineering processes provides the client with choice and the ability to diversify risk and run parallel workstreams that are easy to define and measure.
In short, headless commerce allows clients to take advantage of global talent distribution, diversify risk and measure software at a more granular level. A model that provides more options and better economies of scale.
Headless commerce is here to stay. It’s not a buzzword but an actual architectural paradigm that solves real business problems. There is no better time to move to headless and decouple your storefront. If you are an existing SAP Commerce customer, the move towards SAP Spartacus is a no-brainer decision that should be part of your immediate technology roadmap. You’ll benefit from a better customer experience, front-end flexibility, faster engineering process, and more efficient distributed teams. If you’re interested in realising the significant, immediate and tangible benefits of a headless implementation, please reach out to us at firstname.lastname@example.org
This article is written by Kane Balagtey—Front-End Consultant for Tacit Knowledge leading the Spartacus storefront integration for re-platform projects.