Magne's blog

The different tech strategies for building a cross-platform app

The different tech strategies for building a cross-platform app

Magne's photo
Magne
·

25 min read

Table of contents

Last updated: 2024-02-26 - also published to dev.to

What are the general technology choices when building an app that should run on both mobile and web/desktop?

Let's list them and detail some important factors and gotchas with each approach. You could also skip to my recommendation at the end. There I also compare and suggest some best-in-class starter repos, to quickly get you started.

Note that this article is mostly geared towards (senior) developers and CTO's, although others should be able to get an overall impression from it as well.

In no particular order:

1. iOS + Android + webapp

  • 3x codebase. The webapp (HTML+CSS+JS) is not reused on native.
  • Must know and use 3 programming languages: Swift for iOS, Kotlin for Android, and JS for web.
  • Hiring might be more difficult (specialized/smaller talent pool), as well as more difficult to create a cohesive company skillbase. A shared skillbase is desirable for synergy in knowledge sharing, and for flexibility: easier for all developers to pitch in where it's needed or if someone is sick.
  • Must maintain 3 codebases, and keep feature releases in sync. This can be hard, since the difficulty of implementing various functionality can vary across platforms, and developers might have varying skill level and efficiency. So if you want to release the same feature on all platforms at once, you might need to stall a release on one platform (e.g. iOS) while waiting for the implementation be completed on another (e.g. Android). Different times for App Store review process for iOS and Android might also cause delay. Platform specific bugs is another reason the experience may vary across platforms, and for development across platforms to get out of sync (e.g. the Android developer can't work on a new feature at the same time as the iOS developer, due to having to work on fixing a bug in a previous release. Or vice versa.).
  • Native features faster: Quickest path to utilizing native features/UX improvements once they are released, no need to wait for a third party implementation. Example: shared element transitions first came to native, then were replicated on the web.
  • App startup time is likely faster, since no need to load third party framework (like React Native or CapacitorJS).

2. React Native + React

  • 2x codebase (must write and maintain 2 codebases), but "learn React once".
  • If using Expo OTA / EAS Update you could push out app updates to all clients immediately, without having to go through the App Store review process (which may take days or up to 2 weeks) or risking that users don't download the update. (But Apple wants you to go through the App Store review process for significant changes to the app, outside of bug fixes etc.)
  • React Native can even run on Windows and MacOS too, not only mobile. Even on tvOS and other platforms. See React Native's many platform vision.
  • App startup/bootup time with the new Hermes engine that React Native uses is likely fast enough (you can achieve sub-second bootup).
  • Native features later: You'll have to wait for RN implementations of new native features released on each platform (or implement them in RN yourself), and potentially also for bugfixes of RN builds. New native features unique to a platform (either iOS or Android) can typically not be utilized until an equivalent feature is available for the other platform (and someone makes a RN library that utilizes the two).
  • Monorepo: You could share some amount of code between the native and web codebases, notably: Business logic, state management, some configuration (translation files, TS types, URL endpoints, currency conversion etc.), API calls, formatting request/response data, and authentication. But you would traditionally not share UI Render code (look-and-feel, like: styling, animations, navigation). That would be platform-specific. The benefit is that users on a platform will get a look-and-feel closer to what they are used to. The downside is that look-and-feel across platforms may unwittingly diverge (native mobile vs. mobile web, for instance). That may afford users, who use or switch between several platforms, a more inconsistent experience. The consistency and simultaneous release of new features/UX would also need to be manually kept in sync by developers, which may be challenging over time. But on the other hand, it might be a good solution if you expect your native and web products to intentionally diverge over time. A possible monorepo starter kit with this approach is react-native-universal-monorepo or create-t3-turbo. It should already here be said that modern libraries for cross-platform styling (like Nativewind or Tamagui), and for cross-platform navigation (like Solito or react-native-url-router) challenge the aforementioned traditional principle that you should not share UI Render code (styling, animations, navigation) across platforms. Nativewind or Tamagui have become viable options, even to be used in monorepo approach (with two separate apps; write all components twice). But they realize their full potential if you do choose to share code across platforms (write all components only once), such as with using React Native Web.
  • Flexibility/power: Your progress is not blocked by the web standardization process (and their implementation across browser vendors). Instead, you can rely/wait on libraries from the React Native ecosystem, or take full control and implement what you need yourself.

3. React Native for Web (RNW)

  • 1x codebase, "write React once". RNW could have been called "React Universal", as it can run on many platforms due to React Native. See The case for the React Native Web singularity.
  • RNW simply lets you use your React Native components (and app) on the web, by translating <View> to <div> etc. (You're not running the React Native engine on the web, but your components written in the React Native API is simply aliased/translated to be able to work with react-dom which React normally uses on web.).
  • Not using React Native Web from the start (if your users "inevitably" want to have a native app) was a famous regret.
  • Ecosystem challenge: Most React Native library developers don't necessarily develop with the web in mind, and vice versa. Which can make it hard to find matching components for native and web and writing a consistent wrapper component. There are some React Native packages with known web support (about 166/1142 of the few officially listed as of 2022-10-04). React Native has about 24% the amount of libraries as the React ecosystem. As of 2022-10-05: React Native has 41 615 libraries available on NPM, but React has a much larger ecosystem of 212 722- 41 615 = 171 107 libraries for web. If you're planning on only ever deploying your app to the web, you might want to go with plain React instead for this reason.
  • React Native Web is traditionally very SPA focused, and it's StyleSheet.create solution is using CSS-in-JS. So some have found it tricky to combine with SSR (for SEO purposes), especially with responsivity through CSS media queries.
  • Tip: Use Tamagui for the optimal experience, and SSR compatibility. It solves the aforementioned problem, as it compiles your styling to CSS media queries on web. Tamagui is a lightweight primitive style system, and fully fledged component UI library, that lets you easily create a design system. The community has made tamagui-extras to provide even more components.
  • Use with a cross-platform navigation/routing solution:
  • A compromise is only build a base component library with RNW (buttons, headers, cards, etc.). Instead of sharing navigation/routing and styling.
  • Gesture interactions (swipe, etc.) in browsers are no piece of cake (many ways of doing it, in either CSS or JS, and libraries of varying quality). But since React Native was made for mobile it is more tailored for gestures. So why no reuse those React Native libraries?

4. Flutter

  • 1x codebase. Which is 1/2 the work of developing a separate iOS (Swift) and Android (Kotlin) native app. Potentially 1/3 of the work, if Flutter Web works for your use case (as it and can give you a webapp).
  • Must learn the Dart language.
  • Flutter Web is not suited (according to themselves) for content/document centric apps (or apps requiring SSR/SEO), as it renders everything onto a single Canvas. But Flutter with Flutter Web could esp. be useful for cross-plattform games.
  • Full control of rendering. Optimizes for consistent UI cross-platform, at expense of platform-specific capabilities and look-and-feel (that users on each platform might be more familiar with). But has Cupertino widgets for iOS look-and-feel, to alleviate that. (Android uses Material UI widgets). Could also use flutter_platform_widgets that automatically selects the UI widget's look-and-feel according to the mobile platform (iOS or Android).
  • Native UI innovations for each platform may arrive later, as they need to be recreated in Flutter.
  • "it seems you can overlap native elements on top of a WebView, at least. But only in React Native and NativeScript, and not in Flutter." my tweet
  • Flutter vs. React Native vs. Native (iOS) (architecturally).

So, to the various Hybrid-app approaches. Even though React Native and Flutter could be considered hybrid, in some sense (since they are not pure native), I have limited the use of the term "hybrid" to the approaches that render a webapp inside a native shell/wrapper app through using a Web View (an in-app browser window). These approaches all afford you the opportunity to have only ~ 1x codebase:

5. CapacitorJS + webapp [hybrid]

  • WebView that accesses native API's.
  • Ionic UI toolkit to get native look-and-feel (replicates style of iOS and Android components). An alternative is Framework7.
  • Webapp can be built in any web framework like Solid, Voby, Vue, Svelte or Qwik.
  • You can use NativeScript and NativeScript plugins from Capacitor.
  • UX/Performance comparison to React Native, or React Native vs. Ionic React+Capacitor.
  • CapacitorJS's little secret is that it will by default bundle your entire webapp into the App Store bundle that users download, so it's not loaded from the web on startup. This to ensure that apps are not rejected by App Store if they don't use enough native features to enhance the app over a webapp the user could have accessed in a browser. Only adding Push Notifications will likely not count as enough native funtionality. Your experience may differ, and you may get through App Store review for a while, only to get rejected later, by a different reviewer. So it's wise to stay on the safe side. But loading the webapp on-demand, and not having to push updates through the App Store would have been preferred DX-wise.
  • Ionic Appflow or the much cheaper Capgo solves the aforementioned App Store publishing problem (akin to EAS Update in React Native), to push near instant code updates, and can be used with Capacitor.
  • 5 steps to a native app with Capacitor is useful to watch to get a quick overview. As you see, you'll have to touch XCode and Android Studio..

6. Hotwire Turbo Native + webapp [hybrid]

Two general ways:

6.1 Turbo Native w/ iOS + Android shell

6.2 Turbo Native w/ React Native shell

  • By using react-native-turbo. On github it is called react-native-turbo-demo.
  • This is a clear summary of how Turbo Native works (and the requirements if you were to try to replicate it, for instance in React Native, such as react-native-turbo-demo attempts).
  • Can write native screens with React Native. Which is useful if you don't want to have to learn iOS and Android development to make a few screens (as a web developer).
  • This would be my preferred Hotwire Turbo Native approach.

7. React inside React Native WebView [hybrid]

  • Seems absurd: more often you'd rather use React Native Web.
  • But could be useful if you need to quickly port an existing webapp to mobile, for instance to get push notifications on iOS (which was only just released (Feb 16, 2023), and only for users that have upgraded to iOS 16). yet available in Safari ). Some have had success with this approach, as opposed to a traditional React + React Native approach that would require 2x the codebase.
  • Ecosystem: React Native third-party package ecosystem is richer than for example Capacitor's. That's why you might want to use React Native for the shell app, rather than Capacitor. (It's also easier to turn a screen into a (React) Native screen, if need be.) But in response there's Open-Native that (at least) promises you can use React Native libraries in Capacitor and vice versa: "Open Native is the long overdue Rosetta Stone that allows native modules to be used cross-ecosystem."
  • Deployment: Could also be useful to get a faster deployment pipeline than via App Store. Though Expo OTA / EAS Update could also do that for an app made in pure React Native (for Web). But then you need to be concerned with that kind of tooling.
  • Might be rejected by App Store if the React Native shell app doesn't use enough native features to enhance the app over a webapp. Only adding Push Notifications will likely not count as enough native funtionality. Your experience may differ, and you may get through App Store review for a while, only to get rejected later, by a different reviewer. So it's wise to stay on the safe side.
  • Could be used with a webapp made in any web framework / render library, not just one made with React. Although React would allow some reuse of knowledge when working on the React Native shell.
  • Shared knowledge, faster to rewrite in full React Native if that need arises.
  • react-native-react-bridge is a bridge that makes communication between React and React Native via the WebView easier, so you'd likely want to use that. Alternatively, you could try to ease communication by directly making your WebView and React Native components run each other’s functions.

8. NativeScript + webapp [hybrid]

  • Has iOS and Android runtime.
  • Access native platform APIs through JavaScript.
  • Allows you to declare the UI with the help of XML-based language and a subset of CSS.
  • But for a fully cross-platform app (also on web), you would typically make a webapp and either:
    • access native API's through CapacitorJS and use it to bundle the webapp together with the app you ship to the App Store. The app should start up faster, since it has all the assets (JS/HTML/CSS) locally.
    • make a NativeScript wrapper/shell app that renders the webapp through NativeScript's WebView. This way, you could ship updates to your app without going through the App Store. But app start up time may be slower, since it needs to download the app assets (JS/HTML/CSS).
    • alternatively, NativeScript has some integration with Angular and Vue that could allow you to achieve a great amount of code sharing while also avoiding a Web View.
  • Directly running NativeScript on Web is an open issue.
  • react-nativescript is another option, to use React with NativeScript instead of React Native, if you plan on writing custom native modules for use in React, but don't want to write them in Swift/iOS & Kotlin/Android (like you'd have to for React Native), but want to write them in JavaScript.
  • Some people found it still immature on 2021-04-12. Maybe due to many broken plugins in the ecosystem (Update: take this with a good pinch of salt, see the comments). And one of the earliest and most prolific contributors left on 2022-07-01. (Update: There's controversy here, so see the comments below, where people have shared further insights, to judge for yourself if this seems significant or not.)
  • Small community: "For every 1,000 PR’s against Flutter or React Native – NativeScript gets a couple." said the contributor who left.
  • Ecosystem:
    • Risk? "Since you can't find good NativeScript developers to do the work, nor is there much of a third party eco-system left. It is really a bad idea for any companies to base anything off of NativeScript going forward." said on 2022-07-01 by the contributor who left.
    • Open-Native: You can now use React Native UI components in NativeScript. "Open Native is the long overdue Rosetta Stone that allows native modules to be used cross-ecosystem."

9. Xamarin with C# and .NET

  • Xamarin forms for simple UIs can share 98% the same code cross-platform. Works quite well, according to Nathan Hedglin in the comments.
  • 100% API coverage, which React Native doesn't fully have. So no writing native wrappers.
  • For enterprises that already have C# developers and C# backend services, then Xamarin can make sense.
  • (Thanks to Nathan Hedglin in the comments for mentioning this possibility and making these points.)

10. Progressive Web App (PWA)

  • Allows users on native mobile to access your webapp through its own app shortcut icon from their mobile home screen.
  • Not truly cross-platform, but almost. Works wherever the platform has some sort of browser. But the PWA won't use native components/UI on each platform, since it's just made from HTML+CSS+JS. UX might feel less smooth, and app startup time might be a bit slower (as it has to download the app, and potentially run the JS to render it).
  • Konsta UI gives pixel-perfect mobile components (in iOS design, and Android's Material Design) built with Tailwind (and is a more modern alternative to Ionic).
  • Some potential downsides (especially if your webapp is an SPA that uses JS to re-implement basic browser features like navigation, scrolling etc.): long loading times, bad scrolling behavior, elements out of bounds, bad touch and tap targets, basic or poor-performing animations, layout shifts. But all of these issues could be circumvented or resolved, even though you may run into them.
  • Simpler stack, because you, by and large, don't have to duplicate: tooling, performance optimizations, debugging tools, libraries and logging/observability. These extra costs are easy to overlook, if you go for a (React) Native app in addition to a webapp.
  • Unfamiliar installation: This won't be a true native app, so it won't be available in the App Store. You could try to guide your users towards installing the app as a shortcut on their mobile home screen, but they likely haven't done that before. Educating the market can be an uphill battle.
  • Push notifications: The biggest disadvantage has been that you don't get push notifications for PWA's on iOS (in none of the browsers, as they all basically wrap Safari), as Apple has been holding it back for years. But Apple recently (Feb 16, 2023) released Push Notifications on iOS (when your users have upgraded to iOS 16). So it would now be available to the amount of iOS users who have upgraded to that version of iOS...
  • Use any render library you want: React, Solid, Voby, Qwik, Vue, Svelte etc.
  • Webapps have gotten a surprising amount of native permissions acessible from browsers, these days. Even though some features are still lacking.
  • You could get your webapp to desktop using Electron or the newer Tauri (which has mobile support coming soon...).
  • Listen to the RNR 156: Progressive Web Apps vs. React Native (2020-02-25) podcast episode to get insights from some experienced developers on this choice.
  • See: What PWA Can Do Today and the transitions demo. Trying PWABuilder.com might get you started quickly. See also pwastore.com for some critical info on App Stores.

NB: With the rise of tools that can compile to WebAssembly (WASM) that run in browsers, there are more options than those that made the cut for this article (e.g. Blazor WASM (C#), Qt for Web, etc.). For brevity, they were not included, and I'm also unsure how well these WASM approaches fare with respects to SSR and SEO. See my article Notes on the future of WASM and JS.

My recommendation:

Obligatory disclaimer: It all depends on your particular use case and requirements, of course. For many usecases, a webapp/PWA would be sufficient. In the same spirit as: "don't build an app if all you need is a site!". But if you build your app as a webapp/PWA, the users eventually typically ask for and expect a native app (a big if, so know your usecase and your users). It can be hard to argue with and educate your market/users, and easier to get adoption if you go with what they are already familiar with.

So in general, to best get started, and avoid redoing work, my recommended place to start for a cross-platform app is with option 3:

React Native for Web - specifically by using t4-app

Because you can have 1x codebase, and there is a lot of developers who know React (and can quickly transfer their skills to React Native) so hiring/employment will be easier. With it, you can also get SSR/SEO for your app on the web, and Expo services like Expo EAS (over-the-air app updates) streamline deployment to native (skip App Store approval process for small updates). A bonus is that since it is basically React Native, you can also deploy the app to native MacOS, Windows or tvOS, due to their many-platform vision.

The second best option I recommend, would be to make a webapp, in any render framework you like (if so, I recommend Qwik City due to its unrivalled SSR capabilities), which you can rather easily turn into a PWA. Then try out Apple's recently (Feb 16, 2023) released Push Notifications for Safari on iOS (when your users have upgraded to iOS 16). Alternatively, combine the webapp with Capacitor or Turbo Native if you need native-only features or native navigation. Where Turbo Native would give you more native navigation but also likely tie you more into its particular way of doing navigation. In Turbo Native, the bridge between your webapp and the native app would also likely be more oriented towards adding attributes to your HTML and having something like Hotwire Strada interpret that from the native side. Whereas with Capacitor it would be more normal to specifically manipulate the native side from your webapp through the JavaScript code you supply it with.

So, with the general React Native Web recommendation, here are quick ways to get started. Here are some good example starter repositories (repos) that will get you up and running quickly, with less config work. They share styling and most of them also share navigation/routing cross-platform.

If you want something all-inclusive and don't care about selecting the appropriate starter repo according to your specific tech choices (which can require a bit of experience and/or research), then my general recommendation would be to go with:

  • t4-app since it is quite feature-packed, which means the least work to get up and running, to focus on the most important part: your customers' actual needs. It uses: Tamagui, TypeScript, tRPC, and Turborepo. Plus Clerk for authentication, Solito for navigation, Next.js for SSR, Expo for RN, Jotai for state management, and Drizzle ORM plus Cloudflare Workers and Cloudflare D1 (SQLite DB for the Edge) on the backend. In my subjective opinion it has the best choice of technologies amongst the alternatives I've found and listed below. As of the last update to this article, at least.

If you fancy Tailwind CSS, try either of these starter repos:

Please note that "Tailwind CSS has minimal support for animations and zero support for libraries that do not accept CSS classes." -- NativeWind author, Mark Lawlor

But if you don't want to use Tailwind / NativeWind, and don't want to go with my general t4-app (all-inclusive) recommendation, but select more of the tech yourself, then I recommend either of the following starter repos with Tamagui. Choose the one that is the best fit with the technologies you need, and that includes the fewest technologies in addition to that:

  • Official Tamagui starter repos:

    • Native + Web w/ SSR: Tamagui + Solito + Next + Expo Monorepo. Monorepo means it has two app directory structures in a single repository: Expo for native and NextJS for web. Each directory imports shared logic and components from a separate packages directory.
    • Native + Web: Tamagui + Expo Web, which shares a single directory structure for React Native and Web, through using Expo Router's filesystem routes. Ideal for SPA's and PWA's on web. No SSR on web by default.
    • Web only: Tamagui + Vite. Relatively bare-bones. No NextJS, no tRPC, no Prisma, no built in authentication solution. Could potentially be combined with either Vite plugin SSRx or Vike to get SSR.

  • Luna is a monorepo starter repo that has Tamagui + Solito + Next.js, and like the other alternatives is made with TypeScript and React Native Web. But Luna is for those that want a bare React Native setup, since it comes without Expo.

  • tamagui-react-native. "A starter kit isolated for Tamagui meant for React Native only." Without Expo. Very bare bones. If you don't care about rendering to the web, and if you for some reason don't like to use Expo. As of 2024 all React Native experts recommend using Expo, so please share a comment on this post on any potential reasons to avoid Expo.

  • create-universal-app (CUA) [NB: usable, but no longer maintained] was based off of the create-t3-turbo repo which means it used Expo with the Expo Router, and has tRPC and Prisma. But it has removed Nativewind in favor of Tamagui for cross-platform UI/styling, and adds Clerk for cross-platform mobile authentication (since NextAuth, now called Auth.js, is still focused on web only). CUA has implemented its own custom cross-platform sign-in page for mobile and web, made with Tamagui. Which could prevent some auth provider vendor lock-in. CUA also has step-by-step documentation + a video tutorial + explains the rationale behind the package decisions. See also its Reddit discussion.

  • pax-react-native-starter is a monorepo that in addition to the aforementioned tech, also has Storybook, Jest, and Turborepo integration set up. It aims to give you a rapid web development workflow even when developing for React Native: build features using a browser, deploy to Chromatic/Storybook for review by team members, and CI/CD deploy with Github Actions and Expo EAS.

  • t4-app - Tamagui, TypeScript, tRPC, and Turborepo. Plus Clerk for authentication, Solito for navigation, Next.js for SSR, Expo for RN, Jotai for state management, and Drizzle ORM plus Cloudflare Workers and Cloudflare D1 (SQLite DB for the Edge) on the backend.

  • uni-stack - "typesafe setup to build fullstack expo universal native apps" that uses Expo & Expo Router, TypeScript, Prisma, tRPC, SQLite DB, and for UI it lets you choose either Nativewind / Tamagui / GluestackUI.

The Tamagui and NativeWind ones should work with responsivity and SSR/SEO. But with Tamagui you also get a pre-built component/UI library, a good and customisable design system, plus an optimizing compiler.

Even if you don't need a native app today, you could start by developing a cross-platform app with a focus only on the web, using React Native Web, and React Native libraries (for a good mobile/gesture experience). Then, the path to releasing the native version of your app at any time will be minimal, since it would be sharing nearly all of the code already. Which, if you’re lucky, would mean only hours of work, or more typically a few days work. But in any case it would not take weeks or months of work, which it normally would take to develop a separate native app.

Share your experience in the comments

Mobile DevelopmentWeb DevelopmentReact NativeReactFlutter