SAP composable storefront
B2B UI Template for eCommerce implementation in SAP composable storefront
SAP composable storefront is an official tool for building storefronts for SAP Commerce Cloud. Unfortunately, the official demo of the composable storefront didn’t match the exceptional technology behind it. Its performance didn’t meet the requirements of commercial business projects. We decided to leverage B2B UI Template designs to build a new demo.
We wanted to prove that SAP composable storefront is equal to the best front-end technologies available on the market and can match them with both appearance and speed.
Vertical
B2B
Manufacturing
.png?width=712&name=image1%20(1).png)
The main goal was to build a good-looking and well-performing SAP composable storefront demo site and a starter project.
Besides that, as an internal project, it was an opportunity to go a step further, experiment with the newest technologies, test different approaches, and validate whether they are applicable to potential commercial projects.
We decided to check how well SAP composable storefront can play with Tailwind CSS and whether it’s possible to use Storybook.js to present a component library.
Tailwind CSS is a relatively new open-source CSS framework. It takes a completely different approach compared to the popular Bootstrap framework. It aims to solve the scalability and performance problems of modern web applications. It’s quite controversial among developers, but it does its job well. SAP composable storefront uses Bootstrap by default, so replacing it with Tailwind was time consuming. The outcomes were pleasing, proving that in some projects, the cost of such replacement might be justified.
Another popular technology that we used is Storybook.js. It’s a tool for displaying and testing the user interface (UI) components in isolation from the application. Initially, it was built for React, but over time, it gained support for other popular frameworks, including Angular. It’s a great tool for collaboration between developers, designers, and testers.
It allows developers to create UI components before the whole application and all other dependencies are ready. They can also use it as documentation and see what components are already available. Designers can review the components and check the user experience. Testers can test the components in isolation.
.png?width=1999&height=993&name=image7%20(1).png)
It’s not easy to set up Storybook.js for SAP composable storefront because it lacks out-of-the-box support. Since we were building a completely new UI kit, we were able to do it in our project.
An image optimization engine and a content delivery network (CDN) are a must to achieve a highly performant eCommerce storefront. We used the ImageKit service, which encompasses both. We smoothly integrated it with our application, resulting in one of the biggest performance gains.
We used standard SAP Commerce Cloud, also known as Hybris, as our back-end service. Even though the B2B UI Template was designed based on the back end from commercetools, the SAP Commerce Cloud has a similar set of features, and we were able to smoothly adapt it.
.png?width=1999&height=960&name=image4%20(1).png)
While the official demo scored 30 in Google Lighthouse, we made it to 91.
The difference is tremendous. The demo is a raw build of the composable storefront with no optimizations applied, and that was our starting point. We used server-side rendering (SSR), progressive web apps (PWAs), and other optimization techniques to achieve our goal.
