3 Routes to an API-Led Progressive Web App: Custom vs. Vertically Integrated vs. Front-end as a Service

There are different approaches to delivering Progressive Web Apps (PWA) depending on which ecommerce architecture is the best fit for your organization. We cover all 3 in our Enterprise Guide to Delivering Commerce PWAs, but most see an API-led approach as the best path forward because it provides a clean separation between the customer-facing experience and all the backend business logic, which unlocks agility and top-line growth opportunities.

There are 3 ways you can implement an API-led PWA: build a custom front-end from scratch, utilize a vertically integrated reference storefront, or leverage a Front-end as a Service.

Let’s dive into what to consider for each solution with respect to the shopper experience, integrations management, and development and operations (we also include a summary table at the end of this blog post if you prefer a higher level comparison).

Custom Front-End

Many perceive a custom solution as the most flexible option, but in reality, most teams will spend their time building the foundation with frameworks, design systems, and components that don’t directly add business value. Consider these complexities before delivering a PWA with a custom solution.

The Shopper Experience

  • PWAs give you tools to be fast but they are inherently difficult to scale in terms of performance, so your team needs to have the capabilities and time to achieve optimal performance.
  • The design team needs to be able to design a different set of patterns and principles to give the PWA an app-like look and feel.
  • Extending to new touchpoints like AMP, native apps, or desktop – and maintaining those new touchpoints – can be a resource challenge.

“Designing for PWAs is different than designing for responsive. PWAs should have a native look and feel, which requires a different set of patterns and principles.”

Daniel An

Daniel An, Global Product Lead, Mobile Web, Google

Integrations Management

  • PWAs set a higher bar for the experience so the quality of integrations has to be better.
  • Integrations will only get more complicated as more opportunities emerge to integrate right into the mobile operating system. Each will require the right design patterns and integration best practices to create a good experience – all of which would need to be built up from scratch with a custom solution.
  • PWA analytics are similar to app analytics, which are much more complex than web analytics. It’s more difficult and time consuming to set up this finer grain tracking and the integrations that connect it back to the third party vendors.

Development and Operations

  • Building an enterprise commerce PWA from scratch can take 18-24 months for an experienced team.
  • Launching a PWA is only 50% of the work, followed by the maintenance, evolution, and ongoing integration efforts. Building a mature DevOps practice and culture to cover this requires a major investment to:
    • Set up, maintain and improve continuous integration, continuous deployment and testing automation, as well as keep up with the latest trends, best practices, and services.
    • Continuously update the build to incorporate new APIs, and research and test how to best apply these APIs to a retail environment.
    • Deploy and scale modern front-ends globally in a repeatable manner with complex systems such as server-side rendering, caching, and data pipelines.
    • Build in resiliency and constant monitoring across DNS, CDN, and multi-region deployments, which requires experience and effort beyond using public cloud/Platform as a Service.

Vertically Integrated Solutions

A vertically integrated solution is when a single vendor provides the backend platform, the front-end experience, and the APIs that separate the two. It could be an ecommerce platform or CMS vendor that offers the decoupled front-end.

The Shopper Experience

  • By relying on a single vendor, retailers are dependant on their roadmap and the speed at which they drive innovation – and as backend experts, they won’t drive the same speed of innovation on the front-end.
  • The reference storefronts provided are primarily code examples and starting points, but not necessarily examples of how to create a great PWA experience.
  • Outside of the code, support for pattern libraries, component libraries, performance tuning, and other levels of polish is limited, so focused effort would be needed to turn these reference storefronts into high-performing experiences.

Integrations Management

  • The assumptions of the underlying API generally lead to integrations and shopper experiences that reflect how the underlying ecommerce system works, but not how modern shoppers want it to work. As you adapt to customer-centric designs, finding a way to morph the original vendor-specific code and flow becomes more difficult.
  • The reference storefronts will have limited frameworks and architecture built in for common integrations like analytics, multivariate testing, etc., so building and maintaining common ecommerce integrations will take more time.

Development and Operations

  • The reference storefronts don’t typically fall under the support and maintenance agreements and same level of investment, so retailers will need to set up a mature DevOps practice as outlined under the custom front-end solution above. This will require your team to invest in how to deploy, scale, monitor, debug, and patch the storefront.
  • The technology stack and programming language will usually be the same as the backend. However, as more teams focus on web-centric technologies and polyglot skillsets, this no longer makes sense for agility.
  • Time spent automating deployments, deploying in multiple regions, configuring CDNs, and following best practices for compliance eat away at time that could be spent innovating.

Front-end as a Service

Using a Front-end as a Service like the Mobify Platform separates the customer experience from the backend through an API layer and provides the freedom to select best-of-breed solutions throughout the entire tech stack. Since retailers aren’t tied to a single, slow-moving vendor, it’s easy to plug in new solutions when the old ones aren’t cutting it.

The Shopper Experience

  • The Mobify Platform powers responsively-scaled PWA experiences across mobile, tablet, and desktop so that all digital experiences are managed from a unified codebase.
  • To ensure all your digital channels are covered, you can add AMP pages and wrap your PWA to publish it in the app stores.
  • Single page apps became popular due to their ability to offer app-like user experiences, but a common trade-off had to be made on initial load times. Mobify PWAs minimize download and parse times with the app shell and code splitting, and combine this with server-side rendering so that an experience can be rendered quickly, while a rich application is loaded immediately after for the rest of the shopper journey.

Integrations Management

  • The shopper experience is decoupled from the backend through the Mobify Platform’s integration layer, which sits on top of the ecommerce platform, CMS, personalization, multi-variate testing, and other marketing tools.
  • Certified commerce connectors and the universal connector support fast, easy integrations into any ecommerce platform, CMS, or third party software.
  • The API-friendly architecture gives retailers the agility to test and deploy frequent UX changes independent of the backend, as well as add, remove, or migrate backend applications and services with reduced effort and minimal impact to the customer experience.
  • The platform’s data integrations route all key shopper events back to 3rd party marketing and analytics systems.

Development and Operations

  • The Mobify Platform includes modern tools and SDKs for designers and front-end engineers to rapidly develop, deploy, and evolve continuously tested, best-in-class experiences for PWAs and AMP.
  • The automated testing framework includes performance, end-to-end, unit, and linting tests that reduce risk and enable retailers to make changes faster. The average retailer deploys UX changes about once a month, while the average Mobify customer does 5 per deployments month.
  • To avoid risk when it comes to scalability, the Mobify Platform is built on cloud native and server-less technology that auto-scales to support traffic, allowing you to have the same consistent performance globally no matter the level of traffic or the shopper’s location.
3 routes to API-led PWA table

To compare these API-led solutions against alternate approaches to delivering commerce PWAs, download the Enterprise Guide to Delivering Commerce PWAs.

Get the Guide

Leave a Reply

Notify of
Resource ad

Related Articles