What Framework to Choose When Developing a Progressive Web App
Published: May 2, 2022
5 min read
In this article, you'll learn:
1
⚙️ React, Angular & Vue Technologies
2
🔵 Ionic Technology For Building Progressive Web Apps
3
⚛ React Native Technology for Web
4
❓ Progressive Web Application Development Technologies: Which One to Choose?
PWAs (or Progressive Web Applications) are web platforms that are optimized for mobile devices and, normally, built on a JavaScript framework.
When developing it, make sure to clearly set goals that you want to reach with the PWA. There are several aspects that you should take into account:
- Performance.
- Size of the platform.
- Development speed.
- Desire to migrate to a native app afterward or its absence.
Depending on the goals, you’ll have to choose a certain technology (frameworks) for PWA development. And there are quite a few.
In this article, we’ll try to walk you through the main information regarding these technologies, their pros & cons, and help you find an answer to the main question: How to choose one?
⚙️ React, Angular & Vue Technologies
The first 3 PWA frameworks are:
- React — the most popular framework from Facebook.
- Angular — one of the oldest frameworks from Google.
- Vue — one of the leading frameworks in Asia that was partially modeled on the best sides of Angular.
In fact, these 3 libraries have a lot in common.
They provide developers with a component-built system to build the UI & have sustainable communities that grow every year.
The differences are hardly noticeable. However, there are a few strong points of each framework that help them stand out.
React, Angular & Vue are very similar with a couple of differences that allows developers to freely choose one and get similar benefits (shots from Lilly021)
For instance, Vue provides developers with one the easiest learning curves, whereas Angular is a huge framework with a lot of constraints.
React has the biggest community among these 3 and is used the most.
Besides, Facebook developers are creating a lot of other amazing technologies (like GraphQL), and React is the easiest to integrate these technologies with. At Stormotion, a React.js development company, we prefer React ⚛️ for building PWAs.
Pros & Cons ✅
Each of the 3 technologies will allow you to build a progressive web app that’s scalable and responsive.
Apart from that, the benefits are the following:
- Large community. Each of the 3 technologies has a huge community that will always be in place to help you develop with the development.
- Fast UI development. None of the libraries have built-in elements, however, each of them has a lot of libraries, which could help you develop the UI incredibly quickly.
- Amazing performance. It might differ a bit from the library to the library, but overall, the performance is great and provides impressive user experience.
- A minimum number of bugs. Thanks to the stable community and open-source libraries, the frameworks guarantee as little bugs as possible.
- Server-side rendering. It means that the page is rendered before being passed to the browser, instead of performing rendering within the browser. It helps to make the app more SEO-friendly.
Luckily, there’s only one drawback worth attention. You would need to write a new code to develop a proper mobile iOS/Android native app from the existing code for PWA.
Of course, you could reuse the so-called “business logic”, meaning, you can take the existing data to reduce the development time. But in fact, you’ll have to start the development from scratch if you stick with these PWA frameworks.
🔵 Ionic Technology For Building Progressive Web Apps
Ionic is an open-source set of software development tools for building cross-platform PWAs and more.
Meaning, you can get a both native and web app with just one code.
Ionic framework is known for its hybrid development opportunities (shots from Hackr.io)
This type of framework focuses on front-end UI and UX.
Besides, it’s totally integrable with other libraries and frameworks (React, Angular, and Vue included).
There are 3 pillars that help to build Ionic:
- React, Angular or Vue.
- HTML.
- CSS.
On the backup, there’s Cordova or Capacitor - they’re responsible for the native part of the development.
Speaking of Ionic’s advantages, we should mention the following:
- With one code, you receive both PWA and the native app. Also, if you want to use any of the native libraries - a couple of lines of the code will work.
- Technically, you can write a PWA/native app in any web language you want.
- You get a large variety of native UI elements out of the box.
- Server-side rendering.
We’d like to separate one aspect that has two sides to the coin.
Ionic has quite a big community. However, the community is divided by different ionic versions and the libraries you use (react/angular). Meaning, it can be difficult sometimes to find a solution to your problem in the community.
However, there are a couple of disadvantages:
- Poor performance. Due to the library limitations, you get relatively worse performance compared to other frameworks for both native apps and the PWA.
- Multiple bugs. Every version of ionic brings more and more bugs that aren’t easy to get over.
- Native apps support. Even though with ionic, you get an Android/iOS app out of the box, it’s still complicated to maintain their tech functionality, and if you face any issue with one of the native libraries, there may be no way to solve this problem.
⚛ React Native Technology for Web
This technology was initially built for mobile apps, but now it’s a cross-platform framework that makes developing web apps using native API components possible.
Using React Native Web for PWA development, you get a native app with one code as well (shot from React Native)
Since the purpose of this article is to kind of contrast these frameworks, we’d like to give you an idea of what you can reach using React Native for Web.
So, the strong points are:
- As well as with Ionic, you get both a native app and PWA with one code. Also, if you stick with the Expo, you could work with any native module within a few lines of code. But it doesn’t mean that you can’t work with react-native-CLI and control the whole process yourself.
- UI. React-native-web doesn’t have many native elements, but you can still choose from a wide range of libraries.
- Great performance. You could get it for both native and web apps.
If you want to create a PWA with this option, there are several limitations. However, we can’t classify them as pro or con since they have positive as well as negative aspects. These are:
- Server-side rendering. You can use Next.js to improve SEO and overall experience for react-native-web, however, the integration is much less popular than the react’s, so you might face issues.
- New community. On the one hand, it combines both react-native and react’s community. However, its community is still growing right now and you might face some issues finding solutions to your questions.
- Language limitations. With this option, you can write codes for native and progressive web apps in react-native only.
So generally, this framework provides one of the best PWA development experiences.
❓ Progressive Web Application Development Technologies: Which One to Choose?
Now let’s get to the main question: How can you decide which PWA framework to use?
Well, analyzing the article, you could tell that the crucial factor is your business needs.
For instance, whether you need a native app in addition to the progressive web app or not:
- If yes, then consider Ionic or React Native for Web.
- If no, React, Angular or Vue are better options.
And there are quite a lot of factors that might make a certain PWA framework more suitable.
For instance, if you want the mobile experience to be truly native, take a look at the react-native-web. However, if your goal is to develop a both native app and PWA incredibly fast, you might want to go for Ionic.
Or if you are looking for great performance, you can exclude Ionic from your list.
If you need any help with the development or have any questions on which technology you should choose for developing PWAs, or how they differ from one another, feel free to reach out to us. We’ll find a way to help you!
Was it helpful?
Read also
Our clients say
![Stormotion client David Lesser, CEO from [object Object]](/static/93e047dadd367691c604d8ffd1f54b58/1b3aa/david.webp)
They were a delight to work with. And they delivered the product we wanted. Stormotion fostered an enjoyable work atmosphere and focused on delivering a bug-free solution.
David Lesser, CEO
Numina