Behind the scenes of building Shopware PWA

Here’s the story of developing modern, light and highly customizable Shopware 6 platform, enriched with Vue Storefront — based PWA.

Vue Storefront, though platform-agnostic by design, was always in a very close relationship with Magento because that was the platform on which we were able to make the most dynamic and visible performance gains. However, the time has now come for a new adventure. Our Shopware 6 integration Developer Preview will appear at the end of January, and, like many second marriages, it will be more mature and elegant than the first time around… and will not be the last.

Vue Storefront took under two years to become one of the most popular eCommerce projects on GitHub. It was incredible how a bold, bottom-up initiative from employees blossomed and grew into a whole ecosystem of tools which attracted clients from the US, Europe, and Asia, and engaged a community from all over the world.

Magento integration was just a beginning

The success of Vue Storefront made us hungry for more and, significantly, put us in the spotlight of eCommerce companies. As a result, in April 2019, we became an official partner of Shopware.

As the eCommerce platform in German-speaking countries, they were looking for a way to improve the performance of Shopware-based stores. The PWA approach was a natural choice to achieve that goal, which is why — instead of reinventing the wheel — they wanted to use our experience to build the Shopware PWA with us.

And so we started to code.

Developing the Shopware PWA

We carried a great deal of experience gained with Magento integrations into the partnership but soon found that working with Shopware was a different story entirely. The architecture is modern, light, highly customizable, easy to use, and, above all, has a team committed to enriching its engine with a PWA, all of which meant that it demanded a different approach to our work.

The most important technical difference was the connection point. The Shopware 6 API is very fast and reliable, meaning there was no need for us to have a middleware anymore. It allowed us to simplify the integration architecture. But you may ask, in that case, what else was really left to do?

Conventional interfaces system — Vue Storefront Next

Since the very beginning of Vue Storefront, we’ve held on the dream that no matter which backend is being used, the developer experience of creating a PWA shop with Vue Storefront is the same.

First, we wanted to take care of a common data structure. In the first version, the structure of entities was obviously Magento-like. The goal was to create a whole new data structure, but we gave up this idea very quickly, and there are a few reasons why:

• It would require developers from all platforms to learn new data structure and have in mind which field is which (if you’re used to Shopware structure, you should be able to use it)
• Every integration would require writing this mapping; there would be no possibility to use clean backend API without Vue Storefront API middleware
• We didn’t want people to spend additional time on data synchronization: mapping, storage on search engines, setting up cron jobs… That works well for Magento when looking to enhance performance, but why bother when you have a fast-enough API?
• There was always something important in the structure which could be missing especially with new integrations and fixing than on this point… You know how that story ends :)

With the Shopware 6 integration (and the subsequent CommerceTools integration that we started at almost the same time), we came up with a bold idea to take us closer to our dream scenario. We decide to create a whole and complete set of interfaces and helpers which allow for the running eCommerce sites in a common way, not interfering with the backend entities schema.

Sounds complicated? It’s really not. Let’s say you’re creating a Product Card component. You need specific data from the product (such as name, prices, images, and maybe a short description) and we’ve got you with this.

That’s all you need. You don’t have to worry about which backend is being used; you don’t have to care how deeply nested are the data you need to display. You can focus purely on the visual part. And we’ve got you covered there too, as our Storefront UI, is a highly customizable UI library dedicated for eCommerce.

If you’re interested and want to know more, here’s a separate post about Vue Storefront Next architecture.

Why is it called Shopware PWA, not just Vue Storefront integration with Shopware 6?

As we are the official partner of Shopware, we also have a dedicated team on their side. These guys are working really hard with us to squeeze more out of this integration and ensure that Shopware users can easily have a PWA out of the box.

Shopware PWA is going to have full support for CMS pages, automatic project setup and support for the Shopware plugins system.

Where are we now in the project?

We have done more than half of the project scope, but there are still some challenges ahead of us. The structure looks more or less like this:

The API client is almost ready, as are most of the CMS components; all the composables and helpers are on their way and are constantly synchronizing with Vue Storefront Next architecture to ensure compatibility. We have 100% test coverage on all logic to be sure that future changes are not going to break something.

We’ve already managed to build a solution with the Shopware team, which allows the minimization of the amount of data and sends it all at once. This was a crucial element to speeding up performance, so it is safe to say that the most challenging work is already behind us. Now, we are working on plugins integration. We want to adapt them to the requirements of PWA and made them more useful and suitable for mobile-first standards.

So when will you be able to use it?

The Developer Preview version will appear at the end of January 2020. From then, we’ll be collecting as much feedback as we can to get it together and prepare a final roadmap. We will then open the repository for external contributions.

Besides, everything we do is Open Source, so you can always track the progress on GitHub, and if you find it useful, leave us a star :) At this early stage, contributions are open only for the core team; nonetheless, we are thrilled at the amount of interest in the project and can’t wait to share this work with you.

Learn more about Vue Storefront and PWA in eCommerce.