A Progressive Web App Framework, or PWA Framework, is a set of software libraries and tools for building apps that run on a native platform by leveraging web technologies. These frameworks are designed to help developers launch apps that are not confined to the web browser or dependent on the native libraries of a mobile platform. The development to deployment cycle of such apps is faster as they run across platforms with a single code base. In addition to enhancing the developer experience, PWAs offer rich features that make the apps stand out in the native look-and-feel and performance.
Since PWAs are based on web technologies, they rely on the HTML/CSS/JS combination, which has historically ruled the web development domain. However, PWA frameworks bridge the link between web and mobile apps so that users can access them as standalone apps without the hurdles of launching a URL on the web browser or installing from the app stores.
While the term “Progressive Web Apps” was coined in 2015, the web itself has come a long way since then. Therefore, the true meaning of “progressive” has evolved to encompass various technologies that replace the traditional JavaScript-based frameworks with more options for developers. These options range from porting non-web applications to web applications, using no-code frameworks, or leveraging the latest trends around GenAI.
This post features five frameworks that defy the traditional approach of building progressive web apps using HTML/CSS/JS to craft experiences for the new age AI, gaming, and Web3 applications.
The Main Selection Criteria for NextGen PWA Frameworks
The idea behind the next generation of progressive web frameworks is to encompass everything as part of the web development stack instead of extending web technologies to native app platforms.
This is creating newer possibilities for developers, so that:
- 1They can code in the programming language of their choice and have their applications ported on the web. They are no longer confined to JavaScript.
- 2They have the choice to efficiently spread the app's business logic across frontend and backend.
- 3They can compose their apps using a set of visual constructs powered by AI, which handles interoperability, responsiveness, and other quirks related to traditional web development.
Considering all these possibilities, a few criteria must be considered to choose the ideal PWA framework for your next project.
PWA Framework Selection Criteria #1: The Non-JavaScript Alternatives for PWA App Development
The Non-Javascript approach is a significant shift in PWA apps. This is good news for developers who want to build web applications based on their preferred programming language and choice of tech stack. Broadly, four options are available:
- 1WebAssembly Based option (or wasm) for building high-performance web applications based on a binary instruction format compiled from a high-level language such as C, C++, or Rust. With this approach, developers can pick a language supported by WebAssembly and also interoperate with JavaScript.
- 2Transpilation Based option for converting source code in one language into equivalent source code in another. This is beneficial for porting standalone scripts and desktop applications to a web interface for easier access.
- 3Compilation Based option for building PWAs for native app platforms such as iOS and Android.
- 4Quasi-JavaScript Based option that uses JavaScript constructs such as JSON and custom expressions to define a low-code syntax for building the app UI and business logic.
PWA Framework Selection Criteria #2: The Target for PWA Development
For PWAs, there are four targets to choose from:
- 1Web Frontend for developing frontend web applications that run on browsers.
- 2Mobile Frontend for developing mobile apps that run on mobile devices under iOS or Android.
- 3Hybrid for developing frontend apps packaged as web or mobile apps.
- 4Backend for developing the backend components of a web or mobile app.
PWA Framework Selection Criteria #3: PWA App Deployment
Traditionally, PWA frameworks such as Angular and React have been designed with CLI tooling, which generates the boilerplate code and is supported by an extensive library of modules. This is a pure source code-based approach to building PWA apps, where the framework does not provide any deployment facility.
The newer PWA app frameworks have adopted a platform-centric approach. The toolchain is backed by a PaaS deployment, and takes care of code generation, compilation, and packaging.
Accordingly, the deployment options for PWA apps can be categorized as:
- 1Self Deployment in which the framework does not provide any deployment options, and developers are free to choose any compatible cloud hosting platform.
- 2Platform Deployment where the framework is part of a platform that hosts the app’s backend
- 3SuperApp Deployment is where the app backend is hosted on a super app platform that takes care of backend deployment and app downloads on a custom app store.
The Top Five Progressive Web Frameworks for PWA App Development
Based on our research, here are the top five PWA Frameworks you can explore for your next web or app development project.
1. Anvil
Transpilation Based
Web Frontend Backend
Platform Deployment
Anvil is a framework for building cross-platform web applications using Python. It lets developers build entire web applications without the knowledge of web development and JavaScript. It offers a no-code interface to build the app UI and define the application's business logic using Python. It supports integrations for databases and APIs and provides the hosting infrastructure with public or private hosting options.
Here is a fully featured Python webapp for a ticketing system built entirely in Python using Anvil.
Key Features:
- 1Offers end-to-end web development using Python
- 2Offers an intuitive UI called Anvil Editor for designing and coding web applications
- 3Supports built-in integrations with common services and APIs
2. Jigx
Compilation Based Quasi-JavaScript Based
Mobile Frontend Backend
SuperApp Deployment
Jigx is an enterprise mobile app development framework and hosting platform with many developer-friendly features and native iOS and Android compatibility support. Jigx follows a quasi-JavaScript approach to the development of PWA apps with declarative JSON, YAML, and JSONata.
Jigx is great for building data-driven apps that seamlessly integrate with business systems and data sources. It also supports rapid development with GenAI for mobile app development.
Key Features:
- 1Offers a rich set of components for building app UI
- 2Leverages AI for building and optimizing mobile use experience
- 3Offers extensions to integration with enterprise workflows
3. Yew
Yew is one of the early Wasm-based PWA frameworks for creating reliable and efficient frontend web applications. It is ideal for building Rust based web apps. It leverages a declarative syntax for embedding web components within Rust. It also supports JavaScript interoperability, allowing developers to leverage NPM packages and integrate with existing JavaScript applications.
Key Features:
- 1Follows a JSX-like syntax for defining HTML components within Rust
- 2Offers extensions for popular IDEs, such as JetBrains and VS Code
4. Fermyon
Fermyon offers a developer toolchain and PaaS for building WebAssembly-based application backend. The Fermyon cloud platform hosts these backend components as a serverless deployment on Kubernetes. Fermyon can run applications far more efficiently and with higher density across any processing architecture within a Kubernetes cluster. It is also offered as an open-source project named SpinKube.
Key Features:
- 1Offers cloud-native WebAssembly for efficient deployment of WebAssembly workloads on the cloud
- 2Supports scalable and denser serverless deployment on Kubernetes clusters
- 3Offers a developer-friendly toolchain based on Spin for building and running serverless applications powered by WebAssembly
5. Emscripten
Emscripten is a low-level framework and essentially a toolchain that ports C/C++ code to run within a web browser, either as Node.js or Wasm runtime. It relies on an LLVM compiler and a GCC and MSVC compatible language frontend, with fast compilation and a low memory footprint.
Emscripten is great for porting standalone tools written in C/C++ to a web interface. A widespread use case is building a command line web app that replicates a command line executable.
Key Features:
- 1Offers a no-frills toolchain to generate wasm output
- 2Great for porting legacy C/C++ code to WebAssembly
- 3Supports conversion from OpenGL based graphic applications to WebGL
Frequently Asked Questions
A PWA framework provides the software libraries, tools and platform support for the development of progressive web apps (PWAs). PWAs are envisaged as standalone apps that transcend the confines of web browsers, and app store restrictions to provides a user experience like that of a platform-specific app. Like a website, a PWA can run on multiple platforms and devices from a single codebase. PWA Frameworks provide the underlying boilerplate code, and the supporting toolchain to develop, and deploy such apps.
However, as the web is progressing towards Web3 and beyond, the scope of PWA framework is changing, as the true meaning of "progressive" itself is shifting. Today, this term signifies a shift away from the conventional JavaScript based frameworks to provide more options to developers for choosing their programming language and technology stack to build and host apps.
PWA apps have many advantages for developers and users. From a developer perspective, PWA apps require a shorter development time since they are built using the familiar web technologies. All the features of a typical web app can be incorporated in these apps, within a single codebase, and compiled to different native app platforms. From user's perspective, PWAs behavie like native app, and are extremely fast. Unless the app requires native platform capabilities, or high performance graphics and computing capabilities, a PWA app is more efficient than native app in most cases.
