Follow us
Contact us
© 2021 Elogic. All rights reserved.
People are masters of manipulating matter — we’ve invented the wheel, the engine, modern technologies like smartphones, and we continue to progress at a maddening pace.
Over time, one thing hasn’t changed — the speed at which we adapt to new things. The same goes for Progressive Web Apps (PWAs). They were first introduced in 2015, designed by Google engineers to deliver smartphone app-like experiences on the web.
And like with all new technologies — they eventually trickle down into every industry, including retail.
Today, there are two major competing projects: Vue Storefront vs Magento PWA Studio
Web and mobile development have skyrocketed in recent years. But there is always room to grow. PWAs will reinvent how we interact with the web.
While you get app-like speed, you don’t have to install anything. Everything works right in your browser or device. This way, you get fast, cross-platform sites secured with HTTPS.
It is vital that the PWA still feels like a mobile app. In essence, you get the best of both worlds — modern web technologies that are able to create mobile experiences similar to mobile apps.
The term PWA was coined in 2015 by Google engineers. Their goal was to use existing technologies to expand the capabilities of websites without forcing users to install additional plugins/extensions. The new way of approaching web technology also moves past responsive websites, which respond or adapt, depending on the device or browser.
PWA vs native apps vs responsive websites
Another question you might ask is, “Isn’t my current website and/or app enough?”
PWAs work perfectly on Android, however, support on iOS is still sketchy. PWA support was introduced in iOS 12.2, but iOS 13 promises to deliver better support and future updates will be more PWA-friendly.
If you have an app, consider this — a survey by Quetta found that the average mobile app loses 77% of users within just three days. And it loses 90% after the first month.
All of these factors, plus the fact that classic Magento storefronts are slower and not as responsive as an app and cannot be used offline, mean a Magento PWA store makes perfect sense.
Why Build Progressive Web Apps?
Magento PWA Studio is a toolset developers can use to build a new storefront with the help of any modern frontend framework.
The Magento 2 default theme is called Luma, and Magento PWA Studio’s default theme is called Venia. The concept of a theme will be consistent — only instead of KnockoutJS, CSS, etc, you can “screw in” any tech stack. Currently, the standard tech stack is ReactJS, webpack, and GraphQL.
GraphQL is an important asset for ecommerce sites. It replaces RestAPI calls and significantly reduces query time, size, and developer headache (no PHP code, ability to request individual attributes). Right now, this is included in both Vue Storefront and Magento PWA Studio.
Vue Storefront is a project started by Divante team specifically to fill the void of PWA in ecommerce. The goal of the open-source project was to create a platform-agnostic, all-in-one PWA powerhouse with a Vue.js framework.
Vue Storefront supports the following ecommerce platforms:
This is a comparison of Magento PWA studio vs Vue Storefront :
PWA Studio | Vue Storefront | |
Started | June 2018 | November 2017 |
Frontend Base | React | Vue.js |
Last Version | 4.0.0 | 1.11.0 |
Release Count | 50 | 117 |
Stars / Forks | 556 / 316 | 5.8k / 1.2k5 |
Contributors | 105 | 214 |
Provider | Magento (Adobe) | Divante Ltd |
Community | Strong | Strong |
OpenSource | ✔️ | ✔️ |
Projects Live | 3 | 36 (Number provided by Divante) |
Middleware | UPWARD-Concept | Vue Storefront API |
Default Integrations | =< Magento 2.3 | Magento 1 + 2 Shopware Pimcore CoreShop WordPress EpiServer SpreeCommerce Odoo ERP BigCommerce |
Server Side R. | ? in Development | ✔️ |
Test Tools | Jest | Cypress (E2E), Karma |
Unit-Test | ~78% Coverage | < 30% Coverage |
E2E Tests | ❌ | ✔️ |
Strict Types | ⚠️ not yet, pure JS | Babel / ES2016 |
Additional Tech Stack | Redux, GraphQL,Webpack | NodeJs, Vuex,GraphQL, Webpack |
i18n | ? in Development | ✔️ |
Multi-Websites | ✔️ | ✔️ |
CMS | CMS API / PageBuilder | CMS API |
Search | ElasticSearch | ElasticSearch |
Wishlist | ⚠️ not yet | ✔️ |
Account, Login | ? in Development | ✔️ |
Checkout | ❌ | ✔️ |
Payments | Paypal (Braintree) | Paypal, Stripe, Klarna,Mollie, Adyen |
Tracking | ❌ | Vue Analytics |
Offline Support | ✔️via Workbox | ✔️Full |
Additional Features | TBD | TBD |
Link to | GitHub | GitHub |
Awesome List | TBD | Awesome List |
Frontend Demo | veniapwa | demo.vuestorefront.io |
Note: whether they’re written in React or Vue, PWAs are indistinguishable in performance. Also, though the PWA Studio is written in React, you can use any technology to code the PWA.
We’re entering a new Internet Renaissance. In the near future, PWAs won’t be a novelty, they’ll be the gold standard. But these may not be as new to you as you think. You may have even visited a PWA site and not noticed. You may have even shopped on a PWA retail or ecommerce site.
Here are some examples of stores built with both PWA tools:
La Natura
UK Meds
Kubota Store
Klebefieber
Vue Storefront is production-ready, and has 30 partners and a solid business model.
From the Vue Storefront site:
“Last year, our revenue around the project hit $1 million and we started a commercial cloud offer with seasoned teams in NYC and Berlin. We see other partners doing enormous projects on Vue Storefront and earning millions too. This is not a pet project. There is a core-team doing Vue Storefront full time, and this is a profitable business.”
Vue Storefront is clearly ahead of the PWA pack. They have an expanding ecosystem, integrations (hosting, payment gateways, etc.), and one of the coolest things is it’s platform agnostic.
The Magento Community Engineering Team working on PWA Studio has a roadmap for future releases. This is what it looks like for the next year, and beyond:
What’s coming up next in Magento PWA Studio?
Innovations Lab is a Magento community project that applies the latest technologies and creates cutting-edge solutions, apps, and products.
From the Magento website, “Our intention is to uncover and promote early stage, experimental, bleeding-edge implementations of emerging technologies on the Magento ecommerce platforms.”
An app that uses MSI, GraphQL, and PWA to offer retailers an offline solution to help customers find products via augmented reality technology. A customer simply chooses which product he/she wants, and is guided via on-screen arrows to the product. This app, developed by Webkul Software, can also be a big help for warehouses and fulfillment centers, as well as in hyperlocal stores, where delivery time is crucial.
Another cool app developed by WebKul Software. No bias, they just happen to be one of the few companies in the Innovations Lab that is leveraging PWA. The app allows shoppers to take and scan the products they want at a store and pay right from their phone. No long lines, no hassles. All they have to do is validate their purchase before exiting the store.
PWA is here to stay. We’re ecstatic about how far PWAs have gotten — giants like Microsoft, Google, AliExpress, NASA, Wikipedia, and a host of other companies are already using them.
For ecommerce, PWAs are the future. When you make the decision of Vue Storefront or Magento PWA Studio, remember the following:
We believe that if you want to see more satisfied customers, your next investment should be developing a PWA for your store.