The first time I heard about progressive web apps (PWAs) was in 2017. Fast forward to today and Vue Storefront, we started the very same year, is just becoming an industry standard. There are thousands of PWA shops leveraging different tech stacks all over the world. It’s definitely a good time to take a minute to check out the five most common challenges developers are facing building eCommerce PWAs.
Progressive web app features are definitely worth pursuing. If you look at the case studies, the growth in conversion rates is, at a minimum, in the double digits.
What are the key challenges developers face implementing new, MACH-oriented front ends then?
Complex eCommerce integration
You can easily find plenty of frameworks for building React, Angular, or Vue front ends. These include server-side tools, like Nuxt.js, Next.js, and Gatsby, along with design systems, like Vuetify, Fundamentals, and others. However, with eCommerce, the problem is still the level of integration with the eCommerce platform needed for a seamless user experience (UX).
Getting and displaying the product feeds is the easiest part. Then, there’s authorization, user accounts, wish lists, order workflow, integrations with promo tools like Talon.one or other customized ones, etc. It can literally take hundreds of hours. Then this integration, the communication with the back end, must be optimized with, preferably, GraphQL to implement BFF, caching, etc. To be perfectly honest, even popular frameworks like Next.js Commerce offer pretty limited support for the back-end integration.
What’s the best way to overcome this challenge? Native solutions, like Shopware PWA, are definitely a great solution. Vue Storefront 2.0, which supports dedicated integrations, is definitely a way to go, too. They’re still all JS frameworks letting you leverage the power of other design systems and libraries, but the core feature set is all there and ready to go. You’ll be able to start with the proof of concept (PoC) and minimum viable product (MVPs) within days or maybe weeks rather than months.
Low Web Vitals scores
Even if your application provides users with the most seamless user experience, it can be scored low by Web Vitals. It’s mostly the score that promotes the pages which offer the user the quickest possible first-page load. But when you build a single-page application (SPA), it’s pretty easy to forget about this first load. Instead, you focus on optimizing through caching and service workers that make the user experience and interactions super fast after it loads for the first time. The scores can be low if the JS bundle size of your app is too big, the HTML code generated by the server-side rendering is too complex, or the input latency is too low. Sometimes the “old-fashioned” but optimized pages get better scores than the fancy SPAs that are PWA compatible.
Keep the score in mind because it might determine Google positioning and other restrictions. The best way to go is to keep things simple, start with the highest possible scores (100?), and try to not break it.
Adding third-party integrations is super expensive. Keeping low server-side response time is also super expensive. It should be under 50 to 100ms, so caching is much appreciated. Use the content delivery network (CDN), HTML, and CSS minimization. First and most importantly, implement the proper bundle-splitting strategy to keep the size of the JS file small. Setting the budget quotas, like response times, bundle sizes, etc, is generally a great idea, too.
Legacy back-end platforms
PWAs are usually, but not required to be, implemented in headless architecture. This means the back-end platform you’re painstakingly about to integrate with must offer the proper API. It means covering all the features and being fast. It’s very often a problem. In the case of platforms like Salesforce Commerce Cloud, people start building gateways around the core platform because the API is usually not efficient. I’ve even done one myself.
The other platforms like Hybris often require the upgrade, which can take some time. There are ways to avoid it, too.
With Magento2 and GraphQL coverage, the problem is not within the API coverage as much as with its performance. It’s super slow. That’s how we’ve figured it out with Elasticsearch for the VSF1.
If you’re comfortable choosing the eCommerce backend, do it wisely :) Depending on the scale, platforms like commercetools, Saleor, or Shopware might be a great fit for your business or definitely at least for the front-end apps :)
Complex hosting and maintenance
It’s not related to PWA with the technology directly, however, it’s often closely coupled with it. PWAs are headless apps that integrate numerous services together. Content management systems (CMSs), eCommerce, customer relationship systems (CRMs), and custom functions are deployed as microservices.
Things get even worse when you’re switching the technologies over. The team supporting PHP could have a hard time supporting Node.js apps with a completely different memory management model and so on. I had a great talk with Jonathan Ribas from Zadig et Voltaire on this.
Overall the orchestration and the maintenance costs are significant. Still, you need to have the proper team, including developers, DevOps, and admins to handle it. The answer to this challenge is a proper mix of things you’re going to buy from the market versus things you’re up to building yourself. Here’s a guide on that.
A too rigid framework makes things overengineered
When you get into a TypeScripted front end and frameworks like Angular, Vue, or even React, you get to enjoy building the next big app. However, it’s fairly easy to forget that the front end is just the front end. I’m not saying it's not relevant. It’s super important. What I’m saying is it should be simple and optimized. It should be divided into scalable, reusable components that result in a coherent UX and small JS bundles.
The way the front-end components are grouped directly implies how the server-side data is being fetched. This has a big effect on the performance results.
I’ve put many more details on how the front-end framework can be structured in an eBook we released earlier this year.
What are the challenges you and your team faced while implementing a modern PWA front end for an eCommerce platform?