DEV Community

Cover image for The different tech strategies to building a cross-platform app
This is Learning profile image Magne
Magne for This is Learning

Posted on • Updated on

The different tech strategies to building a cross-platform app

#mobile #webdev #reactnative #flutter

Last updated: 2024-10-25

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 using https://onestack.dev

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:

As of 2024-10-25 then I recommend using the One JS full stack framework https://onestack.dev/ if you can, for your whole project, if you are just starting out. You can use it for web-only projects. But it is ALSO a full crossplatform solution integrating:

  • Tamagui UI components (based on Radix UI) which runs in React but also in React Native
  • Tamagui’s compile-time CSS-in-JS style system (which is more architecturally complete and sound than Tailwind)
  • Vite based SSR (so you don’t need NextJS). With HMR and everything. No need to use the separate bundler Metro for RN.
  • File system routing (based on Expo Router).
  • Ejectable local-first DB solution https://zerosync.dev/ which has low bundle size and works with PostgreSQL on the backend. If you want something else it can easily be ejected/removed.
  • It fully integrates a light version of react-native-web so you don’t need to think about installing that in addition.

Alternatively you could use t4-app, which is a monorepo which uses two bundlers (Metro for RN and Webpack for NextJS), and is quite feature packed.

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

Top comments (24)

Collapse
 
nathanwalker profile image
Nathan Walker • • Edited

Great breakdowns, thank you for all this. It's always helpful to enumerate an exciting space of great options. When possible to update a few inaccuracies regarding NativeScript would help to bring better understanding:
Inaccurate: * Uses a WebView.
Accurate: * Uses natural native platform view rendering

Inaccurate: "a major contributor"
Accurate: All the major contributors are involved on a daily basis and meet once a month on a growing Technical Steering Committee formalized with best practices from the OpenJS Foundation for healthy open source innovation.

One can find negative posts across all open source communities (everything on this list) and it's okay; anyone can voice their opinion anytime as it helps establish some understandings. I agree with a lot of sentiments in the ycombinator link mentioned. NativeScript was a bit ahead of its time with marketing in the beginning but it should not detract from what the technology is. It's a promising technology that is being led and cared for by a loving community and if you believe in bringing innovation to the JavaScript community, NativeScript offers a lot that others can be involved with in the spirit of open source to take it well beyond past complaints (that is why we all engage in open source to begin with).

I'm a fan of everything on this list.

Collapse
 
redbar0n profile image
Magne •

Thanks for the feedback and corrections!

Inaccurate: * Uses a WebView.
Accurate: * Uses natural native platform view rendering

I meant you’d display your PWA in a WebView. Since it’s about crossplatform development (including web).

Is there another way to achieve that in NativeScript?

Inaccurate: "a major contributor"
Accurate: All the major contributors are involved.

oh, so you mean all major contributors left?

Collapse
 
nathanwalker profile image
Nathan Walker • • Edited

Thank you for updating to clarify that point much appreciated. With web/mobile sharing NativeScript is just TypeScript driven so you can share as much as you’d like to achieve best result on the target platform. Since NativeScript is just JavaScript there’s an immense amount of code you can share to drive both web and mobile tailored UX. Don’t believe I’ve ever heard of anyone putting a PWA into a NativeScript app’s webview. I would also recommend combining NativeScript with Ionic Portals if one was going that route ({N} being inherently flexible works with everything on your list):

Hope that helps bring more understanding to a great breakdown.

Thread Thread
 
redbar0n profile image
Magne •

Thank you for your insights!

If you want a cross-platform app that shares as much code as possible between iOS + Android + Web, how would you ideally go about it with NativeScript?

I updated the section on NativeScript with some options, as I see them, after doing a bit more research into it. It's still not entirely clear what the best cross-platform strategy with NativeScript would be. I think I'm still leaning towards a Web View, since it would allow running most of the same code on both native and web..

Thread Thread
 
nathanwalker profile image
Nathan Walker • • Edited

The degree of flexibility possible with iOS+Android+Web without compromises is the core reason I became interested in NativeScript many years ago (I personally didn't pay attention to the marketing of it -- what it was under the hood is what interested me the most).

Regarding cross-platform strategy with NativeScript + web development, the key part about this technology is it aims to be just natural JavaScript development, meaning all the same strategies you would use to share TypeScript/JavaScript code apply. This is a large topic with tons of options (and opinions) but the NativeScript TSC provides, as a starting base, some suggestions to frame a good fundamental understanding in terms of best practices:
docs.nativescript.org/code-sharing...

In short, any monorepo strategy is great for TypeScript driven "shared" (aka "code sharing") developments. Npm workspaces, yarn workspaces, Nrwl Nx, Turborepo, Microsoft Rush, the list goes on and on.

To expand on this with even more fine grain guidance, nStudio (professional software services), provides a whole set of tooling, simply called "xplat", aimed at enhancing Nrwl Nx specifically for diverse cross platform developments. It could also be adapted to work in any other monorepo tooling as well.

To answer your question, "not entirely clear what the best cross-platform strategy with NativeScript would be"... Here's some helpful information on xplat, which provide generators to get teams off the ground with a set of best practices for diverse "cross-platform" developments. This approach has been put to use successfully for several years and continues to be used to scale large TypeScript driven projects (enterprise and consumer facing):

There's quite a lot of work going on around NativeScript which continues to open up desirable workflows for TypeScript/JavaScript driven teams. On the inverse side, interestingly, some of the more recent work explores powerful workflows for purely native teams (Swift, Obj-C, Kotlin, Java) to work hand-in-hand with web teams to make use of diverse talent working better together without cornering teams into one style to bring ideas to life.

To conclude for me personally, the reason I'm attracted to NativeScript and enjoy working around it is it's ability to open up all the options on your list with angles to make them work together without cornering one out. I love technology and want to be working with all innovation at all times or, at a minimum, at least be able to, without inherent barriers from the get go; which is why I'm a fan of everything on your list -- I can work with it all by taking advantage of NativeScript.

Collapse
 
redbar0n profile image
Magne • • Edited

I'd like to mention a new exciting option (for a crossplatform app) that I recently came across, that AngelRs github.com/angel-rs is working on:

11. Qwik (City) + React Native, using shared qwikified React components.
An especially promising alternative for those that care greatly about performance and SSR/SEO on Web.

Quote from AngelRs on 2022-09-23 from the #qwik-help-archive channel on the Builder.io Discord:

Some progress on Qwik + React Native:

Simple demo showcasing shared component & navigation logic
drive.google.com/file/d/1Gf2z1Mw_1...
Shared component between React Native Mobile App (Expo) & a Qwik (Qwik City) web app.

Styles:
Qwik: Tailwind
RN: Nativewind

Navigation:
Qwik: <a> tags
RN: <Link> component (abstraction on top of react-navigation)

Pending:

  • Animations
  • Better configuration (Currently needs vite config setup to patch some dependencies & a metro config for RN)
  • Use in real applicatino (dogfooding)
  • Monorepo setup
    • web (qwik-city app)
    • native (expo app)
    • design-system (shared)
  • Open source

Not a priority right now, but making slow progress towards it. Currently mantaining a simple qwik city app & a react-native app. So really excited to 'merge' the two.

Collapse
 
frosty21 profile image
Nathan Froese • • Edited

nice breakdown. thought id mention the link NativeWind + Solito + Next + Expo Monorepo example is no longer there

Collapse
 
redbar0n profile image
Magne •

Thanks, it was the Tamagui link, and I updated it now.

Collapse
 
redbar0n profile image
Magne •

This is the new link:

Tamagui + Solito + Next + Expo Monorepo

Collapse
 
redbar0n profile image
Magne •

With the arrival of WASM GC, recently announced by Google, then Kotlin Multiplatform + Jetpack Compose has surfaced as a potential option for cross-platform apps. See more here:

youtu.be/RcHER-3gFXI?t=1010

Collapse
 
redbar0n profile image
Magne • • Edited

—- Update 2024-10-25

I now recommend using the One JS full stack framework onestack.dev/ if you can, for your whole project, if you are just starting out. You can use it for web-only projects. But it is ALSO a full crossplatform solution integrating:

  • Tamagui UI components (based on Radix UI) which runs in React but also in React Native
  • Tamagui’s compile-time CSS-in-JS style system (which is more architecturally complete and sound than Tailwind)
  • Vite based SSR (so you don’t need NextJS). With HMR and everything. No need to use the separate bundler Metro for RN.
  • File system routing (based on Expo Router).
  • Ejectable local-first DB solution zerosync.dev/ which has low bundle size and works with PostgreSQL on the backend. If you want something else it can easily be ejected/removed.
Collapse
 
edusperoni profile image
Eduardo Speroni •

Hey! Nice post. Just a couple of things about NativeScript

  1. it doesn't use a WebView at all. It allows you to use one if you want to display some web/local content, just like you can do natively. All views in NativeScript are 100% native (Button generates android.widget.Button and UIButton)

  2. you seem to have stumbled on one of the only community dramas, sorry for that. I'll admit that that "major" contributor did some "contributions" back in the day (mostly plugins, few core contributions), but he's also the creator of proplugins (another one of your sources). He tried to split and cause drama in the community and quit when no one wanted to work with him anymore. All of his work had better open source alternatives by the time he quit.

Again, I'm sorry that you had to go through that inflammatory post. You can see in the post comments other people disagreeing with him. I don't think anyone in the entire community was sad he left. He had been absent for many months while one by one his plugins were being replaced by better (and free open source) alternatives and he decided to "quit" by writing an inflammatory post.

He's always been inflammatory, though (as can be seen by the proplugins "why" page), and the proplugins initiative only managed to cause doubt and distrust among the community. I've been using NativeScript since 2018 and never have I ever needed a plugin from that, which clearly means everything he says on the "why" page is a big lie from someone who desperately wanted to make money from open source.

I can guarantee you NativeScript is better now than ever, and you can give it a try straight up from StackBlitz front page: stackblitz.com/?starters=mobile

Collapse
 
redbar0n profile image
Magne •

Thanks for the correction and insights!

If you want a cross-platform app that shares as much code as possible between iOS + Android + Web, how would you ideally go about it with NativeScript?

I updated the section on NativeScript with some options, as I see them, after doing a bit more research into it. It's still not entirely clear what the best cross-platform strategy with NativeScript would be. I think I'm still leaning towards a Web View, since it would allow running most of the same code on both native and web..

I also updated the section about the community controversy, to account for the fact that I don't precisely know how major the contributor was, and that there are more sides to the story (as I'm glad you detailed).

Collapse
 
nathanaela profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
Nathanael Anderson • • Edited

Unfortunately Eduardo has no clue what he is talking about. He wasn't involved, he wasn't even on the TSC at that point, lol... He also doesn't mention he is now on the TSC and also has a vested financial interest in seeing NS stay alive, I'm pretty sure his company is still the largest sub-contractor of nStudio for NS jobs... Of course he is going to try and disparage me and divert people from the actual facts I laid out based on REAL numbers. Anyone can go run the numbers, like I did... But lets just disparage Nathanael to cover up the facts...

To set the record straight:

  1. I still have 3 of the 4 top plugins in the community by downloads (which it has been this way for many many years). And nothing that I'm aware of has been replaced by "better" plugins. The only community plugin that is actually "starting" to catch up to possibly replace one of my well battle tested plugins, has several bugs that can crash your app in it. And many of my other plugins that aren't used by as many apps are also still top in their categories with nothing else even remotely close in downloads. So what a joke of a statement. Really I have no issues if any of my plugins are replaced by others, that is the open source way -- but his statement is again trivially proven false by actually looking at the facts. ;-)

  2. I did leave, but not disgruntled at NativeScript or because nobody wanted to work with me. I left quietly because I was hoping to give NS the best chance to survive, as I love the technology stack, it really is one of the best stacks if it could be maintained. Even though I don't trust Nathan Walker, he was a better TSC chairman that I would have been. So airing the drama to stay at nStudio in my opinion would have split the community and caused several of nStudios clients to leave, thus killing nStudio pretty quickly and thus killing NativeScript almost immediately. So I left quietly, hoping that nStudio could change NativeScript's trajectory. I still haven't aired any "drama" about what happened, just that basically a major disagreement occurred. ;-)

  3. If he would bother to check the facts, he would realize I did maintain several of my plugins after I left nStudio, I just refused to do any business with Nathan Walker which meant I avoided doing anything to the core NS framework...

  4. People have different takes on ProPlugins. Some people hate it, some love it... can't please everyone... ;-)

  5. As for Stackblitz, still an awesome idea. But it now sucks more that the app harvests your email info before you can do anything with it. The old Preview was way better with no roadblocks to getting started, so one step forward, two back.

I personally don't see StackBlitz changing the core issue that NS only has a few developers for the plugins, and sees very few updates to actually fix bugs, I still have multiple bugs reports I posted back when working for nStudio that are still open...

So, yeah, Eduardo -- the Framework is thriving and I'm just disgruntled... ;-)

Collapse
 
redbar0n profile image
Magne • • Edited

Honorable mention:

Hyperview - Lets you use Server-Driven UI Rendering of a native app, via rendering server-generated XML. Could be used with Rails, Django or any HTTP server on the back-end etc.

"Hyperview is our open-source project to bring the benefits of thin-client, HATEOAS development to native mobile apps. The project consists of two parts:

  • Hyperview XML (HXML) is an XML-based format to describe native mobile UIs. It supports common UI elements like headers, scroll views, lists, text field, and much more. It also supports styling and a behavior syntax for describing user interactions (touches, gestures, input interaction) without the need for scripting.

  • Hyperview Client is a cross-platform library for rendering HXML in mobile apps. Implemented in React Native, it can be embedded in existing apps, or you can use it to create a new app from scratch."

"
hyperview.org/docs/guide_introduction

Collapse
 
redbar0n profile image
Magne • • Edited

Recent honorable mention:

Crux - "Cross-platform app development in Rust" - github.com/redbadger/crux

Why? - From the repo:

  • Shared Core for Behavior - Crux helps you share your app's business logic and behavior across mobile (iOS/Android) and web — as a single reusable core built with Rust.

  • Thin Shell for UI - Crux recognizes that the best experiences are built with modern declarative frameworks such as SwiftUI, Jetpack Compose, React/Vue, or a WebAssembly based framework (like Yew) — however, it aims to keep this UI layer as thin as it can be, with all other work done by the shared core.

Collapse
 
redbar0n profile image
Magne •

Another honorable mention:

Quasar for Vue.js. "One source code for all platforms simultaneously with all the latest and greatest best practices out of the box."

Collapse
 
redbar0n profile image
Magne • • Edited

Another mention:

CodenameOne - "Cross-platform framework for building truly native mobile apps with Java or Kotlin. Write Once Run Anywhere support for iOS, Android, Desktop & Web."

 
redbar0n profile image
Magne • • Edited

hm.. but you said: "And you deploy your Flutter Web build to your domain's /app path."...?

Note: I'm not talking about a Web View here (for rendering a webapp on native). I'm talking about the opposite: rendering Flutter on the web, where Flutter Web internally uses a HTML Canvas element.

 
redbar0n profile image
Magne •

yes, such a monorepo is possible. But you'd still have to deploy the actual UI code (written in Flutter, presumably) to the web somehow. Flutter Web allows that. But is limited to a HTML canvas, as mentioned (i.e. no DOM, so no SEO).

Collapse
 
redbar0n profile image
Magne •

Thanks for mentioning it! I'll add it to the list. :-)

View full discussion (24 comments)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Read next

ariflogs profile image

Building an UI library that does not look generic!

Arif Hossain -

mayank_mohapatra profile image

Creating a Multilingual Expense Tracker with Tolgee

Mayank Mohapatra -

undolog profile image

Upgrading from Nextra v2 to Nextra v3: A "Quick" Guide

Giovambattista Fazioli -

piuskevin3 profile image

Introducing WasteBin: A Geo-Based Community for Sustainable Waste Management

Pius Kevin Mafabi -