PWA + Pimcore
Staples: A unified PWA front end for multiple legacy back ends
Staples, a global office supply retailer, launched its first eCommerce site in 2001. Over the years, the company acquired other entities worldwide along with their existing eCommerce systems, which they continued to provide online services with. Today, Staples faces the challenge of unifying its online presence across all touchpoints and has decided to test out modern progressive web apps.
Providing global online services based on multiple back-end systems is not an easy task, and Staples knew that well. Being the second-largest online retailer in the world, right behind Amazon.com, Staples has to provide daily maintenance of each eCommerce system separately.
That brings a lot of challenges. This is a great struggle for development teams who have to work with the highly customized systems written in .NET and JAVA and also for the end users.
What's more, owning entities and matching eCommerce systems in over 40 countries across the world, Staples wants to provide a consistent brand identity across all of them.
Although this situation reflects the state of many seasoned eCommerce systems, the answer to such a challenge wasn't easy.
Why were we asked to help?
Dealing with legacy back ends
The eCommerce team knew that changing all the back-end systems on such an enormous scale would be demanding and time-consuming.
Instead, they decided to build a unified user interface (UI) for two back ends available in the Staples technology stack.
At first, the company considered the development of a mobile native app, a new front end, and various headless solutions. In the end, it became clear that the best option would be a progressive web app that combines the features of a web page and mobile app in one.
At that time, Staples approached Divante who developed Vue Storefront, a progressive web app (PWA) storefront dedicated to eCommerce.
"We were looking for a partner who would not only take us through the steep learning curve with PWAs but also build a close relationship with us to embark on a journey to transform the Staples eCommerce space."
How did we tackle the tech?
Running a proof of concept
Staples and Divante began cooperation with workshops that helped both parties to understand the overall situation and decide on the final technology.
The idea was to implement one common user interface based on Vue Storefront in Azure Cloud and integrate it with two eCommerce back ends, Genesis and Netshop.
By running this experiment, Staples hoped to answer the following questions:
- How could they create a UI in Azure Cloud in a short time, and what is essential to do so?
- How could they create, easily and quickly, a new API for at least two online stores and separate their front end from the back end with a headless approach?
- What DevOps practices should be applied?
- How do progressive web apps work in practice?
- How can we work with the Vue.js framework? Is it simple to use and scalable?
Preparing API and Azure Cloud
The existing monolith systems from 2001 had to be switched to microservices. Staples achieved that by designing new API concepts and developing them for Genesis and Netshop-based back ends.
At the same time, they launched Azure Cloud to later build, test, and deploy the proof of concept (PoC). This cloud turned out to be highly available and cost-effective. On top of that, it enables scalability for future developments.
Designing a unified UI as a PWA
In parallel, Divante focused on building a new unified front end that could later be connected via API to the back ends. With the new front end, the design team managed to standardize the user interface for all back ends and turned it into a single, easy-to-maintain code base.
The new Staples front end was designed as a progressive web app, so apart from standard web features, it also provides the end user with all the typical PWA features. These include fast performance, offline mode, saving a webpage as an app with an icon on the home screen, and push notifications. This significantly improved the mobile experience. PWA technology is designed to adjust to all devices, from smartphones to desktops, and perform as a mobile app.
An agile way of working
Both teams worked with the plan-do-check-act approach which provided a unique opportunity to fit everything into the given time frame and deliver even more. Thanks to that approach, the team delivered some extra features, like offline ordering and product barcode scanning. While developing the product, we had three main agile principles in mind: customers first, people not process, and a working product.
”Thanks to cooperation with Divante, we have improved our way of working and pushed even more for maturing our DevOps practices.” Marcin Kaźmierczyk, Head of eCommerce Development at Staples Solutions.
What did we achieve?
Positive results of the PoC
The whole experiment engaged seven international teams spread across Europe in the Netherlands, Sweden, the UK, and Poland. It was approximately 30 people collaborating for three months.
During this time, cooperating teams managed to set up an entirely new working environment using the microservices approach along with designing and testing a new PWA front end. The final product delivered really great features, like barcode scanning, offline ordering, and one single point of entry for business and online customers.
With a reasonable budget, Staples was able to validate four new technologies, Azure Cloud, PWAs, a new API, and Vue.JS, in terms of their learning curve, simplicity to leverage, and scaling on the systems available globally.
What's more, running a PoC proved that it's possible to launch a unified and improved UI on the front end without any changes in enterprise resource planning (ERP) integrations or impacting B2B and B2C business logic.
From a technological point of view, the PoC was fully successful thanks to the headless front end, which provides proof for investing invest in modern architecture.
“I had the pleasure to manage the new UI initiative. The key factor for success was definitely the team. They were very creative, adaptive, and passionate for both Divante and Staples Solutions. In a short period of time, we delivered tangible results in the application and infrastructure by keeping in mind agile values and DevOps best practices. Apart from that, we all had fun." Dominika Sadkowska, Senior IT Project Manager at Staples Solutions.