Set up a Magento shop with PWA Studio

About the agency

Mothership GmbH is an e-commerce agency from Munich that specialises in Magento solutions for online retail. In cooperation with its customers, the agency uses agile methods from software development with the aim of creating high-turnover, stable and visually convincing online shops that provide users with an optimal shopping experience. Mothership provides solution-oriented consulting for the development and optimisation of e-commerce activities and offers strategy consulting, set-up, development, expansion, application integration and technical integration of Magento online shops, taking into account the value chain of their clients. Online shops from the Mothership forge have already received several awards as "Best Magento Shop Germany".

maxcluster has already been working successfully with the agency for many years, including with the online shop "Roeckl", which switched to PWA in October 2019.

You have recently successfully launched your first PWA shop. You used PWA Studio for this. How was the work with it?

At the time we started the project, the PWA Studio base was not yet fully developed. So there was not only a lack of features, but above all a lack of sufficient documentation or sources from which to draw knowledge. As a result, the barrier to entry was somewhat higher, as it was first necessary to understand how the system works and how it can be set up and configured correctly. This is especially important in view of the fact that one is not creating a "Hello World" app, but already has a complex catalogue of requirements.

Apart from the new requirements for infrastructure and deployment, the implementation of a complex design, through the development of the individual React components, was much more pleasant and faster than it would have been possible with a Magento 2 standard frontend. The implementation of the project was really fun.

What preparations were relevant?

We had to evaluate a setup that would provide us with a good development environment in which front- and backend features could be developed independently. Since this was also something completely new for us, it was important to be able to enforce a high quality in the development from the beginning. Therefore, it was also important to find out how to implement an automated testing strategy for the new setup. It was also advantageous that we had already worked with React beforehand.

Which hosting setup was important and how could maxcluster support you?

It is important that we have a contact person we can trust when it comes to hosting. maxcluster helped us enormously here and provided technical solutions after joint planning. In the run-up to the relatively complex PWA context, there were a number of questions to be clarified, such as which services should be placed on which instance, how ports should be assigned, how to deal with various routing rules, how to monitor the applications or how to deal with certificates. maxcluster was available to us at all times and was able to offer competent solutions. It is important to us that we can focus on the development of the shop and outsource Dev-Ops topics to an experienced partner with a clear conscience.

What other limitations are there (compared to the regular Magento frontend)?

At the moment, it is noticeable in many places that the Magento ecosystem is still predominantly based on the legacy front end. This is currently an enormous hurdle for existing Magento 2 shops to make the switch. Existing features, such as "content staging", also only work with the standard legacy frontend - at least in terms of display. There are also major differences in communication between the frontend and the backend. While a strict separation between the frontend and backend communicates exclusively via the API, the coupling with the legacy frontend is less, so that enough examples can be found where instead of the API interfaces now available in Magento 2, underlying methods are used.

This makes the implementation more difficult, as two different results come about as a result. For example, category page filters were missing in the GraphQL interface - or the support for the page builder was poor.

What advantages could you gain from the new frontend?

The frontend team can work relatively worry-free and independently from the backend. In fact, we have two separate teams that can follow the API specification for the implementation. Of course, adjustments are necessary for the project, but these are relatively painless due to the strong decoupling from the Magento system. PWA-Studio relies on the Javascript library React, the components created for this can be tested granularly and independently with the help of Storybook. Overall, it can be said that the development was a lot of fun. Every experienced Magento 1 developer who had little fun with the XML-based layout now has the opportunity to work with a modern tech stack that makes work easier and fun. Due to the technology behind it, it is possible to create high-performance online shops. It is also possible to exchange only parts of the website without having to reload the entire website when users navigate through it. The resulting improved user experience usually also has an impact on better search engine rankings and sales.

Where do you currently see weaknesses in Magento PWA Studio?

The main weaknesses of PWA Studio are, on the one hand, the lower visibility of the project within Adobe/Magento in our opinion and also the wrong expectations towards the project. At the beginning of the project there was also a relatively steep learning curve, as there is not much material. Some standard functions of an online shop are not yet functionally available at the current time, and support for extensions is still largely missing.
A close exchange via Github or the Magento 2 PWA Slack Chat is therefore very helpful. Therefore, the documentation could be improved, but the project is still in constant development, which means that the framework is regularly improved.

Why did you choose this solution (instead of another compatible PWA solution like VueStorefront)?

As a consulting company, it is important to us that we evaluate existing solutions and make an economically sensible decision. In fact, at the time of the evaluation from the end of 2018, there were only two relevant technologies besides PWA Studio: Deity and VueStorefront. VueStorefront fell out in advance due to its tech stack. We have to work with those technologies in the implementation where we can be productive in the long term. With Deity, the technological and strategic development is still not clear to us. There must be a clear line on the part of the community or the company. Technologically, PWA Studio was not yet ready for productive use at that time, but one must not forget that Adobe is now behind Magento. The goals set, the budget and the support all fit here. In the long term, it was a strategic decision, which in retrospect was the right one for us.

What future developments do you expect in the PWA sector in the next few years?

It is difficult to label PWA as a panacea - it definitely is not. PWA can solve problems in e-commerce because it can drastically improve the user experience by, for example, storing a large part of the application code locally and also using an offline mode. However, we are only at the beginning of what is possible in this industry. If you look beyond the end of your nose and observe what Microsoft, for example, has achieved (see article on zdnet), it is very impressive. Although the e-commerce industry has excellently understood how to optimise internal processes and no one has to hide when it comes to conversion optimisation, there are use cases that no one has implemented yet. We can well imagine that PW apps will outstrip classic client applications such as email clients or office applications in the future.
It will be exciting to see if we can migrate both new and existing clients to PWA solutions. The implementation of a PWA is also mostly connected with the implementation of an API-first strategy. The costs for this migration are not insignificant. It is not only about the frontend getting its data quickly, but also about the infrastructure meeting these requirements. This starts in the front end, but runs through the entire value chain (CRM, ERP, PIM, etc.) of a company.

What new demands have arisen for Mothership as an agency?

Fortunately, Mothership has excellent employees who not only specialise in one area; knowledge was also already available in React, Elasticsearch or Varnish, for example. Here, everyone has the necessary expertise to be able to exchange technical ideas with others. Working on PWA requires being confronted with different opinions and views. It does not hurt to be able to evaluate situations as neutrally as possible. Furthermore, there are no right or wrong decisions - the important thing is to deal confidently with demands and changes.

Regardless of PWA, the fact is that e-commerce infrastructures are more complex and much more tightly networked. It is not uncommon for us to have at least two or three different programming languages in use in a project, and there are also an increasing number of different technologies involved. One challenge is the shift of the typical Magento ecosystem from the "eierlegende Wollmilchsau" to "merely" a shop system. This means that different systems take on dedicated tasks and there can thus be different sources of errors. Good monitoring of the services is very important here

Foto: Agentur Mothership: Johannes Müller, Peter Höcherl (from left in the back), Niklas Wolf, Andreas Emer, Don Bosco van Hoi, Ludwig Wacker from left in the front). © Mothership GmbH, 2019