Developer’s perspective: incorporating PWA technology into Magento 2 stores
What are the challenges of enriching Magento-based stores with PWA solutions? To find out, I met up with Tjitse and Eugene, developers from Vendic agency, who recently launched a PWA in the Meubelplaats furniture store.
Tjitse, Eugene, give us a short intro to your latest project. What was the main objective of this project?
The customer was in need of renovation, with a back-end that didn’t meet the requirements and demands of Meubelplaats. They trusted Vendic to develop their new webshop as a PWA webshop. The main objective for them was to create a lightweight looking, ultra-fast webshop for their customer. Vue Storefront was a perfect match for this case.
Why have you decided to leverage PWA technology?
Since we wanted a lightweight and ultra-fast browser experience, a PWA was the best choice. By choosing a PWA solution, the webshop owner, as well as the end-user, enjoy the many advantages it provides. The site works offline and without downtime, is responsive and it is even possible to add the ‘app’ to the home screen of a device. And then, again, the ultra-fast experience will fit both, because it’s good for SEO and UX.
The solution a PWA provides makes it easier for many owners of small to medium-sized businesses to adopt a native app experience to their online product. Meubelplaats sells high-quality furniture. Their former webshop was using the Magento 2 platform and contained thousands of items. But since their customers are not frequent recurrent visitors (once you buy a high-quality sofa or dinner table, chances are small you keep snooping around on their website for another sofa or table), investing in a native app would be a waste of funds. There are too many steps involved in downloading an app from a store. According to the infographic, with every step, 20% of users are lost. For Meubelplaats, a PWA makes sense. They have a lot of products and their big competitors do have native apps (because of the wider range of products they sell, e.g. clothes); with a PWA they can give their customers the same experience for a smaller investment, but also keep the marketing & maintenance costs to a minimum because of using one single online shop.
How did you approach working with PWA technology in Magento Commerce?
We approached it pretty much like a “normal” Magento 2 project with an agile way of working. First, we defined the MVP and the definition of success. Later on, we started working on wireframing, design, backend and frontend development. All in small sprints and with feedback from the customer.
As experienced Magento 2 developers, we had to take a few steps back. Our usual working process is very much streamlined; a step-by-step system that we tweaked over the years to a perfectly working formula. Since PWAs are still in their infancy, we had to develop the webshop in a very ‘old-school’ way; problem-solving and solution seeking with most of the steps we took.
To finalize this project and see it’s an immediate success is so rewarding. Afterward, we found out that Meubelplaats was the very first Dutch Vue Storefront + Magento PWA webshop, which goes a long way in explaining most of the problems we came across, like modules & features we had to build: it simply hadn’t been done before.
Which part of the VS implementation was the biggest challenge? (checkout, product catalog, filter implementation…)
It was crucial for Meubelplaats (and every other Dutch webshop) was to be able to receive payment online with Dutch payment methods. And since the checkout’s other requirements were not very clear in the beginning of the project, we decided to go with a classic checkout setup in which we redirect from the VS cart to the Magento checkout.
That gave us a lot of flexibility of the logic in the checkout, which was great. This greatly improved development time needed, yet we were still able to provide an ultra-fast catalog browsing experience. Also, we gained a lot of experience with this challenge because there wasn’t a guide available. We had to do this with the knowledge of our team.
Which version of VS is used? How did you like working with it?
We used version 1.9. We have been using this version for a little while now and we must say it is very stable. We are really impressed with these new versions. Every version has many improvements and really nice features.
How long did the implementation last? How many people worked on this project?
Even though Meubelplaats already had a Magento 2 webshop, we developed a totally new Magento 2 back-end. This way we, as well as Meubelplaats, were assured of a clean, solid back-end, making it comply with all of their requirements. Implementing the front-end & design took us less time than implementing a completely new Magento 2 webshop would have.
We worked with a team of 4, and when needed we gathered input from the rest of the team, which fits our way of working.
The 4 team members had the following roles:
- Design
- Frontend Dev
- Backend Dev
- Project Manager
How do you improve SEO results? Do you have a custom solution or do you base your work on a stock Vue Storefront? What are the search results?
Pretty much stock VS with some extra rich snippets implementation. With other PWA projects, we see a lot of improvement in SEO rankings. Google is really embracing these PWA sites and shops. Sometimes we see SEO rankings on the first page in Google just 1–2 days after posting new content to a PWA site. We expect this to be the same for the new webshop.
We also created a dedicated VS sitemap.xml generator which is generated on the Magento side, with the VS url structure.
The very first PWA project we worked on was our very own website. For us, it made sense: how else can we check if this PWA thing we heard so much about was not only talking the talk, but also walking the walk? After developing our PWA website, one of the things we could monitor was our search engine ranking. We have seen amazing results first hand on what a PWA can do for your SEO. While a lot of online marketers are constantly trying to find ways to rank higher in Google by investing in content and such, with a switch to a PWA, you can have fast(er) results, making it easier to test assumptions, etc. A marketers dream.
Are there any interesting integrations that you have developed for this project? CMS, payments? What’s the story behind them?
With the challenge of the checkout, we came across some issues that needed improvement. That’s why we created the Vendic Vue Storefront External checkout extension.
This Magento 2 extension creates a seamless experience between the Vue Storefront catalog and the Magento 2 checkout. This will give some flexibility in choosing the checkout and payment providers that fit the customer’s needs. We also wrote a blog post about this checkout, which you can find here.
At the same time, we needed an extension that gave the end-user limited access to the Magento Checkout. This way, the visitor can only use the checkout for payment purposes.
Do you plan to share them with the VS community as a contribution to VS core?
As the first Dutch core partner, we are obviously a big VS fan! We open sourced the extensions, shared modules & features. One of the cool things about VS and open source is that the improvements we made, the solutions we found and or built, and which we shared, are directly being implemented. Sharing is caring and with that, we contribute to the PWA’s future which we believe has beautiful things in store for us.
How do you see the future of PWA technology in Magento stores?
A Progressive Web Application has a lot of advantages compared to a traditional website. Traditional Magento 2 projects will still exist, but there’s a new kid in town who is getting a lot of love from the Magento community, Google, UX, SEO, etc… Magento will embrace PWA shops and it’s just a matter of time before everyone knows about the advantages of PWAs.
In the Netherlands alone we hear a lot of our friendly competitors looking into PWA and some of them are even developing PWA shops/sites.
If PWA applications like Vue Storefront lead to so many improvements in such a short time, imagine how PWA shops will function in a few years! ECommerce and PWA will be a very happy couple for many years to come!
Learn more about PWA and Vue Storefront.
