Go to previous page

Analyzing Hybrid Mobile App Development: Pure gold for early startups?

Flutter, ReactNative, Kotlin, Xamarin
#
mobile-apps
#
Programming
Sanskar Agrawal
Sanskar
Android Engineer
November 10, 2023

Hybrid App Development (or cross-platform development) on Mobile is not a new, hot tech like Generative AI. It has been around since 2009 when PhoneGap (now Apache Cordova) was first released to the public. PhoneGap lets developers write apps using web tools - HTML, CSS, and JavaScript, and then deploy them on Android and iOS devices. Fast forward 14 years to 2023, and cross-platform apps are everywhere. Notable hybrid app examples are Facebook, TikTok, Microsoft Office, Skype, Philips, Netflix, Coinbase, Walmart, Discord, Google Pay, eBay, Alibaba, and Tesla. So, let’s look at how building hybrid mobile apps can help you and your business.

Flutter apps
From https://flutter.dev/showcase
Reactnative apps
From https://reactnative.dev/showcase

What are Cross-platform apps?

Software is typically written for a specific platform. Different platforms have different frameworks, toolkits, and entire languages using which you can build apps for them. To build apps for the iOS platform, you’d typically use the iOS/MacOS SDK, Swift or Objective-C programming language, and XCode or AppCode IDE. To build for Android, most developers would use Android SDK paired with either Java or Kotlin and Android Studio as the IDE. This pattern carries over to all major platforms - Mobile, Web, Desktop, or Embedded devices. Apps targeting specific platforms are called Native apps.

A typical business would like to have its products on multiple platforms for ease of access, iOS, Android, and Web, at the very least. This means hiring Engineers who specialize in each of these platforms, maintaining entirely separate codebases in different languages that have to share the same design language, and keeping all the different platform versions in sync with each other. This is notably difficult, and only the most major organizations are able to maintain their product on all these platforms while spending a huge chunk of their resources.

But, what if you didn’t need to do this? What if you needed only one type of Engineers, maintained one codebase, and had your apps be available across Android, iOS, and the Web? It’d be pretty amazing, right? Well, that’s exactly what cross-platform or hybrid app development toolkits let you do.

When using a cross-platform development toolkit, the most popular of which are Flutter, Kotlin Multiplatform, React Native and Xamarin, you can write code once, and deploy it everywhere. Your apps will look the same, run the same, and be in complete design sync, no matter what device they’re running on.

Why Hybrid: Benefits of Cross-Platform Apps

From the perspective of Business, it’s advantageous to build cross-platform apps because of:

  1. Reduced time to market: Compared to building native apps, a cross-platform app will take less time to market. Depending on your product’s complexity, your time gain can be anywhere between 30-70% if you opt to use a cross-platform toolkit like Flutter. Kijiji has noted a 50% reduction in the time required to launch new features when using Flutter. Alibaba noted a reduction of 30% in development time while building their Xianyu app using Flutter.
  2. Cost-effectiveness: Assume that your product needs to launch on Android and iOS. To build each app, it’d cost your company $100k. That totals out to $200k at the very least. By using a cross-platform technology, you can cut your development costs to at least half and build for two or more platforms at the cost of one!

Hybrid development toolkits provide great Developer experience too:

  1. Consistency: When using cross-platform toolkits as a developer, you can stop worrying about your code’s behaviour and most importantly, your UI being consistent across all platforms. Since the deployed application has been built from the same codebase, it’ll have the same characteristics on every platform. The internal details, such as rendering the UI on the Canvas, are all abstracted away by the toolkit. This is especially helpful if you’re implementing your design system since most hybrid dev tech focuses on custom systems.
  2. Maintenance: Since you only have to maintain one codebase instead of two or more, the overhead becomes smaller. It also becomes easier to concurrently launch new features on all supported platforms instead of facing delays between them. Tencent has noted a 33% reduction in development effort when using a cross-platform kit. You also end up writing fewer tests, which is always good.
  3. Community Support: Toolkits like Flutter and React Native are open-source, and enjoy excellent community support. pub.dev, Flutter’s package repository, has close to 50k packages. There are hundreds of community-made widgets and state handling solutions that can select from based on your very specific needs.

Cross-platform app development has been steadily increasing in popularity over time:

Cross platform app development popularity
From Google Trends

However, there can be the occasional drawback in using hybrid tech:

  • Poor Performance: Only if you’re doing graphics-intensive work, but you’re going to get these issues on native too unless you really optimize for it. At the end of the day, the vast majority of mobile devices, while now extremely powerful are still resource-constrained compared to a full-blown computer, and that fact needs to be kept in mind while developing.
  • Hardware Access: While Camera, BLE, Wi-Fi, and other major hardware surfaces are typically easily accessible with the support of the community packages, you may run into the occasional hiccup.
  • Platform-specific code: Sometimes platforms have specific libraries that you need to use that aren’t quite available on your toolkit. A notable example is Google’s Play Billing Library, which mandated an update to v5.0 in 2022, which wasn’t available immediately to Flutter developers. However, these issues are typically resolved quickly with community attention, and in cases they are not, it’s always possible to communicate with native code using something like platform channels.
💡 All things considered, if you’re an early stage startup and want to quickly deploy your product to the market, you're probably best off using a cross-platform development toolkit.

Which cross-platform toolkit to use?

The space of cross-platform apps has grown quite a bit in recent years, and now there are a lot of available option. Selection of a cross-platform solution of course depends on your specific requirements, so let’s dive into each and see what they offer!

Flutter

Flutter
From Flutter Brand Guidelines

Launched in 2017, Flutter is Google’s solution for building apps for Android, iOS, macOS, Windows, Linux and the Web! It requires the Dart programming language (also developed by Google) that has a similar syntax to Kotlin and JavaScript.

Flutter renders directly on the Canvas on the devices, resulting in high performance and no additional app size. The UI is built using a sequence of Widgets, similar to what’s done in React with components. Flutter also supports stateful hot reloads, upgrading iteration time while building.

It’s used by major companies like Google, Alibaba, Tencent and BMW, and has a ton of community support. It has remained one of the most loved technologies by developers in Stack Overflow’s Developer Survey of 2022 and 2023

React Native

React Native
From IconFinder

React Native, introduced in 2015, is Meta’s (earlier Facebook) framework for building cross-platform apps. It uses JavaScript as the programming language and is largely based on React (utilizing the same JSX syntax), providing an easy migration for web engineers.

React Native works by shipping a bridge with the apps on every platform that’s responsible for interpreting the JavaScript code and rendering it on the device. This imposes some size penalty on the app, increasing the bundle size by 10-30 MB. Similar to Flutter, it supports Hot Reload, improving development time and experience.

RN is used by giants like Facebook, Airbnb, Uber and Coinbase, ensuring steady community support. It has a component catalog on npm, and is also one of the most loved technologies by developers.

Kotlin Multiplatform (KMP)

Kotlin
From Wikipedia

Kotlin Multiplatform has been developed by JetBrains, creator of the developer-friendly Kotlin programming language and the IntelliJ series of IDEs.

It’s a unique multiplatform solution since it offers developers the flexibility to choose how much of their code they want to share across platforms. Teams can choose to share just the data models, the entire business logic or everything up to the UI if they prefer.

It’s the latest member on this list, and was been marked stable just a few days prior to the writing of this article. UI sharing is still a work in progress, with support on iOS being in alpha. Despite that, it has very active support from JetBrains and Google, and is being used to share business logic by some major companies:

Kotlin multiplatform
From Kotlin Multiplatform

Xamarin (now .NET MAUI)

Xamarin
From Xamarin’s GitHub

Xamarin, initially developed by Miguel de Icaza was acquired by Microsoft in 2016 and is now known as .NET MAUI. It’s a hybrid app development toolkit that uses Microsoft’s C# programming language.

Developers can either use native platform controls available in Xamarin.iOS and Xamarin.Android packges, or use the shared UI layer elements available in Xamarin.Forms.

Xamarin has a strong presence in the enterprise, but support for it seems to be wavering now, especially since Microsoft itself seems to be favoring Blazor and React Native over it. We recommend migrating to better supported frameworks like Flutter for an easier development journey.

💡 If you’re still unsure which toolkit to go with, Flutter’s probably the safest bet. Of course, requirements are complex, and if you’d like to discuss yours and make the best choice, reach out to us!

Summing Up

Cross Platform app development, as a domain, has grown enormously in recent years, and if you’re an early-stage startup or a business that quickly wants to roll out the red carpet for its users on mobile (and even other platforms like Web), while avoiding the heavy costs associated with developing native apps, consider using a development toolkit like Flutter or Kotlin Multiplatform.

It’ll help you minimize development costs and time-to-market, ensure consistent behavior, and improve the productivity of your developers. If you already have a native app, Flutter, React Native and, KMP all support incremental integration, meaning you can have individual screens in your cross-platform toolkit, providing an easy path for migration.

So, if you’re building or have built a mobile app for your business, consider a cross-platform solution today!

Recommended Posts

Open new blog
figma user flow
#
Figma
#
Design

Navigating Seamless Design: A Deep Dive into Figma User Flows

Ishpreet
January 9, 2024
Open new blog
Bull monkey
#
Future
#
ML
#
creativity

Could 'Prompting' be the future of creativity?

Achin
July 24, 2022
Open new blog
GPT-4o
#
LLM
#
AI

OpenAI introduces GPT-4o: The New State of the Art Model

Anuj
May 15, 2024