Want to write a mobile app?

Checkout this Architecture Decision I made for a project (2024)

Checkout my discord to comment

Check out this ADR i made not too long ago, where I made critical architectural decisions for a project:

We want to create a mobile app.

Requirements
  • Scalable for up to millions of users
  • Present a Social media Feed with a lot of content for each post
  • Support video content
  • Fast data loading (less then 0.5s)
  • Fast and Smooth user experience
  • Be available in all the major mobile platforms
  • The app relies on Notifications and Location permission
  • The app needs to to on the app store

We need to decide on the tech stack.
From the requirements, we can take few things to consider:

  1. we need something that works cross-platform
  2. we need something that performs in native-like performance
  3. we need access to APIs for notifications, location, etc.
  4. we want to be on the app stores.
React Native VS Flutter

The 2 leading technologies for writing cross-platform native apps are react-native and flutter.

Here's a small comparison between the 2:

react nativefluttercomments
easier to develop
most popular
development timereact-native is faster to code but offers less prebuilt UI components and usually requires additional platform-specific optimizations, which might make flutter better in terms of time to market
maintenancemore research is needed on this point
performanceperformance difference is negligible, i couldn’t find a proper benchmark comparison, but i found this article

So far i lean towards react native to create a cross-platform native app:
When it comes to startups, React Native is considered to be a better option.
The reasons mostly revolve around ease of finding developers, better community support, and better performance.

Important Advantages of React Native

  1. writing code once, is a single code base, that fits to all platforms
  2. using 1 coding language that is type safe and stable across both client & server side
  3. fastest development

Interesting Links

Transition from ReactJS to React Native

A great benefit of react native is that we are already familiar with ReactJS very well.
So how close is react native to react.js?

The gap between react and react native is relatively small:

  • styling - react native required additional know how for styling and animation
  • Native APIs for React Native
  • Installation - one is js compiled for web, the other is compiled to js running on Hermes or JavaScriptCore. and downloaded from the app store
  • Dev Env - react native require's many additional tools and programs in order to setup a local running environment

there are additional things to learn:

These are relatively not a cock block for transitioning from web to mobile and after 2-4 months of grinding, may only take 10-20% of dev time. the main form of writing, reading, testing, debugging code; more the most part, stays the same. and that's 80-90% of the time the dev will spend on the mobile app.

Atmosfy - a similar app comparison

Considering it is a similar app to the one in our requirements, its interesting to see what Atmosfy decided for their tech stack.

THE Atmosfy TECH STACK for the mobile web app includes React.js as the front-end library, Next.js for hybrid server-side and client-side rendering, Redux for state management, Apollo for data fetching, and TypeScript for type checking. The Atmosfy native app is built with React Native, allowing deployment to the Apple App Store and Google Play from a single code base. Both the mobile web app and native app are built using continuous integration with Bitbucket.

  • I lean towards the same tech stack for the most part, with very minor changes (replacing Redux with Zustand)
Cross-platform VS Platform Specific

Cross-platform (Native-Like) VS Platform Specific (Native):

It is important to understand what we wont be able to do well or if it will be at a high cost. this is the most important decision we are going to take tech wise. So we also need to do a comparison with developing a native app per platform: one for Android and one for iOS. using S**wift & Kotlin (leading programing languages for Android & IOS native development)**, what are the pros for having 2 code bases (one per platform) ? vs the current state of react native? for our type of app of course, we are not talking about a video game.

How Important Is Performance?

the mobile scene is a scene of performance.

The Performance Scale

none-native (ionic) < like-native (react-native) < compiled-to-native (flutter) < native (swift)
here's a performance to app type matchup:
preformance scalematching app to performanceperformance detailstechnology
none-nativeblogsmall apps without complicated UIsionic
like-nativesocial mediaapps with varied content and UIs with simple animationsreact native
compiled-to-nativebig online storeapps with varied content and UIs with complicated animationsflutter
nativereal-time gamingapps with very complicated UI and 3d graphicskotlin, swift

for our use case, like-native sounds good enough.

Cost

In terms of cost, building an app per platform (ios & android) is usually an x3 DEV cost considering you write everything x2 (and sometimes by different people) + in languages that are slower to read & write in + QA is also x2 as you continually making sure the 2 apps look/feel/behave the same.

Detailed Comparison 2022

kotlin-swift-flutter-mobile-apps-trends-in-2022

Kotlin is said to be a cross-platform language, it might be worth to look into it some more if that’s the case.

Popularity

Cross-platform mobile frameworks used by global developers 2023 ...

I looked at some statistics, depending on where you look, you will find different results. But it's safe to say React-Native and Flutter are leading the Cross-Platform mobile frameworks space in 2020-2024. With a slight edge to flutter in the last 2 years, I did some additional research as to why flutter became more popular.

When looking at npm trends you can clearly see React Native usage is growing exponantially.

Which means It's popularity goes up, not down. Developers are attracted and leaving other languages and frameworks and are entering into the React Native job market.

This is further proven when looking at the job market

react native how many jobs

Linkedin is a good reference point, and is also unbiased.
There are 16,000 RN jobs in linkedin and 773 are new.

Flutter only has 12,000 jobs in linkedin and 709 are new.

At least in new job recruitements, RN and Flutter are neck in neck. and overall there are 33% more RN jobs.

From this interesting discussion flutter_job_market, There is indeed a job shortage difference.

This is a bit weird. When comparing github stats (Jul 12, 2024) Flutter has 26.9k Forks and 163k stars. and react native has 24.1k Forks and 117k stars. This means that Flutter is truly more popular. so then, is there anything else to say about popularity?

YES! The reason why Flutter is more popular and React Native has more jobs is elusive, I'll give you my analysis on it.

There are a few reasons for what we are seeing.

  1. The first reason is that RN is a couple o' years older. So there are more businesses in maintenance that secure more jobs.
  2. The second reason is a bit sad, you see... Flutter is easier to get started with then RN, which means that most people with 0 experience that want to learn cross-platform mobile development will probably start learning Flutter.
    But on the employer side, there would almost always be an experienced developer and architect that would have to make a critical choice between RN, Flutter, and other solutions.
    There are many usecases for using RN or Flutter. And if you ask me, a huge portion of those usecases fit to both RN and Flutter and choosing either one would be an awesome choice. But, in most of those cases, the experienced developer is most likely also expirienced with WEB development, and he knows that 80% of the modern web is in ReactJS. And the React Community is enormous, and many experienced developers can cross over from that domain into RN. the support, community and experience is much much bigger in that scale. And so, the developer who decides what's your job's gonna be makes a differnt choice from what you as a Junior develop made. And that means many of the new Flutter developers simply don't have jobs and they will switch over to something else... it's a passing hype.
    think about the job market first.
  3. The third reason is again related to Flutter being easier to get started with.
    Many outsourced, cheaper developers from places like India will go for the easier-to-learn solution and will occupy the space for the less complicated requirements for developing mobile apps. These occupied jobs will also not be seen in places like linkedin most of the time.

Kotlin VS React Native 2024

react-native-vs-kotlin-mutliplatform-guide

Kotlin is a serious contender among cross-platform solutions. The choice between React Native and Kotlin Multiplatform will depend on your app's needs.

Teams that prioritize the velocity that hot reload provides, are satisfied with near-native performance, and don't mind occasionally writing native code might find React Native more suitable.

If your app uses a lot of native features that will require writing a lot of native code on React Native, or you prioritize native performance, Kotlin Multiplatform could be the technology for you.