2. Introduction
Seamless performance across various platforms and devices, as well as immersive UX along with the
ability to live on the user’s home screen give an edge to progressive applications over their native
counterparts. Introduced in 2015, PWAs have won over the app developers’ community and by the
beginning of 2020, the web environment had already been flooded with tons of progressive websites
based on reactive programming and leveraged JavaScript frameworks to build user interfaces.
Under the hood, PWAs have 3 major hallmarks which distinguish them from regular websites:
● Secure contexts (HTTPS)
● Service workers API (a JS script that works on browser background and enables caching and push-
notifications on mobile)
● A web manifest that provides details about an app such as author, name, icon, and other UX and UI
information.
3. Why PWA?
With all these robust features at their command, progressive applications took UX and performance of
regular websites to the next level. They are blazingly fast, secure, available from all browsers and devices,
can be accessed offline, and bring the look and feel of native applications.
PWAs owe their uprise to the advent of different PWA frameworks that one can use to build a
progressive storefront on top of their site. So app developers have two options here: they can create a
PWA from the ground up using React.js, Vue.js, Angular.js, or they may make use of various dev tools to
simplify the processes. Whatever choice they make, it will affect neither appearance nor behaviour of the
app.
We want to delve into PWA frameworks, as well as dev tools, one may leverage to build a progressive
app with minimal fuss.
4. List of Best PWA Frameworks in 2020
Once you decide to create a PWA from scratch, the first thing you should do is to choose the JavaScript
framework to build it on. There are multiple options there. Using these PWA frameworks will make the
process painless as they provide developers with tons of resources and tools to leverage, eliminating the
need to write chunks of code manually.
5. Angular.js
Developed by Google, Angular is one of the oldest frameworks. It allows developers to maintain web
infrastructures with ease and comfortability. Its prominent benefits include ongoing support by Google,
mature methodology, faster application development, better plug & play components, and wide
functionality out-of-the-box.
However, this PWA framework is far from being user-friendly and requires a solid level of coding skills,
as well as experience in TypeScript. In this regard, some developers find it too advanced for their needs. If
this is the case, we recommend choosing Polymer or React that go with templates and reusable
components that prune down the processes.
It has a steep learning curve and always provides more than one way to complete the task. This versatile
tool requires solid coding skills and experience in TypeScript, a superset of JavaScript, to work with.
Taking this into account, some developers find Angular.js too complex for their needs. But this PWA
framework is great for building dynamic and complex single-page applications.
6. React.js
React.js is one of the leading competitors of Angular.js. Both of these front-end frameworks are close to
equal in popularity, their architectures are very alike, and they are both based on JavaScript. The debate
on whether developers should use Google’s framework or the one from Facebook is intense.
However, unlike Angular.js, React is not a PWA framework but an open-source JavaScript library for
building dynamic user interfaces. This means that React requires multiple integrations with additional
tools to start building an app. With Angular, developers already have everything they need.
React.js offers a pervasive ecosystem, a fast rendering process due to virtual DOM, and a huge
developers’ community with ongoing support by Facebook. The create-react-app package will assist
developers in reducing the hassle of setting up and configuring the apps and helps them build out PWAs
at a faster pace.
7. Vue.js
Next to the above-mentioned frameworks, Vue.js is ranked among the top 3 major PWA frameworks
used for building progressive apps. Such big e-commerce players as Alibaba and Laravel leverage this
open-source progressive JS framework for building user interfaces.
Vue can be used for many purposes, not only for designing PWA storefronts, as the framework offers
various default packages: for server-side rendering, routing, and others. For the PWA building, Vue.js
provides CLI3, a dedicated PWA package that will help developers significantly simplify the processes.
Besides, Vue combines with other supporting libraries and tools, for example, Nuxt.js to render a perfect
single-page application.
Vue.js is used for MVPs and small projects but it has enough capacity for building more complex and
dynamic applications. However, the only flaw is hiring a dev team. Even though Vue is quite simple and
has similar concepts like Angular and React, there is a lack of experienced developers familiar with this
PWA framework, its ecosystem, and specific features.
8. Ionic
Ionic is an open-source SDK that is based on Angular components and Apache Cordova. It is good both
for cross-platform mobile applications and PWAs. Thanks to WebView that renders web pages inside the
device’s browser, it is possible to give websites the appearance of native applications.
Unlike competitors, Ionic has a short learning curve. Besides, its flexible tech stack allows Angular or
React developers to effortlessly use this PWA framework for building applications. Ionic offers a huge
library of over 250 pre-built routing, UI components, unit tests, and modules for adding native
functionality to PWA projects that save time and effort on coding.
However, Ionic performance is a bad apple that spoils the whole barrel. Since the framework renders
graphic elements via the browser, this fact can drastically defer the moment an image shows on the
screen especially in media-heavy apps.
9. Polymer
Polymer is an open-source JS library written in HTML and JavaScript and designed specifically for
creating web applications using reusable web-components. Developed by Google, Polymer is used by the
company in some of its products, for instance, Google I/O websites, Google Earth, Play Music, and others.
No wonder that the library is getting popular amongst the developers. So it currently has over 22,000
stars on GitHub and more than 31,000 downloads on npm.
Among the main Polymer features are:
● ES2015 support that simplifies the way of creating custom elements
● Conditional and repeat templates
● Gesture events
● The ability to provide both one-way and two-way data binding and templating.
● Shadow DOM needed for encapsulation of CSS, JS, and templating so that the web component
code remains separated from the rest of the DOM and modular.
10. Dev Tools for PWA Building
Developers can build a progressive app using one of the above-mentioned libraries and PWA
frameworks. However, this way is for those who know the ropes and are ready to devote time to
developing a project from the ground up. However, in order to streamline the processes and create a
PWA faster, you may employ one of the following dev tools that should be chosen according to your
needs and the platforms your website runs on.
11. Magento PWA Studio
Tailored to Magento 2, the PWA Studio is a toolkit designed to be a facilitator in building PWA Storefronts
on top of M2 e-commerce websites. A piece of good news about the toolkit is that it follows the same
release patterns as the second version of Magento so that it is always in line with the architectural changes
and updates of the platform.
It comes with a plethora of tools and advanced libraries corresponding to the M2 principle of extensibility:
● PWA-buildpack (a library for Magento PWAs used to configure and set up a local environment)
● PWA-module that gives module asides and server-side usefulness.
● GraphQL is a great fit for the API side. Since the platform itself is massive, GraphQL is handy for
“unloading” it.
● Peregrine (a set of React components created to handle Magento-specific functionality.
● Venia storefront (needed for displaying the current workflow, features, and visual elements), and
other tools.
12. ScandiPWA
ScandiPWA is another dev solution created primarily for Magento websites. Just like the PWA Studio, this
tool leverages GraphQL developed by Magento itself as the only approach to working with APIs. And that is
where the comparison ends. ScandiPWA is a ready-to-use solution, an open-source Magento theme but not
a set of tools. Since it connects to the same back-end you are already using, the theme doesn’t require extra
databases, middleware, additional services. Due to the absence of a middle-layer, the performance of PWA
apps is not suffering. Besides, every part of the theme can be customized to serve anyone’s needs. As such,
you can make use of a variety of React modules such as Google maps, dynamic sliders, and so on. Scandi
supports multiple languages, stores, domains, as well as other features.
Thus, you can easily install ScandiPWA on top of a Magento 2.3 or newer store. It is not appropriate for
other CMS or earlier Magento versions.
13. Webpack
Webpack is a static module bundler for modern JavaScript applications. Without such bundlers, running JS
files in a browser may cause issues with loading too many scripts in large .js files. This dev tool is
recommended to solve the scaling problem for complex PWA storefronts. Webpack Module Bundler aimed
at building and managing dependency graphs between CSS elements, stylesheets, fonts, images, and other
JavaScript assets. The graphs give developers better control over assets processing, ease code-splitting,
eliminate dead assets, and reduce the server calls.
Among the drawbacks of Webpack are unfriendly documentation, painful source code, and steep learning
curve.
14. SuperPWA
Super PWA is the easiest tool for WordPress users to convert a website into a progressive app. It is a WP
plugin that can be installed and configured within the space of a few minutes. Once the plugin is applied,
your users can get the feel of a native app and can receive push-notifications on their devices (only for
Android users). Thanks to the user-friendliness of SuperPWA, you don’t need to be a high-level developer to
use it. Besides, free UTM tracking add-on allows site owners to track how many visitors are using your PWA.
However, this tool can not be considered as an all-in-one solution that includes everything you need to
develop a PWA from scratch. Thus, we could identify some flaws: the tool provides no Google Analytics
settings, no theming GUI options to make a PWA look more like native apps, and push-notifications don’t
work on iOS.
15. LighthousePWA
Once your PWA is created, you want to measure its performance, SEO, accessibility, and other important
benchmarks. For this purpose, Google provides an awesome analytic tool – Lighthouse. that offers a set of
metrics to test the app to test the application and guide you in creating PWAs with an immersive app-like
experience for your visitors.
The tool significantly reduces the need to carry out manual testing to audit your web application for PWA
features. Lighthouse enables developers to automate a series of tests against a given URL and fleetingly
generate an exhaustive report which gives them a clue about how well the PWA is performing, as well as
what bugs it has. The recorded data can be used to improve the overall performance of the newly created
web application.
Lighthouse can either be run from the Chrome DevTools (from its Audits tab) or automated through the
command line, as a Node module. Alternatively, it can be installed and run as a Chrome extension.
16. Conclusion
To stay afloat in modern market conditions, companies have to adapt to state-of-the-art technologies.
More and more large and middle-sized brands leverage progressive web app methodology to provide
their users with lightning-fast and app-like experience. The number of businesses getting rid of regular
websites in favour of PWAs is growing exponentially. What seemed to us a gimmick 5 years ago is no
longer considered unnatural. Progressive web apps that operate inside a browser but deliver an app-like
UX are something that definitely worth your attention.
With this list of the best PWA frameworks and dev tools for building PWAs, you can create one with
minimum efforts and at a faster pace.
Are you looking to get your App built? Contact us at hello@devathon.com or visit our website Devathon
to find out how we can breathe life into your vision with beautiful designs, quality development, and
continuous testing.