Progressive websites are rapidly growing in popularity as a way to build apps with JavaScript, CSS, and HTML that have a level of performance and usability that's nearly identical to native apps. While there are many “Introduction to progressive web apps” tutorials on the web, I want to dig a little deeper and offer suggestions for JavaScript tools and libraries you can use to start developing PWAs at a faster pace, and with minimum complexity.
There are critical capabilities that separate a progressive website from a traditional website. Progressive web apps must be able to do the following:
- Work with most browsers and devices (mobile and desktop) with a progressive codebase
- Fit all screen and form factors using a responsive design
- Leverage service workers to enable offline connectivity (HTTPS required)
- Provide an app-like experience that leverages re-engagement tools, such as push notifications
- Leverage a web app manifest to describe the used resources
A good place to start if you are new to progressive web apps is Google's guide to building your first progressive web app. The goal of this article, however, is to assume that you have experimented with or completed your first progressive web app and are looking for tools that will let you to build out apps faster. Here, then, are the top tools my team uses to create progressive web apps.
Building progressive web apps with React
The first step in building a progressive web app is to choose a core framework. There are many frameworks, and I encourage you to look at the choices, but for we use React, for two reasons:
- It's managed and supported by Facebook, which uses the framework on its sites and thereby demonstrates that the framework is rigorously tested with 1.18 billion users daily.
- React is the foundation for React Native, which lets you easily port apps built with React to native apps.
The appeal of ReactJS is its component-centered approach to development. Each component is built using JavaScript, and you can easily reuse it. Using JavaScript has its advantages:
- We have many developers who already know JS, and so do not need to learn a new language.
- Rich data can be quickly passed through the DOM layer.
- ReactJS supports both raw and JSX JavaScript. JSX is an XML-like syntax for writing JavaScript.
The UI consists of components. Those components can render in the browser, on the server, using Node.js, and inside apps, using React Native. In this way, the challenges of managing apps that need to be delivered to many different operating systems, browsers, and devices are resolved.
Getting started: Using a Polymer template
You can significantly reduce the time required to setup a progressive web app by using Polymer as a template. This open source project by Google is frequently updated to keep it in sync with the open source projects the template leverages.
The Polymer templates use the PRPL pattern to optimize delivery of the app to the device. Use it to:
- Push critical resources for the initial route
- Render the initial route
- Pre-cache the remaining routes
- Lazy-load and create remaining routes on demand
You need to use an HTTP2 server to deliver on-demand resources. Also, the server will pre-cache resources that the service workers provide. Design-wise, the Polymer template applies Google’s popular material design by default.
My team uses Polymer to quickly build prototypes. It enables them to immediately start on the important work (the code for the project) and rapidly bypass custom setup.
Managing dependencies with Webpack
While Polymer is great for getting started, there are times when my team will need to develop custom apps. To this end, we use Webpack—a module bundler for JavaScript applications.
Webpack makes creating dependency graphs much easier. A dependency graph removes the need for managed dependencies, meaning you no longer need to link to all those JS files at the bottom of an HTML web page. Moving to CommonJS or ES6 modules dramatically reduces the number of calls to and from a server, resulting in a faster app.
With Webpack, all non-code assets (images, CSS, fonts, etc.) can be called via JavaScript as objects that have significant speed benefits.
Webpack is not perfect. The learning curve is a little harsh (but manageable), and the documentation code is not great. But Webpack is essential for complex, front-end driven progressive websites.
Manage MVVM bindings between JS and HTML with Knockout
Sometimes you don't even need a versatile framework like React to build a progressive website. My team uses Knockout to build lightweight progressive apps.
They use it with JavaScript to handle Model-View-ViewModel (MVVM) bindings. Hre are the key benefits of Knockout that have kept it in our toolbox:
- The library can be easily dropped into existing websites without an extensive rewrite.
- The library is tiny (only 13KB).
- While small, the library still offers a great deal of functionality.
We consider Knockout a great “go to” framework for a smaller projects, where speed of execution is paramount. We often use Knockout to develop proofs of concept during a design sprint.
There are two reasons why we use Knockout for quick projects instead of React. First, we can use Knockout to extend HTML, which in turn makes it easier to learn, and it does not require JSX. The second reason is templating. Templating makes it easier to build complex apps, because it minimizes the duplication of DOM elements. The following example demonstrates how easily a template can be added to an HTML page:
<!DOCTYPE html>
<head>
<title>KnockoutJS Templating - foreach used with Template</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.1.js" type="text/javascript"></script>
</head>
<body>
<h2>Fruit List</h2>
Here are the fruits from your list:
<div data-bind="template: { name: 'displayFruit', foreach: fruit }"></div>
<script type="text/html" id="displayFruit">
<h3 data-bind="text: name"></h3>
<p>Kingdom: <span data-bind="text: kingdom"></span></p>
<p>Description: <span data-bind="text: description"></span></p>
</script>
<script type="text/javascript">
function MyViewModelofFruit() {
this.fruit = [
{name: 'Strawberry', kingdom: 'Plantae', description: 'The garden strawberry (or simply strawberry; Fragaria × ananassa)[1] is a widely grown hybrid species of the genus Fragaria ... ' },
{name: 'Apple', kingdom: 'Plantae', description: 'The apple tree (Malus pumila, commonly and erroneously called Malus domestica) is a deciduous tree in the rose family ...' } ]
}
var vm = new MyViewModelofFruit();
ko.applyBindings(vm);
</script>
</body>
</html>
Knockout is easy enough for a junior developer to learn quickly, and it comes with many attributes that would otherwise need to be written in competing frameworks, such as Backbone.js.
Check your code with Lighthouse
The final part of our progressive web app toolchain is Google’s PWA performance monitoring tool, Lighthouse, which installs as a plugin for Chrome. Go to the progressive website you want to run tests against, and click on the Lighthouse button in Chrome's toolbar once you've installed the plugin. The report you receive has a lot of detail in the report. The first section, "Progressive Web App", returns the following analytics:
- App can load offline/flaky connections
- Page load performance is fast
- Site is progressively enhanced
- Network connection is secure
- User can be prompted to add to home screen
- Installed web app will launch with custom splash screen
- Address bar matches brand colors
- Design is mobile friendly
Each of these sub-sections then breaks out specific technologies that you can add or modify to improve the performance of your progressive web app. For instance, the report for "App can load offline/flaky connections" provides details on:
- Has a registered service worker (and describes what a service worker is)
- URL responds with a 200 when offline
The second section, "Best Practices", provides details on the following:
- Using modern offline features
- Using modern Protocols
- Using modern CSS
- Using modern JavaScript features
- Avoiding APIs that harm the user experience
- Accessibility
The third section, "Performance", lists how fast it takes to load a single page from a responsive web app and how long each item in the page takes to load. It also includes tools to drill down into any issues causing slowdowns.
The final section, "Fancier Stuff," examines whether the latest HTML5/JS features are in use.
The goal with Lighthouse is to both test your site, and to give you the direction to fix the issues.
Extra tools
The above tools are a selection of the many different progressive web application tools our team has reviewed. A few extra tools that you might want to consider in addition to (or as a replacement for) the tools above include:
- AMP (Accelerated Mobile Pages)—Tools to guide image/JS compression to speed up your website. Google heavily supports AMP (even going as far as to highlight AMP-powered mobilewebsitess in search results). Google supports AMP Cache on the elements in AMP, which developers can leverage without any cost.
- AngularJS—Google’s front-end JavaScript framework is more heavyweight than React, but also highly preferred among enterprise Java and .NET developers
- Ionic 2—The AngularJS 2-based framework was released in early 2017 and looks, at first glance, like an attractive solution for building on the success of the original Ionic framework, released in 2015. Ionic is a good platform for developers moving from Cordova/PhoneGap to modern responsive web app solutions.
The bottom line is that the tools for progressive web apps are still maturing and changing at a rapid rate. Many of the leading browser vendors, specifically Apple (with Safari and mobile Safari), Google (with Chrome) and Microsoft (with Edge) provide regular updates every 1-3 months. We are always keeping a close eye on new solutions, and evaluating how or if we should be using them in our projects. The end goal is to increase the app-like experience using web technologies.
Image credit: Flickr
Keep learning
Take a deep dive into the state of quality with TechBeacon's Guide. Plus: Download the free World Quality Report 2022-23.
Put performance engineering into practice with these top 10 performance engineering techniques that work.
Find to tools you need with TechBeacon's Buyer's Guide for Selecting Software Test Automation Tools.
Discover best practices for reducing software defects with TechBeacon's Guide.
- Take your testing career to the next level. TechBeacon's Careers Topic Center provides expert advice to prepare you for your next move.
