The Difference Between a Web, Hybrid, or Native App
Congrats! You've decided to build an app. The next step is figuring out how. Is a web app best? Native? What about hybrid? Your app developers might even start throwing out terms like Progressive Web App, and “wrapped in native framework”. It’s a lot of lingo that can make you feel lost and overwhelmed.
Whether you’re entrenched in the industry or new to app development, choosing the right way to build can be one of your biggest decisions for the product. We want to help you understand your options and guide you towards the best decision.
What’s a Web App?
Lines between website and web app can sometimes feel blurred. While websites focus on sharing content across connected webpages, web apps focus on helping users complete a set of tasks and involve more back-end processing.
However, the line between a web, native, or hybrid app, feels quite clear: if you open Safari or Chrome on your device and enter a URL to access your app, it’s a web app. A desktop and tablet version often accompany the mobile web app, requiring the design to adapt and respond to all screen sizes.
These apps can be the most cost effective for simple applications because their one code base displays in every device’s browser, effectively reaching a larger audience.
Web App Breakdown
User’s perspective:
Accessed via browser, not downloaded from app store, not stored on device
Always displays the newest versions without having to update from an App Store
Can feel less intuitive and interactive than native, or often confused with a website
Working in the browser registers as less commitment than downloading an entire app
Works across all devices, which can increase audience and reach
Developer’s perspective:
Single code base built using CSS, HTML5, and JavaScript
Usually built easily and quickly
One code base means less maintenance than platform specific dual code bases
Meeting expectations for user experience can be harder because of browser limitations
App performance is acceptable, but not as fast as native
Unable to implement the same range of features and functions as hybrid/native apps
Product owner’s perspective:
Not listed on app stores, which means one less channel to push awareness
Cost effective, especially if goal is to reach as many users as possible
Less expensive up front
Example of a Web App
When considering the web app model for your project, think about usage and audience in addition to feature set and necessary system functions. These parameters played a large role for a client of ours, Orange Tree Employment Screening, who wanted to accelerate the background screening process by allowing job applicants to enter personal history information and upload documents using a mobile app.
After working with the client to define the feature set and workflow, we determined the majority of the audience would interact with the app on a one time, heavily involved instance (roughly a three-day period). In addition, the targeted audience covered a wide scope—any and all job applicants—which meant the app needed to be accessible across all platforms and devices. Though the app would require a complex back-end, the front-end would present a simple task list for the user with straight forward capabilities. The document upload process would require access to minimal system functions like taking a photo or accessing files.
Based on this assessment, we decided a web app was the best option. It offered a single code base to maintain and connect to the complex back-end system. The final product resulted in a flexible and robust web app to manage millions of unique users.
What’s a Native App?
When discussing apps, most people envision the native model because it’s familiar: open phone, tap icon, launch app. This association deepens due to the common practice of downloading an app from the App Store or Google Play. Users understand the user perspective of the native model and know where to look to find these apps. What users don’t see is the submission and approval process required to list the product on any app store or launch any updated versions. This involved practice holds the potential to extend timelines or even curtail features that may put an approval at risk.
Through a developer’s lens, native apps reside on mobile phones and are built into the device specific system. This allows native apps to access a mobile device’s system features and hardware like Face ID or fingerprint sensors, contact list, camera, etc. This close connection to the device produces the most intuitive and high performing experience across the three models. It also means that native apps require more complex iOS and Android specific code. Building native apps for both iOS and Android requires two code bases, doubling the cost to maintain and upgrade.
Native App Breakdown
User’s perspective:
Downloaded via the App Store or Google Play and stored on device
Updated via the App Store or Google Play–users could be on older versions
Use of system elements and workflows makes the app feel more intuitive, like an extension of the device
App can feel excessive if downloading for a simple feature set
Matches the standard user expectations when thinking “app” (compared to web app)
Developer’s perspective:
Dual code base written in iOS and Android specific native languages
Dual code can lead to longer development phase and necessary app store approvals can increase timelines
Maintenance is doubled based on a dual code model, and can present challenges in syncing functions and workflows across different platform capabilities
Easiest model to create a solid user experience as a result of easy access to system functions
Fastest performance out of the three models because a network connection is not needed to display pages
Best options for highly customized, feature heavy applications
Product owner’s perspective:
Additional discoverability and awareness due to release on App Store and Google Play
Timeline normally longer when compared to pure web
More expensive and time consuming up front, easier to maintain and more tools to implement solutions
Example of a Native App
The need to heavily access device hardware and system functions usually charts a project’s path toward native app. We saw this with our client, Amplify Development, who wanted an app to reduce phone use in teen driving through parent monitoring and reporting.
During dont™ prototyping, our developers learned that determining child phone use while driving required multiple system functions and phone sensors like accelerometers, location services, and fitness logs. The monitoring data created parent reports and alerts, which encouraged daily app checks. Dependence on device hardware and system functions paired with frequent app use eliminated web apps or hybrid apps as an option.
The final result was iOS and Android specific native apps, which supported the most intuitive user experience expressed through a simple feature set and a complex, device and system reliant back-end. This type of customization and complexity wouldn’t have been possible in a web app.
What’s a Hybrid App?
A hybrid app fuses together components of both web app and native apps. For users, it will download, look, and feel like a native app. For developers, a web app style single code base can be written, maintained, and successfully used across all devices. However, that single code base does become more complex to build and support, because hybrid apps require additional, often third-party elements to reach system functions. You’ll see in the breakdown below how hybrid apps sit between the web and native experience and build.
Hybrid App BREAKDOWN
User’s perspective:
Downloaded via the App Store or Google Play and stored on device
Updated via the App Store or Google Play–users could be on older versions
Feels like a native app, but unable to access the same system functions so UX isn’t as seamless
Performance remains faster than a web app, but slower than native
Matches the standard user expectations when thinking “app” (compared to web app)
Developer’s perspective:
Single code base written in CSS, HTML5, and JavaScript and uses a wrapper like Apache Cordova or Ionic Capacitor to embed pages in native application
The timeline and workload heavily depend upon the quantity and cohesion of plugins
Maintenance also dependent on upkeep and performance of third-party plugins–all someone else’s code
With access to native qualities, an impressive user experience is easier to build than web—unless too many third-party components don’t play nice together
Performance and feature range are middle of the road between web and native
Product owner’s perspective:
Additional discoverability and awareness due to release on App Store and Google Play
Timeline normally shorter when compared to native
Maintaining and writing a single code base could save time and money for future app versions as it’s always written once instead of twice for each iOS or Android platform
Example of a Hybrid App
A hybrid app is relatively new in the development world. Responding to the ever-increasing user experience standards, and seizing an opportunity to streamline developer workloads, shrink timelines and decrease costs, the hybrid app combined the best from web app and native app models.
See A Star, a client of ours, wanted an app that allowed fans to video chat with their favorite athletes. The user experience of browsing athletes, scheduling and buying a session, joining a video chat, and then sharing the recording demanded the benefits of a native app’s download and go model. The developers needed to hook into a considerable amount of system services and device hardware to schedule and host video calls but didn’t want to double coding efforts (and costs) across iOS and Android specific languages. Our hybrid app solution allowed us to meet all of the user, developer, and product owner needs.
How to Decide Between a Web, Native, or Hybrid App?
You’ve made it through the differences between a web app, native app, and hybrid app, now for your roadmap. The following questions serve as a framework for deciding which app approach is best for your project. These are questions and considerations we focus on with every project at KRUTSCH.
Start with the User
1. How often will users interact with your app?
2. How large is your audience? How diverse? How specific?
3. What are your use cases and feature set? Which model best fulfills the use case and feature set’s needs?
Consider Development Effort
1. Does your app need to access device hardware or system services?
2. If considering hybrid, how many third-party plugins will be used? Do those plugins affect the main functionality of your app? Are they reliable?
3. What is your development team’s expertise? Have they built your chosen app method before?
4. Who will be maintaining the code after the product is built?
Let the Wallet Weigh In
1. What team will be managing the product roadmap and strategy after deployment?
2. Do you have your own technical team?
3. What’s your timeline and budget?
In Summary
Deciding between web app, native, or hybrid offers a lot to consider. Thankfully, many of the deciding factors are often worked out during a proper design process that defines your audience, feature set, and workflow. A strong design lead and development team will help guide you through the decision process. But now you’ll be armed with basic knowledge and your own questions to ask.
Emma Aversa is a visual designer at KRUTSCH, with a background in architectural design. She excels at digital design and communication executed through simple, function-forward designs.