Almost half of all people now have an Android or iOS phone that has the compute power of a desktop PC. That means developers have an opportunity to build increasingly sophisticated apps—which is why you need to use progressive web apps, or PWAs.
A PWA is a web application designed to function like a native app on a mobile platform, though it's delivered over the web. You can use PWAs to optimize your app's mobile web experience and to take advantage of the advances that have emerged over the last four years.
PWAs offer several benefits to users and developers. Once users have downloaded and installed your application, they can use it without having to log in over and over again. Also, PWAs use the least memory possible, which can be a significant advantage for users, especially those who frequently access a mobile network, such as truck drivers or outdoor recreation enthusiasts.
While commercial tools for building PWAs are available, open source is the dominant player in this space. The bottom line is that you can deliver successful PWAs using a combination of open-source and commercial cloud solutions.
Here are my recommendations for the top five open-source frameworks you should consider for building your own PWAs, along with an explanation of which are best for different needs and levels of experience. My team has used all of them at one time or another.
Webpack
Webpack can create module bundles on the client side, which means your source files will be parsed and compiled on the server as your code is processed. It can also pass the compiled bundles to the browser as-is, without any more work.
Webpack automatically creates additional modules, known as transpilers, to include in the final PWA bundle. It uses Babel to transform code between different languages. These modules perform local optimizations on the code by taking advantage of hardware-specific features. They're also responsible for the Babel translations.
Babel works with global modules and custom modules, which is particularly useful for custom language support. In many ways, Webpack is the leader for PWA creation. The tool is relatively easy to use and does exactly what it says on the tin: you can build PWAs. Webpack is an excellent tool to create PWAs and is ideal for midsized and large companies. Smaller companies may want to rely on AMP (covered later in the article) as an alternative to PWAs.
Ionic
Ionic apps offer you two key benefits that make them the right way to develop a PWA. The first is direct control of the code you are working with. App developers usually have only a limited amount of power over a website. While most of the control is out of the developer's hands, there are some places where you can exert some control, for example, during deployment or displaying pages. Progressive websites give you some of that control back.
The second benefit is increased control over the content. When developing progressive websites, you can use Ionic's UI components to add extra features to a website. This makes the code more flexible and enables you to create more immersive experiences.
Ionic is a solid framework and, in the days when PWA solutions were still new, it was an excellent choice. Today, my teams find Ionic incorporated into other CMS solutions, and we are more than happy to use it. With that said, Angular remains our current favorite as an alternative to using Ionic.
PWABuilder
PWABuilder lets you easily convert an existing website to a PWA. You can view a production version of the open-source project at pwabuilder.com.
Here are some of the primary reasons why you would use PWABuilder:
- Clean and intuitive user experience
- Fast and easy development
- Simplified deployment with pre-built typography, HTML, JavaScript, CSS, and UX
- The freedom of an application with the power of a CMS
PWABuilder is an excellent tool to convert a website and showcase a "to be" PWA version of the original site. This is ideal for small and midsized sites where time and budget are restrictive. It is not a tool my teams often use because many of the sites we build are very large. Our experience has shown that customers want PWA solutions that are specific and can solve an immediate need. If your website is large, then PWABuilder can feel like a Swiss Army Knife that is trying to solve all problems. Keep your approach simple.
Angular
Responsive design has made developers' lives much more comfortable, with websites that scale according to the needs of the device accessing it. Not all websites can be written in a strict architectural manner, making it harder to design for specific devices.
Angular brings the concept of progressive enhancement to the table. Using a method in Angular known as "directives," you can make websites that scale to different devices. This way, you can write high-quality code to fit any apparatus without making significant HTML code modifications.
Another plus of Angular is that it uses TypeScript, a superset of JavaScript. TypeScript automatically converts your JavaScript code into the languages you need to make development smoother. Also, TypeScript is polyglot, which means it can handle more than one programming language.
Using the built-in powerful TypeScript compiler and the in-house real-time runtime, you get the best of both worlds. Using the TypeScript compiler, you can write JavaScript code, which means that you have access to the latest JavaScript APIs, but you don't need to know the intricacies of JavaScript to program your website.
Svelte
The strength of Svelte is that it is easy to use. Its drag-and-drop interface makes Svelte the right choice for designers with no development experience. You can be up and running quickly.
With that said, there are a couple of challenges with Svelte. The first is that, as a tool, it falls between beginner tools such as PWABuilder and advanced frameworks such as Angular and Ionic. For this reason, it is somewhat unclear who the target audience for Svelte is.
A second challenge is that it is difficult to add complexity to Svelte-developed solutions. Other platforms, such as Angular, offer a much deeper set of features, even if you need to know TypeScript to build those solutions.
What my team has found is that Svelte is useful to create rapid prototypes. We can show a client in a matter of a couple of hours what a potential solution can look and act like. If the client is happy with the outcome, then we can give them the Svelte-built answer. More often, the client will see what has been produced and will then ask for additional complexity. This is when we switch from prototype to building a complete PWA with tools such as Ionic or Angular.
Accelerated Mobile Pages
Why should you consider applying Accelerated Mobile Pages (AMP) to your website? The answer, says Google, is simple. AMP gives developers, publishers, and publishers "a fast and secure publishing experience."
AMP uses HTML, CSS, and JavaScript to quickly load and render a website to a mobile device. The AMP Store's hundreds of free templates and themes make it easy for publishers to find and test AMP-compatible technology.
Since AMP is open source, you can incorporate it into any type of site, including blogs, forums, shopping carts, wikis, galleries, music sites, news sites, stock photography sites, online game sites, WordPress sites, etc.
Many of the leading open-source content management platforms, such as WordPress.com and Joomla, have adopted AMP, while others, such as Drupal, support AMP through third-party extensions. This opens up possibilities for WordPress website owners: A whole new group of publishers and users can reach the same search traffic and traffic from social networks.
How to decide
In deciding which of these five tools is best for you, first consider what skillsets your team has to implement a PWA framework. Unfortunately, these skills hard to find, so for many teams the PWA tool you implement will be driven by your team's knowledge and the support you can get from the open-source community. That's why Angular and Ionic are popular choices for larger, more experienced teams, while Webpack and PWABuilder are better options for smaller groups with less experience.
As a framework, Angular is more comfortable to adapt than other frameworks due to its reliance on TypeScript. Also, Angular has a strong support community. There is a good chance that if you run into a problem, someone else has too and has posted a solution.
At the end of the day, you must have a website that can adapt quickly to any screen size. Check your web logs, and you might find that 75% to 80% of the traffic to your site is coming from smartphones with a screen size of 3.5 to 6 inches. Your customers are probably also using tablet computers, as well as traditional laptops. If you don't use a PWA, those users could have a less-than-optimal experience. Developing your site as a PWA and your customers will be much happier.
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.
