Frontend application for e-commerce shops

B. Braun SE operates several e-commerce shops built on SAP Commerce. The frontend to customers was made available in SAP Commerce via the accelerator in the past. When using the accelerator, JSP templates integrated into SAP Commerce serve as the underlying technology.

B. Braun is currently in the process of switching its product communication over to an omnichannel strategy. A new frontend application was needed to ensure a uniform user experience across all channels and touchpoints on desktop and mobile devices.

B. Braun was seeking to design a new e-commerce shop frontend application for its existing SAP Commerce system from scratch.

B. Braun was running a SAP Commerce On-Prem system that managed product information for several closed B2B e-shops and frontend applications. However, because the frontend systems were quite old, they did not to provide key functionalities such as usability, performance and responsiveness. All frontend applications were deeply integrated into the current backend and highly customisable via the backend configuration settings.

In order to provide a much better customer experience and greater flexibility, B. Braun wanted to completely overhaul the frontend application. The aim was to raise the level of readiness for future cloud migrations and improve scalability and maintainability through the use of modern frontend frameworks.

This included making one major change. The new e-commerce shop frontend application is no longer to be hosted on-premise; instead, it will be able to run in the cloud in the future.

The SAP experts from adesso implemented a frontend application based on react.js for B. Braun. Server-side implementations were carried out with the help of a Next.JS application in addition.

To achieve the goal of becoming independent from the backend and frontend, SAP Commerce is run headless and all communication is controlled via REST APIs, also referred to as the OCC layer in SAP Commerce.

The frontend application was implemented using cutting-edge technologies, meaning that it is also available as a mobile-first application on all end devices.

The requirements were defined and fleshed out at several workshops in the Interaction Room to ensure the project went off as best as possible. Then the requirements were refined and stories created in a backlog that were ready for implementation. A compelling MVP was developed in agile development mode over several sprint cycles. react.js with Next.JS served as the development technology. Other popular tools like Jira and Confluence were also used, while the Cypress framework was employed in the QA process.

With the aid of the new, modern frontend application, B. Braun was able to achieve its goals and significantly improve user-friendliness. Through the use of the latest cloud technologies, the frontend is also simple to maintain and can be rolled out elsewhere as required, making it easy for the company to reach new customer groups.

The e-commerce shop was modernised as part of the project and is technologically future-proof in cloud operation.