Hero-1

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 for eCommerce 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.

m-intro-service_icon-2
Technology

SAP composable storefront

Tailwind CSS

Storybook.js

ImageKit

SAP Commerce Cloud

m-intro-service_icon-4
Vertical

B2B

Manufacturing

01

How did the project start?

image 113-1

I got tired of showing clients the official demo of the SAP composable storefront. I don’t mean it’s bad. I mean it doesn’t look as good as the technology behind it and may cause false impressions. It also suffers from poor performance.

I knew the source code of composable storefront, and it was clear to me that we could do something better with it. So, we started an internal project. As our design system, we chose an open-source B2B UI template called B2B UI Template for eCommerce that was created by the Divante product design team. Based on that, we created a product backlog and estimated the required workload. Then we prepared a roadmap and followed it throughout the project.

Mateusz Ostafil, composable storefront Technology Evangelist

Check out the demo page

image1 (1)

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.

02

How did we tackle the tech?

It’s all about responsiveness and usability

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.

m-intro-service_icon

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.

m-intro-service_icon-2

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.

image7 (1)

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.

triangle-dots-1

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 for eCommerce 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.

image4 (1)

 

03

What did we achieve?

A good-looking, snappy storefront

v2

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.

View the demo page

We believe that we’ve hit the upper limit of what you can do with the SAP composable storefront. Further improvements would require modifying the composable storefront source code. In most cases, you should avoid that for maintainability reasons.

After finishing the project, we gathered all the team members and evaluated the technologies used in the project. This gave us valuable insights that help us decide what and when to use them in future projects. We also compared our initial estimations with the actual time
spent on the tasks so that we adjust our future
estimates accordingly. 

In the end, besides having a quick and
eye-catching demo of the SAP composable storefront, we also have a good starter project to bootstrap new projects quickly. It’s also a representation of our quality standards.

Need help with
digital transformation?

We’d love to hear about your project.

Contact us
m-form-banner_placeholder-1