Magento PWA Studio Vs. Vue Storefront: A Comparison

By: Yogesh Suhagiya, Apr 10th, 2019 # Dev Talk # Magento 2 # PWA

Magento PWA Studio vs. Vue Storefront

The world of eCommerce is going through some exciting times. If you follow technology news and tech trends then you might be aware that PWAs are rapidly gaining momentum and might soon be the actual way of building online stores.

Magento introduced Magento PWA studio some time ago which is basically a kit or a set of tools that can be used to build online stores that behave like apps. Similarly, Vue Storefront is rapidly becoming the open source technology of choice for building online shops using PWA.

So, what exactly is a PWA?

Progressive Web Applications (PWA) were introduced in Google back in 2015. A PWA is a website that looks and feels like a mobile app on a smartphone and is delivered through the web (not an app store). It has other app like features such as notifications, offline use etc. Magento was quick to see the potential of this technology and launched the PWA studio – a set of tools that you can use for development and maintenance of a PWA storefront on top of Magento 2.

As a result, instead of building separate websites/apps for various platforms and devices, PWA lets you create an app icon just like a website shortcut on the user device. At its core it is still a website but it allows a native app like performance and benefits of mobile app user experience.

Here in this article, we will be comparing two PWA platforms, i.e. Vue Storefront and Magento PWA Studio, to make you more familiar with the opportunities, both the platform can offer to your business.

Both PWA Dev tools – Magento PWA Studio and Vue Storefront have changed the eCommerce app game with an ultra-fast shopping experience, high scalability, offline shopping etc.

Vue Storefront

On the other hand you have Vue Storefront, which is a standalone PWA storefront for eCommerce that lets you connect with any backend (Magento, Prestashop or Shopware, etc.) using an API. Vue Storefront is an open source technology so anyone can use and support the project.

Vue Storefront Set Up

Vue Storefront is a standalone PWA eCommerce storefront and one of the market leading options for PWA stores. Its main advantage lies in the fact that it can connect to any eCommerce backend (Magento, Pimcore, BigCommerce, etc.)

There are 3 concepts you need to be familiar with while working with Vue Storefront.

Vue Storefront Core (core folder)

This is the glue that holds it all together and enables the storefront to work. It has all the entry points, SSR behavior, build process, in-app libs and helpers.

Don’t modify or alter this folder directly while building your own implementation or you will not receive core updates.

Vue Storefront Modules (core/modules and src/modules)

These are basically eCommerce features. Each module is a single one encapsulated feature (such as cart, wishlist, catalog, etc.) You can add or remove or edit these modules as you like and use only the features you need for the Vue Storefront shop. These are also used for third party extensions.

Vue Storefront Themes (src/themes)

These are the shop implementations. Themes allow you to use and extend all the logic from registered modules/core and add your HTML markup and styles. The storefront provides a fully customizable theme.

If you master these basics, then you are ready to build your online PWA stores using Vue Storefront. To installing your Vue Storefront, you have three choices: either set up the frontend connected to the demo backend platform, or set up using your own vue-storefront-api and database dumped from demo. Or you can set up the frontend with vue-storefront-api connected to your eCommerce backend.

The main advantage with Vue Storefront is that its open source and enjoys the support of a large community. It is 100% offline, platform agnostic, supports Magento 2 and has an MIT license.

Vue Storefront


Magento PWA Studio

With the latest business trends, Magento 2 is becoming a favourable Progressive Web Application platform. Magento has announced the PWA Studio as a set of tools to be used for developing and maintaining a PWA storefront.

Magento PWA Studio Project

The Magento Studio tools help developers learn PWA techniques, build blazing fast front-ends and create PWA extensions and components for sale on the Magento Marketplace. The studio is primarily used for building online Magento stores and provides the following tools:

PWA Buildpack — The PWA Buildpack contains the main build and development tools and libraries required for building PWAs. You can use this to set up and configure your local environment for PWA development.

Peregrine — The Peregrine project contains a collection of UI components for a Magento PWA. Developers can use, extend, or remix these components to develop a unique Magento PWA storefront.

Venia storefront /PWA Storefront — This is Magento’s proof-of-concept PWA built with PWA Buildpack and peregrine tools. Currently, the storefront has examples of product details and category pages. If you are interested in exploring Magento PWA Studio, you can read about it here.

Magento PWA Studio

Benefits:

  • Fast
  • Secure
  • Responsive
  • Cross Browser Compatible
  • Works in Offline Mode
  • Mobile “Install”
  • Shareable content (unique URLS for sharing)

Comparing the relative pros and cons of the two:

Pros of using Vue-Storefront

Platform-agnostic: Vue Storefront abstract the common data by converting the platform-specific API calls with the help of its layer.

Periodic Updates, Strong Support, and a Fair Vision: The storefront was on grounded in 2017. It brings new updates every week. They are responsive to support. They have a planning board available on GitHub which is public.

Latest Technology Stack: Vue Storefront is built on Vue.js, therefore it allows developers to write JavaScript code from both server and client side. It synchronizes the data between the client and the server.

Server-Side Rendering: SSR handles the rendering when a search engine crawls requests. This allows us to generate HTML for pages that are more dynamic, which content is not known at build time. This is also referred as universal applications.

Offline Browser Storage: It stores data in IndexedDB and LocalStorage that allows native caching (Cache API).

Cons of using Vue-Storefront

Documentation: The good part of development is its documentation, which is missing in Vue Storefront you find incomplete documents.

Uses REST API: The flaw of REST API is it can’t make asynchronous calls. Comparing this with GraphQL, it lags with request response.

Do Not Cover All Features of Magento: At present Vue Storefront is missing few Magento features and some minor bugs to fix.

Payment Methods: Not applicable for few payment gateways.

iOS: Some features are not compatible with iOS devices for example offline, add to home screen, etc.

Pros of using Magento PWA Studio

Provides development tools: It administers PWA development tool and library for Magento Progressive Web Apps. Use the PWA project to set up and configure in your local environment for PWA development.

Use GraphQL: GraphQL embraces declarative data fetching with its queries. There is no over fetching in GraphQL. With single backend, it is eligible to manage multiple users from various sources.

Easy to setup: Magento PWA studio has an easy set-up process from the back-end, it allows to clone a repository and allocate Magento instance URL to the .env file and with executing a command it allows the application to run successfully.

Strong Community: Magneto is known for its strong community, which directly has benefited the PWA approach as well. It has numerous contributors worldwide.

Cons of using Magento PWA Studio

In Development mode and many features are missing: There are many major features in build process in Magento PWA Studio.

Performance: Magento PWA doesn’t work offline on iOS devices. PWA notifications can only send messages to Android, iOS is not supported.

Validation: Validation issue appears during creating a new customer account. If you’ve created a password that doesn’t meet passwords’ requirements you didn’t receive a notification about the problem and it’s unclear with the next step.

Support only Magento back-end: It is restricted to only Magento as platform specific.

Comparison Table

It’s amazing to see that progressive web apps functionality has provided businesses with many advantages like discoverability and engagement with low cost of development. This new era of eCommerce management is ready to cater customers with an experience that will definitely hold their interest and the businesses will drive more visitor traffic.

Are you looking for consultation on PWA? or do you wish to upgrade your business website/store to PWA, you can reach our experts and they will guide you with the best possibilities. Feel free to connect.