PWA
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.
Scope
Research
Development
Vertical
eCommerce
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.
Recognized objectives
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.
Picked technologies
Spartacus is a lean, Angular-based, fully decoupled JavaScript storefront that connects with SAP Commerce Cloud. It can also potentially connect with other services, like a CMS, loyalty program, etc., through the REST API.
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.
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.
Development
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.
