019 is the year of mobile. Oh, wait - didn't we hear that last year? It was similar in 2017, wasn't it? That's right. However, now we can talk about the upcoming breakthrough in the mobile market, all due to the growing popularity of PWA applications. Will Progressive Web Apps turn out to be a revolutionary solution? We have to wait for the answer a little bit longer. But it is already known that the development of the PWA technology will certainly bridge the gap between websites and native mobile apps.
PWA has been a hell of a buzzword lately. We are almost certain that our readers know this term. If not, we recommend you to read our article, in which we introduce the topic of Progressive Web Apps and indicate the main benefits of using it in your business. In this article we will focus on presenting and comparing a few popular solutions for e-commerce on the market. But before we start describing them, one very important remark.
When considering PWA, at least two approaches have to be distinguished. The first one are the solutions which are a standalone PWA storefront for e-commerce that lets you connect with backend (e.g. Magento, Prestashop, Shopware) using an API. In this group we can point to Vue Storefront, Deity Falcon or FrontCommerce. In the second approach, the solutions offer a set of tools to build PWA - and in this group we will indicate for example PWA Studio and ScandiWeb.
Let’s start with Magento solution.
Overview of the most popular solutions
PWA Studio
Launched in 2018, Magento PWA Studio is a new solution implemented in Magento 2 and it is designed to make conversion of e-commerce to PWA smoother. Magento PWA Studio uses modern tools and libraries to create a system and construction framework in accordance with Magento extensibility principle.
Magento PWA Studio provides the following tools:
- PWA Module: This tool provides modular help, server-side functions and is the basis for all topics created in Magento PWA Studio. It delivers Shell applications, manages RootComponent tasks, and integrates GraphQL workloads into server rendering for better optimization. Easy to install, this module is activated in the final phase and applies to all themes created in Magento PWA Studio.
- Pwa-buildpack: A set of necessary plugins and Webpack tools used to create Magento Studio PWA themes. It is also used to configure the local development environment of the Magento 2 platform.
- Peregrine: This is the React component library that simplifies the development of PWA Magento by providing basic functionality. Storybook JS, which provides documentation for developers, is also used.
- Venia storefront: Magento 2 site built with PWA Studio tools. Venia Storefront is a demo theme that can be used as a basic theme, built entirely with the above-mentioned tools.
- UPWARD: It is a server that could be considered as middle layer between PWA and APIs, it helps unify all APIs in one place, so there’s no need of keeping track of multiple endpoints and how to access them.
Both developers and customers can benefit from the PWA Studio. Simply put, it allows to make online customers’ purchase journey easier and faster. From a developer’s perspective, the PWA Studio is a new front-end architecture which allows managing all channels via one code base, one deployment, and app. Of course, some weaknesses can be found as well. What are the biggest pros and cons of using Magento PWA Studio? Let’s find out.
PROS
- Providing expansion tools - you can use them in your local environment to create PWA applications.
- GraphQL usage - GraphQL includes declarative retrieval of data from queries without excessive retrieval. With a single back-end, you can manage multiple users from different sources.
- Easy configuration - Magento PWA Studio has an easy back-end configuration process; allows you to clone the repository and assign the URL of the Magento instance to a .env file, and allows you to run the application efficiently after the command is executed.
- Strong community - an advantage, but also a trademark of Magento, is an involved and large community. The PWA Studio also benefits from this, having a lot of contributors from all over the world.
CONS
- Lack of features - some of the functionalities are still in “to do” stage.
- Errors to deal with - at the moment there are still vulnerabilities that the Magento team is working on (e.g. how to validate the password when creating a new account).
- API is not ready - the GraphQL API prepared for PWA Studio is not fully ready for production implementation, and doesn’t cover 100% of the functionalities available in Magento, such as language or currency change, etc.
- Supports only Magento back-end
Scandi PWA
Developed by Scandiweb agency in 2018, uses React as front-end app framework. The latest technological stack (included Redux and GraphQL as well) provides users with the best experience. In terms of technologies, it is worth to mention: ready development environment on Docker, Varnish & Persisted queries for data sync, caching layer for 0.020 seconds response time, and no extra DB or middleware. ScandiPWA uses technologies such as GraphQL, Varnish and Redis to improve the performance of the website. These elements are required for the project to enable ScandiPWA to work with the shop.
Since the ScandiPWA is closely integrated with Magento backend, and designed to be as simple and familiar as possible, ScandiPWA theme can be implemented on any Magento 2.3 version project without any changes to its infrastructure.
"Our dream is to make the Magento ecosystem leaders in PWA adoption. The key to bringing our dream to life is to make PWAs accessible, transparent, and affordable. And those are the pillars ScandiPWA is built upon - an open-source plug-&-play Magento-first PWA theme that can be implemented by any Magento developer in a day's time - ALFREDS GENKINS, SCANDIPWA FRONT-END TECH LEAD
Deity Falcon
DEITY Falcon, a result of the work of developers from the Dutch company DEITY, is a stand-alone but modular library to easily build headless PWA websites. Deity Falcon started in October 2017 with their first PWA solution. Over a year later, in November 2018 they released the first open-source version. The solution is built using ReactJS, NodeJS and GraphQL, and supports Magento 2 PWA storefront, Wordpress PWA and BigCommerce PWA Storefront.
During the development of Falcon, the emphasis was placed on compliance with the principles of F.I.R.E., which means:
- Flexible - PWA can be used to build a website, blog, shop or even a portfolio.
- Integrable - easy to integrate.
- Reliable - it is able to handle even very high traffic on the website and is easily scalable.
- Extensible - easily expandable with new personalized features.
When it comes to indicating possibilities and strong sides of this solution, it is worth noting that in DEITY Falcon you can work independently on the front and back-end, and this significantly affects the optimization of development time. This is not the only advantage.
It only takes a few minutes to get started with CLI tool create-falcon-app, which enables you to create an application based on DEITY Falcon with just one command.
- Client rendering (SPA) to increase page speed and reduce server load.
- Built-in Server Side Rendering (SSR) - you don’t have to worry about SPA SEO complications.
- Service worker to provide application caching and PWA features such as offline capabilities and add to home-screen.
- Falcon's architecture allows it to be very modular, lightweight and scalable.
DEITY Falcon is a launching platform for Progressive Web Apps. It allows merchants to create highly engaging user experiences and ultrafast front-ends. With DEITY Falcon you can create a top performing Progressive Web Application based on standardised web technologies, fully enhanced with the newest JavaScript features, making them feel and function like true native Android and iOS apps. Working closely with top players such as Google and BigCommerce, DEITY Falcon is setting the new standard for modern web experiences. Combining both technological stability and full feature-rich web applications, DEITY Falcon is ready to revolutionize any webshop - Jamie Maria Schouren, Co-founder at DEITY
Vue Storefront
Vue Storefront is a PWA solution tailored to the needs of e-commerce and integrated with the largest platforms - e.g. Magento, Shopware and Prestashop. It is so far the most popular solution on the market.
Vue Storefront is built using vue.js. As you will see in the table at the end of this article, most of the solutions are based on React. Divante - Vue Storefront's provider decided to use vue.js because, as they claimed, it is a technology that can be mastered in two weeks, so it is possible to quickly qualify employees who are able to work on PWA stack. What is worth mentioning - developers can expand JavaScript code both on the client and server side - the data is automatically synchronized. What are the other advantages of Vue Storefront?
- Platform-agnostic: Vue Storefront abstracts the common data by converting the platform-specific API calls with the help of its layer.
- Frequent updates: new updates every week. Effective support
- Server-Side Rendering: SSR renders when the search engine crawls requests, making it possible to generate HTML for pages that are more dynamic and whose content is unknown at the time.
- Offline browser storage: It stores data in IndexedDB and LocalStorage what enables native caching (Cache API).
Of course, there are some critical voices in terms of this solution. One of the cons is e.g. the lack of complete documentation to be found in Vue Storefront. What else?
- Uses REST API: It can't make asynchronous calls. As compared to GraphQL, it falters with request-response.
- Lack of compatibility with several Magento functions: At this moment Vue Storefront is missing a few Magento features.
- Payment methods: incompatible with some payment providers.
- iOS: Some features are not compatible with iOS devices.
PWA offers exciting new possibilities for e-commerce, improving the users shopping experience. Vue Storefront is there to make building a PWA a great developer experience as well. It provides scaffolding, boilerplate for features and takes care of edge cases for the developer. And not just for the frontend, Vue Storefront offers the right tools to quickly implement a headless architecture. While giving the merchant a robust solution, with an extensive and thriving community and a list of skilled solution providers to choose from. Vue Storefront offers an enterprise level solution on the cutting edge of PWA tech - SANDER MANGEL - VUE STOREFRONT
Front-commerce
The project started in 2015. Today it is a ready-to-use technology provided by the French company Occitech. The solution was developed under Magento 2, but it is also compatible with Magento 1.
The operation of Front-Commerce is essentially based on a central interface responsible for communication with various APIs. It is therefore built with Elastic Search, Redis, GraphQL and Node JS technologies. Elastic Search enables the management of directory data with the possibility of extension, while Redis limits API calls, acting as a central cache. It then replaces various API data by a single GraphQL to a page theme that gets it from React.
This is not an open-source solution. Front-Commerce balances this fact, however, with a long list of features it supports.
Front-Commerce is a React e-commerce storefront started in 2015. It is ready-to-use and a pioneer on the PWA solutions market. The first releases targeted Magento2, but Front-Commerce is platform agnostic and also supports Magento1, making it very relevant for merchants worried about M1's EOL. Front-Commerce aims at being PWA Studio friendly. Being React and GraphQL based means that developers working today with Front-Commerce could be efficient with PWA Studio when it will be feature-complete, and vice-versa. We will also look into synergies between our projects (UPWARD, hooks, design tokens, extension development…) as we progress. Its code is fully delivered to its customer and digital partner agencies. We provide a technical support and have a public documentation - KARIM DJEBBAR, BUSINESS DEVELOPMENT & PARTNERSHIP
Afterword
As we mentioned, PWA is now a really hot topic. New solutions are appearing, and the existing ones are developing their tools, adding new features all the time. The number of contributors is also increasing.
We are aware that at the time of publication, some of the information may turn out to be outdated.
We also wonder what the future holds, but we know one thing for sure - the PWA movement is unstoppable!