To App or Not: When to Choose Native or Web

In today's landscape, deciding between building a native app or a web app can significantly impact your project's success and user experience. As technology advances and user expectations continue to evolve, the decision-making process becomes increasingly complex. Let's dive into the key considerations that can help you determine what is right for you, a native app or a web app. We'll also look at real-world examples of apps and examine the reasons behind their choice of development approach.

This talk has been presented at React Day Berlin 2023, check out the latest edition of this React Conference.

Watch video on a separate page

FAQ

Capacitor allows web developers to package their web applications as native apps while retaining access to native project configurations and code, bridging the gap between web and native platforms.

Web development has evolved significantly, moving from FTP uploads to using Git for version control and automating builds and deployments with services like GitHub Actions, Netlify, and Vercel.

Native apps can operate offline, access low-level device features, offer better discoverability and monetization opportunities, and provide a more secure environment with a clear permissions model.

Mike Hardington is developing a new product featuring a compelling UI library and embedded AI to provide contextual information to users.

Mike is contemplating whether to distribute his app as a native app or a web app.

Native apps allow for direct charges for downloads, in-app purchases, and potentially higher visibility in app stores, which can lead to better monetization compared to web apps typically reliant on advertising.

The core languages for building web apps are HTML, CSS, and JavaScript.

Mike faced challenges such as learning Xcode, dealing with low-level programming languages, and deciding between a mobile app and a web app due to the prevailing belief that serious companies need an app.

Mike Hartington
Mike Hartington
23 min
12 Dec, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
The Talk discusses the choice between building native or web apps for software development. It explores the benefits of building web apps, such as fast development, easy debugging, and universal rendering. It also highlights the power of native apps, with their advanced features, better offline experience, and monetization opportunities. The Talk suggests using libraries like Capacitor or React Native to combine the benefits of both web and native apps.

1. Introduction and App Distribution

Short description:

I have an opportunity for you all to join me in building the latest and greatest product. It includes a compelling UI library and AI for contextual information. I need help figuring out the best way to distribute it as there are multiple paths to choose from. Should we build a native app or a web app?

Okay, I only have like 20-ish minutes but I have an opportunity for you all and I would like to invite you to join me. So I'm building the latest and greatest product these days. It's got a compelling UI library that I personally know and love. It includes a bunch of AI in there so that way we can provide contextual information to all of our users. I gotta figure out the last part but it's something to do with how we can get that app out to everybody. And that's the part I'd like to actually invite you to help me figure out. What is the best way to distribute this? Really at the end of the day I want to make sure that this app is available to everybody. It's a really really difficult thing to figure out because there's multiple distribution paths to how you can ship an app and which path you choose is going to influence how you actually go ahead and build the app. So let's go ahead and try to walk through this process. We're going to figure out if we should app or not, whether or not we should ship this app as a native app or as a web app.

2. The First App and Native vs. Web

Short description:

This is the story of the first app I built in 2012. It was a time when mobile apps were necessary to be taken seriously as a company. As a web developer, I had to learn Xcode and deal with low-level languages. Android development was also challenging at the time. However, both iOS and Android have come a long way since then. I questioned why we didn't just build a web app, but that was the time of native apps.

I'm Mike Hardington, I work at a company called Ionic. You can find me basically everywhere online as mhardington.

Before we do that though, let's take a trip back to the very first app I ever built. This is an app, don't worry, logos, company names have been kind of obfuscated a bit. But this was an app I built circa 2012. It was a very interesting time in that space, there was this is pre iOS 7, so we're still dealing with some of this blocky skeuomorphism. But what we do have is an app that was loading a bunch of content from a remote service. We're pulling in images, we're pulling in product descriptions. I mean, we're even pulling in some of the styles that were used in that product because this app was built using a app shell and loading up HTML, CSS and JavaScript. This was truly just like cutting edge at the time, but it allowed us to build out this whole entire product demo that we could then go ahead and distribute to all of our salespeople and all of our technical trainers and give them the information they need right on their device.

Now the questions that I had was, well, if we're pulling in all of this web content, why do we need a mobile app? And at the time, the general consensus was, well, you need an app to become a serious company. And that was the end of the discussion. That was easy enough for the head of the company to say, but me, as a lowly web developer, one of the things that I had to deal with was learning Xcode. And this was truly the time when Xcode looked like iTunes. There was a lot of Objective C, even C, C++, like really, really low level stuff. And this is that, as a JavaScript developer, I was not well equipped to handle this. I basically stumbled my way through it. Thankfully, times have kind of evolved since then where we have a much nicer-looking IDE for iOS development, but also we have better languages that are more approachable for people coming from non-low level system languages.

Android was not as great as, well, we didn't even have an IDE at the time. We were using things like Eclipse with the Android SDK plugin enabled so that way we could go ahead and do some Android development. This was not the great Android development of Kotlin. We were still writing Java. We were still dealing with some of these antiquated approaches to building Android apps and doing things for Android pre 4.0 was pretty challenging. Thankfully, like iOS, Android has also come a long way, where the Java that we do write is actually much more familiar to people who have done JavaScript now and TypeScript, and the IDE is, if you've used any IntelliJ product, it is going to be the same IDE, because it is based off of all of their core editor experience.

But again, I kept pushing for, why don't we just do this as a web app? This is the time of the web, right? Everything's gonna be great. I didn't need to build and deploy up my web app. I just needed to bundle all my scripts together and then bring up the FTP client. I had my credentials. I knew where the folder was on my desktop. I could just drag it over to our hosting provider, upload it, and we're done, right? And that was 2012.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

A Framework for Managing Technical Debt
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
Watch video: Debugging JS
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Building a Voice-Enabled AI Assistant With Javascript
JSNation 2023JSNation 2023
21 min
Building a Voice-Enabled AI Assistant With Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
A Practical Guide for Migrating to Server Components
React Advanced 2023React Advanced 2023
28 min
A Practical Guide for Migrating to Server Components
Top Content
Watch video: A Practical Guide for Migrating to Server Components
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
Power Fixing React Performance Woes
React Advanced 2023React Advanced 2023
22 min
Power Fixing React Performance Woes
Top Content
Watch video: Power Fixing React Performance Woes
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.
Monolith to Micro-Frontends
React Advanced 2022React Advanced 2022
22 min
Monolith to Micro-Frontends
Top Content
Microfrontends are considered as a solution to the problems of exponential growth, code duplication, and unclear ownership in older applications. Transitioning from a monolith to microfrontends involves decoupling the system and exploring options like a modular monolith. Microfrontends enable independent deployments and runtime composition, but there is a discussion about the alternative of keeping an integrated application composed at runtime. Choosing a composition model and a router are crucial decisions in the technical plan. The Strangler pattern and the reverse Strangler pattern are used to gradually replace parts of the monolith with the new application.

Workshops on related topic

Build Modern Applications Using GraphQL and Javascript
Node Congress 2024Node Congress 2024
152 min
Build Modern Applications Using GraphQL and Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Come and learn how you can supercharge your modern and secure applications using GraphQL and Javascript. In this workshop we will build a GraphQL API and we will demonstrate the benefits of the query language for APIs and what use cases that are fit for it. Basic Javascript knowledge required.
Building a Shopify App with React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
Build a chat room with Appwrite and React
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
Wess Cope
Wess Cope
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
Hard GraphQL Problems at Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
WorkshopFree
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.
0 To Auth In An Hour For Your JavaScript App
JSNation 2023JSNation 2023
57 min
0 To Auth In An Hour For Your JavaScript App
WorkshopFree
Asaf Shen
Asaf Shen
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.js backend + Vanilla JS frontend) to authenticate users with One Time Passwords (email) and OAuth, including:
- User authentication – Managing user interactions, returning session / refresh JWTs- Session management and validation – Storing the session securely for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.