Improvement of the existing SAP Commerce solution with progressive web app technology
SAP is a leading software company around the world, and with its SAP Customer Experience, it has been recognized by Gartner as a leader in digital commerce.
Since the company follows and aligns with the latest trends in technology, they’ve decided to add progressive web apps (PWAs) to its flagship product, SAP Commerce Cloud.
Thanks to PWA, SAP Commerce Cloud has improved and enriched its customer experience (CX). Moreover, PWA provides a native app-like experience with many features, like home screen installation, push notifications, offline mode, and client-side caching.
Why were we asked to help?
Analyzing the details to begin the partnership with SAP
At the end of 2017, SAP approached Divante, a leader in eCommerce-oriented progressive web apps, to discuss their needs and challenges.
Divante was selected because we had a lot of proven experience in PWA development. We also had a relatively new and attractive product under our roof, Vue Storefront (VSF). In 2017, VSF was a very fresh concept published a year earlier, and it is very much aligned with SAP’s R&D work on their new Commerce front end. After analyzing the details, Divante and SAP agreed to begin the partnership, work together, and share experiences.
The companies set the key project goals during the deep analysis and created an interdisciplinary team. The team consisted of over 20 people, including eight developers from Divante and over 15 experts on SAP’s side.
The project goals were focused on three main areas:
- To provide SAP developers with a headless frontend that could be easily upgraded with each new release.
- To leverage PWA technology and modern JS frameworks to create an extendable code base that could be customized easily.
- To release it as an open-source product and involve partners in further product development and the adoption process.
For a start, Divante’s team had to visit SAP’s headquarters in Montreal, Canada.
Our team spent one week in Montreal where we were presented with SAP’s proof of concept (POC) written in Angular. Our developers were asked to review the code and suggest some improvements and alternative solutions. Many unit tests were already in place, and the whole setup seemed extremely exciting.
It was an excellent start to the partnership because we had enough time to get to know each other a bit better and to collaborate face-to-face. The entire week was planned in great detail by the SAP team.
At the start of the week, Divante was mainly a listener. SAP welcomed us with a wide and detailed introduction to the Spartacus concept and its architecture. As already mentioned, we had an opportunity to inspect the code in the initial phase and discuss potential improvements and alternatives.
How did we tackle the tech?
Roadmap, challenges and development process
After a couple of intense days of workshops, we were able to begin an open discussion and start bringing in the added value. Divante’s Development Team was able to transfer knowledge about the web applications and latest eCommerce trends based on our previous experience with the development of Vue Storefront.
Roadmap for SAP Spartacus
As a result of the cooperation and workshops, the teams agreed on the roadmap for SAP Spartacus. It was very much focused on new features, like PWA, Lazy Loading, and SSR. Both teams agreed on all aspects related to the project execution and roles. An interesting requirement was SAP’s definition of “done” which, in detail, described all the pieces that have to be delivered to treat each new feature as ready.
The whole development process, its velocity, and incremental delivery were ensured by a really solid process based on Agile principles. A variety of experts, including a SCRUM Master, technical writer, front-end architect, front-end and back-end developers, and a quality assurance specialist, were involved.
The biggest challenges
One of the biggest challenges for our team was to understand and learn about SAP’s products, Hybris and Commerce Cloud. This had to be done in a very short time in order to start implementing Spartacus. To begin the whole process, we had to pick and transfer some old features from the Accelerator, which was a bit of an outdated solution. Then we had to implement it with our new Angular Storefront, known as SAP Spartacus. Of course, mapping the functionalities is always challenging, and it was this time, too.
What did we achieve?
SAP Spartacus introduction and further cooperation
Soon after the kickoff, the project had a codename called Spartacus. The name reveals the powerful features hidden within it. The very close cooperation between SAP and Divante led to the initial release in 2018, and SAP Spartacus was introduced at SAP CX Live Barcelona in October 2018.
The cooperation between SAP and Divante continues to this day and has even gotten bigger. Version 3.0 of Spartacus was released in December 2020, and it included the first B2B features. The release lifecycle has sped up, and new features are being released every month. However, the cooperation has gone beyond programming. Divante employees co-create OpenSAP courses about Spartacus to help spread the knowledge and best practices among the community.
"It's good to see that creating Vue Storefront and the experience from other projects is helpful for developing Spartacus. Thanks to the PWA/headless front-end approach, Spartacus is going to be a total game-changer for SAP end users. It's been a great journey so far and it's just the beginning."
Kacper Knapik, Team Leader at Divante