Comparison and Contrast between most popular cross-platform mobile app development frameworks
Since the first iPhone release in 2007 and the first android smartphone release in 2008, industries related to smartphones have been growing exponentially. With the projected smartphone shipments for 2023 being 1.48 billion units and the global mobile phone application market size is expected to reach $278 billion by 2026, mobile application development has become one of the biggest areas in the software development industry.
When it comes to mobile application development there are many options to choose from. Among those options, cross-platform development approach has become one of the best methods to develop mobile applications because of the cost-effectiveness and code re-usability. In this article, I will compare four of the most popular cross-platform mobile application development frameworks currently available.
1) React Native — This framework was invented by Facebook in 2015. This framework is based on Facebook’s own React.js library. Facebook, Instagram, Walmart, and Bloomberg are some famous apps developed using React Native.
2) Flutter — This framework was initially released during Mobile World Congress 2018 by its developer Google. Stadia, Google Ads, Alibaba are some of the popular apps built using Flutter.
3) Xamarin — Xamarin was launched in 2012 by Microsoft. This framework is based on WORA (Write once Run Any model) concept. Some of the examples for apps developed using Xamarin are Insightly, The World Bank, Just Giving.
4) Ionic — Ionic is a framework that is built on top of AngularJS and Apache Cordova an initially released in 2013 by its developer Drifty Co. TD Trading, Market Watch, McLaren Automotive are some of the popular apps developed using this framework.
This comparison is based on the following characteristics:
· Language Stack
· Technical Architecture and Performance
· User Interface Components
· Community and Popularity
Language Stack
React Native: JavaScript
React Native uses JavaScript to build applications. JavaScript is one of the most popular high-level dynamic programming languages available today. There are many popular frameworks based on JavaScript other than React Native so most web developers can easily adapt to this framework. Developers are also allowed to develop apps using TypeScript which is a superset of JavaScript by default. React Native also supports modules wrote in Objective-C, Swift, and Java which is a really useful feature when developing applications with heavy operations or applications accessing native platform APIs which are not available by default in JavaScript such as Google Pay.
Flutter: Dart
Flutter uses Dart programming language which is also introduced by google in 2011. Dart is a statically typed, garbage-collected language with support to most of the object-oriented concepts therefore dart syntax will be easy to get a grasp of to developers with Java knowledge. Dart has easy-to-follow documentation to aid developers. However, dart is not widely known or followed by the developer community even though the language has been around for 10+ years now. It also has fewer features as a language compared to other languages which are used in cross-platform mobile app development.
Xamarin: C#
Microsoft developed C# is the development language used in Xamarin app development. C# is a statically typed language that was inspired by C, C++ but with better class libraries and object-oriented support. C# can be used in visual studio environment which has a rich editor and a good set of debugging tools.
Ionic: HTML, CSS, JavaScript
Ionic uses web technology (JavaScript, HTML, CSS) to develop mobile applications. Just like React Native experienced web developers can easily adapt to Ionic app development and apps also can be developed using TypeScript.
Technical Architecture and Performance
React Native
React Native uses flux architecture which is an application architecture that Facebook uses for building client-side web applications. React Native performance is better than web-view-based tools and almost similar to native performance because it renders code components directly to the native APIs using the JavaScript Core virtual machine. Because of this React native architecture depends on JS runtime environment architecture which is also known as JavaScript bridge.
Flutter
Flutter has its own graphics library called Skia and the core technology for flutter is the Dart framework. Skia is a high-performance open-source graphics engine that was also developed by Google. Apps developed using flutter have the best performance compared to every other cross-platform app development framework because the Dart code is compiled to a C library which means it’s very closer to the native code.
Xamarin
Apps developed using Xamarin can also perform near similar to native performance. Xamarin is based on the .Net framework. Developers can build apps in two ways using Xamarin. Xamarin Forms and Xamarin.Android/iOS.
Xamarin Forms is more focused on code sharing rather than performance and being platform-specific. Therefore performance can decrease in various operations and executions.
On the other hand, Xamarin.Android and Xamarin.iOS performs like native and is more focused on sharing business logic rather than codebase.
Ionic
Ionic is based on web technologies and it works as a wrapped web app hence it offers the worst performance compared to other frameworks. Also ionic doesn’t use native components.
User Interface Components
React Native
Modules of React Native interacts with native Android, iOS UI controllers to enable user experience very similar to native apps. It also makes use of the ReactJS library with extensive UI components. To access most of the native modules, React Native has to heavily rely on third-party libraries.
Flutter
Flutter comes with its own set of custom widgets which removes the need to use third-party libraries. These built-in widgets mostly use material design and also supply the iOS style Cupertino widgets which allows developers to design apps with really attractive visual details.
Xamarin
As mentioned before developers have two options when it comes to developing apps with Xamarin. Xamarin.Forms approach converts the app UI components into the platform-specific interface elements at runtime which makes the development process much faster but with the cost of reduced performance compared to Xamarin.Android/iOS. Xamarin.Android/iOS works with the native UI controls and layouts to provide the native look and feel to the app.
Ionic
Ionic doesn’t work with native components to render UI and renders everything using HTML and CSS. Then it applies Cordova to offer native behavior which also enables ionic apps to look like native apps.
Community and Popularity
React Native
React native has more established, experienced developer community compared to flutter and there are countless tutorials and courses to follow online. React Native was the 3rd most wanted and 9th most loved framework in the 2020 Stack Overflow developer survey under the other frameworks category.
Flutter
Flutter doesn’t have a larger community compared to React native mostly because is younger than React Native. However, the Flutter community has been rapidly expanding since its release. Currently, Flutter has the 16th most stars on GitHub repository rankings and Flutter is the 3rd most loved and 4th most wanted framework in the 2020 Stack Overflow developer survey under the other frameworks category.
Xamarin
Compared to Flutter and React Native, the Xamarin community is significantly smaller. Xamarin is the 16th most loved framework and 12th most wanted framework in the 2020 Stack Overflow developer survey under the other frameworks category.
Ionic
Even though ionic didn’t make it in the most loved or most wanted framework lists in the 2020 Stack Overflow developer survey, Ionic has 43.2k stars in its GitHub repository which is way above Xamarin. Also Ionic has a very strong and supportive community.
Summary
Conclusion
At the end of the day, the decision depends on the experience and requirements of the developer. Currently React native is the most popular cross-platform framework among developers and Flutter is the second most popular framework. Worldwide interest for Xamarin and Ionic has been decreasing in the past 5 years according to google trends. With the recent live events organized by the Flutter community and Google rapidly improving and releasing new versions, Flutter might take the crown from React Native as the most popular cross-platform development framework soon.
