A cross-platform mobile app is an application developed to run on multiple mobile operating systems, such as iOS, Android, and desktop applications for windows and macOS, using a single codebase (rather than separate apps, one for each operating system). Cross Platform Apps are not suitable for all purposes, but they do come with specific benefits and disadvantages.

Benefits:

• Code reusability
  Using cross-platform frameworks, developers can write a single codebase that can be used across multiple platforms. This means that they don’t have to write different code for each platform, which reduces the amount of code that needs to be written and maintained. This, in turn, can save time and resources during the development process.
• Reach a wider audience
  By developing a single app that can run on multiple platforms, you can reach a wider audience and increase your market share. You can target users on multiple platforms rather than just one.
• Reduced development cost
  Cross-platform development can be more cost-effective than developing separate apps for each platform. It can also reduce maintenance costs, as updates and bug fixes can be made to the single codebase rather than multiple platform-specific codebases.
• UI/UX consistency across platforms
  Cross-platform apps deliver a consistent user experience across multiple devices—the app looks and feels the same on all platforms.
• Speed up the development process
  Because the application only needs to be built once (although often with specific adjustments for particular platforms) developing a cross-platform application will require less time to build.

Disadvantages:

• Performance and speed
  Cross-platform frameworks offer great performance, but undeniably native applications are slightly faster for the end user. To provide ongoing communication between native and non-native components cross-platform application needs an additional abstraction layer. The rendering process slows down the pace of the application.
• Compatibility
  As multiplatform applications run on different devices, platforms, and operating systems, developers have to adjust the code and handle differences for each of them. Maintaining a consistent design and functionality requires a lot of effort and may cause issues in application functionality.
• Operating System Updates
  Changes in Apple and Google’s latest updates for their operating systems to cross-platform mobile applications may take more time than native applications. We have to update the code every time a new version of Android or iOS is released.
• Library updates
  Sometimes when a new operating system is released, existing libraries / plugin functionality may not work properly with latest OS. We may need to wait until the plugin developers have corrected a particular issue before we can complete the update.

What has changed in Cross Platform App Development?

Cordova – the original cross platform framework
Apache Cordova is an open-source mobile development framework that allows developers to use standard web technologies (HTML5, CSS3, and JavaScript) for building mobile applications.

Cordova is the older and more established platform for hybrid app development. Cordova provides access to native features through plugins, which you can find on the Cordova Plugin Registry or developers can create new plugins. The Cordova plugin ecosystem provides more than 2,000 plugins, containing a diverse range of tools and features..

Cordova doesn’t provide UI components but acts as bridge between what is essentially a web application and the native capabilities of the destination mobile devices.

Capacitor
Capacitor is a newer and more modern alternative to Cordova. It was created by the Ionic team and launched in 2019. Capacitor aims to provide a native bridge that is more flexible, extensible, and future proof than Cordova. It supports modern web features like Progressive Web Apps, Web Components, and Custom Elements. It also has a simpler and more consistent API that works across platforms. Capacitor also allows you to access native features through plugins.

In the last few years, numerous other alternatives have been developed, to facilitate the development of cross platform apps.
Each option has its own capabilities and benefits. Among the most popular frameworks are the following:

React Native
React Native was first developed in 2013 as an internal Facebook project, and then released to the public in 2015. React Native enables developers to use React and JavaScript to build native-like mobile applications. It allows for a high degree of code reuse between iOS and Android platforms.

Main users – Facebook, Instagram, Pinterest, Airbnb, Skype, UberEats, Tesla, Bloomberg, and many more.

Flutter
Created by Google, Flutter uses the Dart programming language and provides a reactive framework. It allows developers to create visually attractive native-like applications for multiple platforms with a single codebase.

Main users – BMW, ebay, Toyota, EMAAR and many more.

Xamarin
Owned by Microsoft, it was first developed in 2014. Xamarin uses C# and the .NET framework. It allows developers to share a significant portion of code across iOS, Android, and Windows platforms. Xamarin.Forms enables the creation of a single UI for all platforms.
Microsoft announced that Xamarin and Xamarin.Forms apps will no longer be supported after May 1, 2024.

.NET MAUI
.NET MAUI is open-source and is the evolution of Xamarin.Forms, extended from mobile to desktop scenarios, with UI controls rebuilt from the ground up for performance and extensibility. If you’ve previously used Xamarin.Forms to build cross-platform user interfaces, you’ll notice many similarities with .NET MAUI. However, there are also some differences. Using .NET MAUI, you can create multi-platform apps using a single project, but you can add platform-specific source code and resources if necessary. One of the key aims of .NET MAUI is to enable you to implement as much of your app logic and UI layout as possible in a single code-base.

Ionic
Built on top of Angular and Apache Cordova, Ionic is a framework for building cross-platform mobile applications using web technologies such as HTML, CSS, and JavaScript. It’s known for its simplicity and ease of use. Ionic is a UI framework and a set of pre-built UI components for building cross-platform mobile applications using web technologies.

NativeScript
Powered by JavaScript or TypeScript, NativeScript enables the development of native mobile applications using Angular, Vue.js, or plain JavaScript. It provides direct access to native APIs, allowing for a high level of customization.

Unity
Primarily known as a game development engine, Unity is also used for cross-platform application development. It supports the creation of applications for various platforms, including mobile devices, desktops, and VR/AR devices.

Kotlin Multiplatform
Kotlin, a programming language developed by JetBrains and endorsed by Google for Android development, also supports multiplatform development. With Kotlin Multiplatform, you can share code between different platforms, including Android, iOS, and backend servers.

Our Choice: Capacitor + Ionic

Having built cross platform apps in a number of different technologies, at Contactpoint we have, for now at least, settled on utilising Ionic, underpinned by Capacitor.

Ionic is an open-source UI software development kit for cross-platform app development. As mentioned above, Ionic uses standardized web technologies like HTML, CSS, and JavaScript.

The first versions of Ionic were tightly coupled with Angular, a popular frontend framework used for building dynamic web pages and PWAs. Later versions use web components that pair with additional popular JavaScript frameworks, including Angular, React, or Vue. Developers can choose to forego a framework and build purely in JavaScript. Ionic is also backend agnostic, connecting to AWS, Azure, and Firebase.

Since it’s creation in 2013, Ionic has become the world’s most popular cross-platform mobile development technology stack. Over five million apps have been developed using Ionic. It is actively developed and maintained full-time by a core team, and its ecosystem is guided by an international community of developers and contributors fueling its growth and adoption. Developers and companies small and large use Ionic to build and ship amazing apps that run everywhere.

Ionic now has official support for the popular Vue 3 library. Ionic Vue lets Vue developers use their existing web skills to build apps that target iOS, Android, and the web. With @ionic/vue, you can use all the core Ionic components, but in a way that feels like using native Vue components.

Contactpoint has developed numerous components in Javascript and VueJS over the years, which can now be utilised in our Ionic development.

When considering Ionic for a project, there are several advantages that can benefit both developers and our clients:

1. Cost Effective Development:
   This can significantly reduce development costs compared to building separate native apps for each platform.
2. Faster Time to Market:
   Cross-platform development with Ionic can expedite the development process. The ability to reuse code across platforms, along with a vast library of pre-built UI components, accelerates the development cycle and helps get the product to market more quickly.
3. Single Codebase:
   Maintaining a single codebase for multiple platforms simplifies the development and maintenance process. Updates and changes can be applied universally, reducing the risk of inconsistencies between different versions of the app.
4. Responsive UI Design:
   Ionic provides a responsive design out of the box, making it easier to create apps that look good and function well across various device sizes and screen resolutions.

Example Apps Built in Ionic + Capacitor

Card Makers Planning Tool App

We designed and developed the Card Makers Planning Tool app using Ionic + Vue3. The purpose of the app is help you organise your card making activities. You can read more about the app on the Card Makers App website.

Enudge App

The Enudge Contacts app, previously developed in ReactNative, is currently under re-development using Ionic + vue3. The Enudge app allows the user to add contacts into their Enudge account e.g. when you are at a networking event or out meeting a new prospect. You can tailor a consent statement which will appear at the bottom of the ‘Add Contact’ screen, which you can show to your new contact when adding them to your list. There are lots of other features to help you manage your list inside Enudge.

We are currently developing two other client apps using Capacitor + Ionic, which we expect will be launched early in the new year!

Unique benefits of utilising VueJS for UI within Ionic

Vue.js is one of the most popular JavaScript frameworks in use today, providing a lightweight and performant approach to building reactive user interfaces. Aside from being a technology that the Contactpoint development team are well experienced in, VueJS also provides the following key benefits:

• Improved performance:
  One of the most significant improvements in Vue.js 3 is its enhanced performance. Vue.js 3 is built with the aim of offering faster and more efficient rendering. The new version of Vue.js provides faster virtual DOM patching and rendering, which means it can process changes to the UI more efficiently. Vue.js 3 also comes with a new component-based API, which has been optimized for performance.
• Composition API:
  Vue.js 3 introduces a new Composition API that makes it easier to reuse code and manage the state in your application. The Composition API allows you to create reusable logic that can be shared across different components. This makes it easier to manage the state of your application and create more efficient code. Additionally, the Composition API can help to reduce the amount of boilerplate code needed for your application, making it easier to write and maintain.
• TypeScript Support:
  TypeScript is becoming increasingly popular in the JavaScript community, and Vue.js 3 is built with TypeScript in mind. Vue.js 3 includes improved support for TypeScript, making it easier to write type-safe code. This can help to reduce the number of bugs in your code and improve the overall maintainability of your application.
• Smaller Bundle Size:
  Another significant improvement in Vue.js 3 is the smaller bundle size. The new version of Vue.js has been optimized for a smaller bundle size, which means it takes up less space in your application. This can help to reduce the loading time of your application, making it more responsive and efficient.

When not to use Ionic?

While Ionic is a versatile and powerful tool for cross platform mobile app development, there are situations where cross-platform is not the best choice. Below are examples of cases when an alternative approach (likely a native app) would be better:

Performance-Intensive Apps If your app requires highly complex graphics, animations, or heavy computational tasks, a native development approach (using Swift for iOS or Kotlin/Java for Android) might be more suitable. Native development allows closer integration with platform-specific capabilities and optimisations.

Platform-Specific Features If your app heavily relies on platform-specific features that are not well-supported by Ionic, such as advanced camera functionalities, Bluetooth, Network or specific hardware integrations, native development may be a better fit.

Large Enterprise-Level Applications For large-scale enterprise applications with complex business logic and extensive requirements, some organizations may prefer using native development or other enterprise-grade frameworks that offer more advanced features and support.

Strict App Store Guidelines Compliance Some apps, especially those that need to strictly adhere to platform-specific design guidelines or policies (such as Apple’s Human Interface Guidelines or Google’s Material Design), might benefit from native development to ensure a seamless and compliant user experience.

Real-time or Resource-Intensive Applications If your app requires real-time capabilities (such as gaming or live streaming) or needs to handle resource-intensive tasks, a lower-level language or framework might be more appropriate for performance reasons.

Offline or Limited Internet Connectivity Requirements If your app needs to operate seamlessly in offline or low-connectivity scenarios, you may need to carefully consider the offline capabilities of Ionic or explore alternatives that provide better support for such use cases.

Before deciding on a development framework, it’s crucial to thoroughly evaluate the specific requirements of your project and the strengths and weaknesses of different tools to make an informed decision based on your goals and constraints.

by