The 5 best open source frameworks for building progressive web apps


Almost half of all people now have an Android or iOS phone which has the computing power of a desktop PC. This means that developers have the ability to build more and more sophisticated apps, which is why you should use progressive web apps, or PWAs.

A PWA is a web application designed to function as a native application on a mobile platform, although it is distributed over the web. You can use PWAs to optimize your app’s mobile web experience and take advantage of advancements that have emerged over the past four years.

PWAs offer several benefits to users and developers. Once users download and install your app, they can use it without having to log in over and over again. Additionally, PWAs use as little memory as possible, which can be of significant benefit to users, especially those who access a mobile network frequently, such as truck drivers or outdoor recreation enthusiasts.

While business tools for creating 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 ones are best suited for different needs and experience levels. My team have used them all at one time or another.

Webpack

Webpack can create client-side module sets, 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 further work.

Webpack automatically creates additional modules, called transpilers, to be included in the final PWA bundle. It uses Babel to transform the code between different languages. These modules perform local optimizations on the code by taking advantage of hardware-specific functionality. They are also responsible for the translations of Babel.

Babel works with global modules and custom modules, which is particularly useful for supporting custom languages. In many ways, Webpack is the leader in PWA creation. The tool is relatively easy to use and does exactly what it says on the tin: you can create PWAs. Webpack is a great tool for building PWAs and is ideal for medium to large businesses. Small businesses may want to rely on AMP (see later in the article) as an alternative to PWAs.

Ionic

Ionic applications offer you two key benefits that make it the right way to develop a PWA. The first is direct control over the code you are working with. App developers usually only have limited power over a website. While most of the control is out of the hands of the developer, there are some places where you can exercise some control, for example, when deploying or viewing 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 user interface components to add additional functionality to a website. This makes the code more flexible and allows you to create more immersive experiences.

Ionic is a solid framework, and back when PWA solutions were still new, it was a great choice. Today, my teams find Ionic integrated with other CMS solutions, and we are more than happy to use it. That said, Angular remains our current favorite as an alternative to using Ionic.

PWABuilder

PWABuilder allows you to easily convert an existing website to a PWA. You can see a production version of the open source project at pwabuilder.com.

Here are some of the main reasons you would use PWABuilder:

  • Clear and intuitive user experience
  • Quick and easy development
  • Simplified deployment with predefined typography, HTML, JavaScript, CSS and UX
  • The freedom of an application with the power of a CMS

PWABuilder is a great tool for converting a website and presenting a “future” PWA version of the original site. This is ideal for small to medium sized sites where time and budget are limited. It’s not a tool that my teams use often because most of the sites we build are very large. Our experience has shown that customers want specific PWA solutions capable of meeting an immediate need. If your website is large then PWABuilder may look like a Swiss Army Knife trying to solve all the problems. Keep your approach simple.

Angular

Responsive design has made life for developers much more comfortable, with websites that scale with the needs of the device accessing them. Not all websites can be written in a strict architectural fashion, which makes it more difficult to design for specific devices.

Angular brings the concept of incremental improvement to the table. By using a method in Angular known as “directives”, you can create websites that adapt to different devices. This way, you can write high quality code to fit any device without making significant changes to the HTML code.

Another advantage 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. Additionally, TypeScript is multilingual, which means that it can handle multiple programming languages.

Using the powerful built-in TypeScript compiler and internal real-time execution, you get the best of both worlds. Using the TypeScript compiler, you can write JavaScript code, which means you have access to the latest JavaScript APIs, but you don’t need to know the intricacies of JavaScript to program your website.

Slender

The strength of Slender 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.

That said, there are a few challenges with Svelte. The first is that, as a tool, it sits between beginner tools like PWABuilder and advanced frameworks like Angular and Ionic. For this reason, it is somewhat difficult to know who the target audience for Svelte is.

A second challenge is that it is difficult to add complexity to the solutions developed by Svelte. Other platforms, such as Angular, offer a much more in-depth feature set, although you need to be familiar with TypeScript to create these solutions.

What my team found is that Svelte is useful for creating quick prototypes. We can show a client within hours what a potential solution might look like and what it looks like. If the customer is happy with the result, then we can give them the Svelte constructed answer. More often than not, the customer will see what has been produced and then ask for additional complexity. This is when we go from prototype to building a complete PWA with tools like Ionic or Angular.

Accelerated mobile pages

Why should you consider applying Mobile Accelerated Pages (AMP) to your website? The answer, Google says, is simple. AMP offers developers, publishers and publishers “a fast and secure publishing experience”.

AMP uses HTML, CSS, and JavaScript to quickly load and display a website on 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 integrate it into any type of site, including blogs, forums, shopping carts, wikis, galleries, music sites, news sites. , photo sites, online gaming sites, WordPress sites, etc.

Most of the major open source content management platforms, such as WordPress.com and Joomla, have adopted AMP, while others, such as Drupal, support AMP through third-party plugins. This opens up possibilities for WordPress website owners: a whole new group of publishers and users can reach the same search traffic and the same traffic from social media.

How to decide

To decide which of these five tools is right for you, start by determining the skills your team has to implement a PWA framework. Unfortunately, these skills are hard to come by, so for many teams, the PWA tool you implement will be guided 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 small groups with less experience.

As a framework, Angular is easier to adapt than other frameworks due to its dependency on TypeScript. Additionally, Angular has a strong community of support. Chances are, if you had a problem, someone else did too and posted a solution.

Ultimately, you need to have a website that can quickly scale to any screen size. Check your web logs and you might find that 75% to 80% of the traffic to your site is from smartphones with a screen size of 3.5-6 inches. Your customers probably also use tablets, as well as traditional laptops. If you don’t use a PWA, these users might have a less than optimal experience. Develop your site as a PWA and your customers will be much happier.

Keep learning


Comments are closed.