Three contenders stand out in the ever-evolving mobile and web application development landscape: Progressive Web Apps (PWA), Flutter, and React Native. Each offers unique advantages and has its own legion of advocates. This article dissects these technologies to understand their strengths, suitability for small to medium-sized businesses (SMBs), and future potential.
Progressive Web Apps (PWA)
PWAs represent a hybrid between web pages and mobile apps, offering the best of both worlds. They are accessible through web browsers and maintain the ability to work offline, send push notifications, and load quickly, much like a native app. Their SEO-friendly nature ensures high discoverability, while their cost-effectiveness makes them a go-to choice for SMBs looking to establish a robust online presence without the hefty investment of a native app.
When to consider PWA:
If SEO and Discoverability are a top priority for your business model.
If you need a quick, cost-effective solution with broad reach and no app store dependencies.
If you build a hybrid between mobile and web apps, for example, including an admin app.
If the majority of your user interactions can happen within a web browser without intensive use of native features.
App stores are an option if you plan to target multiple platforms (iOS, Android, Web, Desktop) with a single codebase.
When Not to Consider PWA:
If your application requires heavy use of native device features or advanced performance.
If you're building complex, resource-intensive applications like games or high-end graphics software.
If you’re not prepared to handle potential native bridging for certain features or third-party integrations.
Flutter
Google's UI toolkit, Flutter, has been a game-changer for developers seeking to build visually attractive, natively compiled mobile, web, and desktop applications from a single codebase. Flutter's draw is its performance, closely resembling native app behavior, and its growing ecosystem. Although it requires developers to learn Dart, its efficiency in cross-platform development cannot be overstated.
When to Consider Flutter:
If you aim for a custom, brand-first UI design consistent across platforms.
If performance is critical, especially for graphically-rich applications.
If you plan to target multiple platforms (iOS, Android, Web, Desktop) with a single codebase with the requirement of app store availability.
When Not to Consider Flutter:
If your team lacks Dart expertise and there's no bandwidth to learn a new language.
If you need a quick prototype, time-to-market is very short unless you have Flutter expertise.
If your application depends heavily on third-party libraries not yet available for Flutter.
If your application is heavily dependent on web accessibility or a web-first approach.
React Native
Facebook's React Native leverages the best web development for mobile app creation. It allows developers to write in JavaScript while providing a near-native user experience. React Native is particularly attractive for its ease of integration with existing systems, substantial community support, and seamless alignment with TypeScript, making it a darling of the developer community.
When to Consider React Native:
If you have experience with React or JavaScript/TypeScript, which can be leveraged.
If you want a near-native performance with access to native APIs and device capabilities.
If you plan to share code between web (React) and mobile apps and have a mobile-first approach.
When Not to Consider React Native:
If you need the highest possible performance for graphics-intensive applications.
If you prefer a language other than JavaScript/TypeScript or want to avoid the JavaScript ecosystem.
If you’re not prepared to handle potential native bridging for certain features or third-party integrations.
Comparison Matrix
A deep dive into these technologies reveals several critical factors for consideration:
Developer Availability: Both PWA and React Native boast high developer availability, while Flutter's niche requirements for Dart knowledge place it moderately.
Performance: While PWAs provide adequate performance for most applications, both Flutter and React Native offers near-native performance, with Flutter slightly edging out in graphics-intensive applications.
Cost-Effectiveness: PWAs win in terms of immediate cost savings. However, for long-term, feature-rich app development, React Native and Flutter are very picks, as long as the target “web” isn’t a priority. In such scenarios, companies often tend to build a second application. A PWA can handle both in the same code base, making it the clear winner for cross-platform.
Future-Proofing
Looking ahead, the potential of each platform remains a pivotal consideration. PWAs are expected to gain more native-like features as web standards evolve.
Backed by Google, Flutter shows promise in its innovative UI design and performance approach.
React Native continues to expand its capabilities, ensuring that JavaScript developers have a robust framework for mobile development for years to come.
The following matrix chart is my first version to validate this week. It will be updated after the Wednesday Stream “Our Tech Journey.” Feel free to provide feedback!
Canva: Prominent Example of a Performance-Driven
By definition, Canva is not a PWA since it doesn’t offer an offline experience due to its API-driven approach. But the point is to display modern capabilities in combination with WebAssembly (WASM).
Spotify PWA
Spotify's innovation with its Progressive Web App (PWA) has significantly enhanced user experience, bypassing app store fees and fostering direct user engagement. The Spotify PWA offers a fast, intuitive interface with personalized features, like adaptive background colors, and it's more accessible than the desktop version. While it provides an ad-free experience for free users, it lacks offline capabilities unless one subscribes to Premium.
Inspirered by: https://www.tigren.com/blog/spotify-pwa/
👉 The PWA's launch led to impressive growth in active users and subscription conversions, proving the strategic value of PWAs for digital services.
🍪 Why was Spotify so successful with the PWA approach?
The NFR’s accessibility and discoverability made linking songs, albums, and other content between users or on social media easy. Instead of installing the Spotify app from the store, you could just start listening to the song.
No barrier to the app stores
No deterrent vendor-lock in; just start to listen and decide later
No updates are necessary by app store; the site is always up to date
You can still switch to the more sophisticated native app installation; it's your choice and no must.
Podcast: My Personal Opinion And Experience
Listen to the snackable podcast
Conclusion – PWA-First Approach
In my very own context, B2B SaaS in small to medium-sized companies, PWA became a viable solution in 2023. For 2024, I would recommend thinking about the following before making a decision:
🍪 Can I build my solution as a PWA? If not, I will consider a different approach.
The reason for this is simple: a PWA offers everything the majority of companies really need regarding requirements and NFRs. In addition to that, the “browser environment, “where the PWA thrives, is versatile and offers extremely good device availability.
You ALWAYS have a browser on board, and you can ALWAYS open links that install the app on your device. That alone is a huge and will only become better over time.
Available APIs and Capabilities
Currently, there is not much you miss in the browser. Native is still ahead, but the gap closes every month.
Conclusion – High-Level View (Objective)
The decision between PWA, Flutter, and React Native will hinge on specific project requirements, existing team expertise, and long-term business goals.
For SMBs and startups, PWAs offer a quick and cost-effective route to market. Modern browser capabilities allow us to build PWA in an “app-like” way. However, for applications requiring intensive performance and being mobile-first, Flutter and React Native are the front runners.
For companies with a team of TypeScript-savvy developers, React Native offers an ecosystem that aligns closely with their skills. Meanwhile, Flutter promises an exciting avenue for those willing to invest in learning Dart.
As the landscape continues to shift, one thing remains certain: the choice of technology will significantly impact the trajectory of your mobile and web application development endeavors.
Remember, there is no one-size-fits-all solution in the dynamic world of app development. The key is to assess, choose, and adapt as your business and technology evolve. Happy coding!
Adrian,
stackableCTO, Mentor, and CTO webbar.dev