In the last few years cross platform and hybrid frameworks have been one of the hottest topics in the app development landscape. Some of the technologies mature (React Native), new ones appear (Flutter), and others – older ones (Xamarin) are slowly losing ground to more popular new tech stacks. When looking at trends in mobile technologies, native frameworks for both iOS and Android still reign supreme, being the most stable, secure and all-purpose solutions, but cross platform mobile development solutions are catching up quickly.
In with the new…
… but not necessarily out with the old. Hybrid and cross platform mobile development solutions have been developing alongside native frameworks, and up until recently, the technical gap between them was significant enough to validate the claim that nothing is better than native when it comes to quality, performance, user experience, etc…
In 2020 the gap has narrowed enough to place some cross platform technologies to level with native ones in many respects. You will still be going with native for extremely sophisticated projects, high requirements and UX expectations, but frameworks like React Native are by now more than able to surprise you with their capabilities when it comes to both UI quality and the app’s performance 🌟
I put together a few of the most popular hybrid and cross platform mobile development frameworks of recent years to show the evolution of the non-native technologies and their past and present applicability to mobile projects. React Native will be left for the end of the article, as it is the latest, most popular, and IMHO – currently the best option for app development projects other than native. For each of the technologies, I will attempt to touch on the testing issue as I go over their characteristics and applicability.
Can’t wait for my final conclusions? Jump straight to my summarizing comparison table! 👉
Table of Contents
- Apache Cordova
- Ionic
- Xamarin
- NativeScript
- React Native
- Cordova vs. Ionic vs. Xamarin vs. NativeScript vs. React Native – Complete Benchmark Comparison Table of Top Cross Platform Mobile Development Frameworks
Apache Cordova
The mobile app market has been asking for a solution to the problem of creating apps for more than one platform with a single tech stack, pretty much from the start. In 2009, a company called Nitobi proposed their solution – A mobile application development framework allowing for the building of an app’s UI using technologies like HTML5, CSS and JavaScript.
Instead of using platform specific (iOS, Android or Windows) APIs, apps written in the above mentioned technologies are wrapped by Cordova into a browser-based (UIWebview for iOS or WebView for Android) native-looking User Interface.
Variety at a price
Cordova’s applicability is actually quite extensive – Aside from being a standalone app development framework, it serves as a base for eg. Ionic (see below) which enriches apps by enabling access to native hardware features of the mobile device the app is running on. Cordova’s most significant advantage is at the same time it’s undoing. The fact that the app is running as a browser instance makes it highly susceptible to performance issues. Although the latest, high-end devices offer amazing hardware support for Web View based applications, running them on less performant, older phones will result in very poor performance and below-par User Experience.
The testing
Quality Assurance of browser based applications is somewhat problematic. Although tools like Appium offer a lot of options, a Cordova based app needs to be tested across not only a variety of devices (especially troublesome for Android) but also different versions of browsers. Appium has in-built support via Chromedriver for automating Cordova-made Android apps, so testing Chrome web views is fairly straightforward. For iOS, Appium supports automation of UIWebView and WkWebview elements, but falls short on SafariViewCotroller. Other solutions in the market extending Appium, such as TestProject, help solve this exact challenge by enabling cross platform testing and execution on multiple browser versions, as well as multiple physical and cloud devices (on all operating systems – Even iOS on Windows!).
Ionic
As mentioned above, the Ionic framework is built on top of Cordova and the two technologies bear a lot of similarities. Ionic utilizes web technologies like HTML, CSS and JavaScript (with AngularJS) to enable building cross-platform mobile and web UIs.
Ionic’s main advantage is the fact of being a very good tool for a web developer needing to build a fully-fledged mobile app. The technology offers an extensive set of standard elements with which to create native-looking UIs. In fact the implemented elements adjust their appearance according to the platform you are running your app on, making the interface more familiar to the end user.
Ionic comes with a palette of plugins enabling low level access to the mobile devices’ hardware, but as these are often community based, it’s not uncommon for them to lack appropriate updates or requiring additional work to get them working properly.
Speed of development
The fact that Ionic is based on Angular, makes development of apps highly efficient. As you create the UI, you can run your project in a browser and preview the effects of the changes on the final look of your app. The fact that you don’t need to use a device emulator or deploying to a physical device significantly speeds up the process of development. The building and deployment of the actual app version is also surprisingly fast, so if the need arises to eg. test the app’s interaction with the native hardware, you can get the app within minutes.
2020
Both Ionic and Cordova, although still popular among web developers, seem to be losing popularity and becoming a secondary choice. This is mainly due to dwindling community, lack of regular updates to plugins and other resources, and most importantly, owing to the emergence of ever better native cross-platform frameworks like Xamarin, NativeScript and React Native. The main advantage the three hold over hybrid technologies is compiling to native components and thus producing performant, quality apps with a native UX.
Xamarin
Xamarin is a C# based, Microsoft owned framework. The main selling point of the technology is the possibility of building single-code (C#) solutions for both iOS and Android platforms. Xamarin written apps are created within the .NET framework.
There are several things speaking for using Xamarin. The most important advantage the technology holds over native development is the fact that Microsoft provides full, thorough and ongoing support for a comprehensive set of tools and solutions to enable the building of high-quality applications with a practically native look and feel. All done with a single code base reusable across Android and iOS platforms, makes Xamarin an attractive alternative to full-blown native productions. The framework is a popular choice in the large enterprise world, with a number of world renown financial and B2B organizations employing Xamarin for producing their software solutions.
The cons and costs
As is the case with most cross-platform technologies, Xamarin is not without faults. The claim of “up to 95% code reusability” is quite bold on part of Microsoft, as this level of code sharing between platforms is achievable for projects with requirements perfectly fitting Xamarin’s capabilities. 65-70% would be a more reasonable estimate for most applications. Another downside of Xamarin is the cost. $1900 for enterprise and $1000 for a business version can be a significant deterrent for smaller companies or young programmers wanting to get into Xamarin development.
The QA
Xamarin is embedded in the .NET framework – One of the most versatile and useful offerings from Microsoft. For Xamarin built apps, the software giant offers the Visual Studio App Center – A comprehensive toolset for continuous integration that enables building, testing and releasing applications for not only Android and iOS but also Windows (UWP, WPF and WinForms). With VSAC you can control the lifecycle of your app, utilize cloud-based testing on real devices or even distribute the app to your beta testers.
NativeScript
NativeScript has been around since 2014. It’s a 100% open-source, UI building framework. The idea that drove its creators was to give web developers a familiar toolset for creating native mobile experience. With full access to native APIs and HTML-like syntax, developers can build native UIs where JavaScript or TypeScript written apps render CSS styled native components. The framework is quite popular among web developers turning their attention from desktop towards mobile, and offers a wide palette of solutions.
Apps built with NativeScript are of high quality and what makes it stand out is the capability to utilize native APIs, making it easier for developers to access native components without having to look for community based plugins or creating their own solutions.
The QA
There’s a wide variety of testing options for NativeScript apps. Unit tests can be performed with NativeScript’s CLI built-in solution that supports frameworks like Jasmine, Mocha and QUnit, while functional testing can be done using Appium as well as a variety of other tools out there in the market, such as TestProject which is also based on Appium and completely free.
The issue
Although NativeScript is more than applicable to a variety of mobile projects, it’s been seeing a significant drop in popularity among both clients and the developers’ community. Although the framework itself is not to be blamed, the effect of turning to other solutions like React Native or, more recently, Flutter causes a decline in community based contributions to NatveScript’s development and while the others are growing and perfecting, NativeScript is starting to trail behind.
React Native
React Native was invented by Facebook. Initially, React JS library was used for developing the Facebook platform and amassed a significant community of Facebook developers internally. The level of community interest in React.js drove the creation of React Native – A native UI building platform with React.js for a heart.
Compiling to native components (rendering) is done with the use of native APIs. Unlike Progressive Web Apps “write-once-run-everywhere” apps, in React Native, one code base of the application is created, which after some adjustments according to the specifics of the native platforms, can be implemented as iOS and Android app.
Out of all cross-platform solutions out there, React Native is definitely the top player. Huge interest from all kinds of clientele – startups, C2C, B2B, large enterprises, and ever growing community of developers ensure that the framework is not following in the footsteps of its peers and predecessors, but is well on the way to becoming one of industry’s top regarded technologies.
Increased speed of development with a single code base, a hot-reload function for instant viewing of introduced changes, growing community, contributions from both Facebook and developers around the world, makes React Native a very good choice for mobile projects. The danger of being phased out or replaced by competition is quite remote, so I think in 2020 and a little while longer, putting your money on React Native is a safe bet.
Testing React Native apps
The QA of apps created with the framework is very much like that of purely native software. The issues that may arise will mostly stem from the differences in implementations of the same codebase into Android or OS. Bugs and errors reported are mostly regarding functional issues where something works on the iOS implementation while not performing well on Android, or the other way round. As React Native allows implementation of native components into the app, some differences in testing might occur, as the more native components are implemented in each of the app versions (iOS and Android), the more differences there will be between testing particular functionalities on iOS and Android versions. It a good thing we can utilize smart locator strategies and UI element inspecting tools to ease our testing processes, such as Chrome DevTools or even TestProject‘s free built-in Element locator and DOM explorer for both web and mobile.
Cons of React Native
Among cross-platform technologies, React Native forms a league of its own. The downsides can be considered mostly when comparing it to 100% iOS and Android native developments. If your app requires full, low-level access to native components, highly performant 3D animations or sophisticated calculations, then you might consider going with full native. Other than that there’s very little I can say against React Native. Getting a new competitor – Flutter will most likely push both Facebook and the community to step up their game even more.
To sum up…
As you can see from the above rundown, hybrid and cross-platform development is still alive and well, but the market is seeing a significant shift towards the latest, highly performant frameworks like React Native and Flutter. The need for cutting costs, while still delivering high quality mobile experience to the Users, is changing the app development landscape.
As I see it, and as the tendencies show, in 2020 worldwide, there should be more implementations in React Native than NativeScript, Ionic, Cordova and Xamarin combined. Hopefully, by the end of this year, you will be reading an I-told-you-so article from yours truly 😉
I’ll finish off with my complete benchmark comparison table below:
Top Cross Platform Mobile Development Frameworks
Cordova vs. Ionic vs. Xamarin vs. NativeScript vs. React Native
