Top 5 Hybrid Mobile App Frameworks
From Microsoft and Facebook down to the smaller players, here are five of the hottest hybrid mobile app development frameworks on the market in 2019.
Publishing and maintaining a stable of platform-specific apps is hard and expensive work if each distribution needs dedicated native coding for each host OS. Thankfully, the open-source revolution of the last 10-15 years has brought forth a new generation of hybrid mobile app frameworks that are capable, with varying amounts of effort and expenditure, of generating native apps for many platforms from a single codebase.
Each hybrid app framework or library has its own set of limitations and capabilities, and for sure each offers an elastic definition of 'free'.
In this article, we'll take a look at five such contenders for mobile app development. Our selection includes offerings backed by some of the biggest tech names in the world, as well as insurgent frameworks looking to move up into that category in the future.
1: Ionic Framework
Ionic is an open-source development framework for the creation of responsive cross-platform apps for iOS, Android, and Windows operating systems. The framework was released in 2015 after two years of beta and alpha trials.
Ionic uses Apache Cordova (the upstream FOSS repository for Adobe's PhoneGap) to generate native app releases for the platforms that it supports. The project later decoupled its initial dependence on AngularJS and Apache Cordova to allow users a wider range of interface frameworks, with official support for Angular, Vue.js and React.
As with most similar offerings, Ionic builds are powered by platform-agnostic web technologies including HTML5, CSS, and Sass. The framework produces highly performant and scalable output. The wide range of supported platforms enabled by Progressive Web Apps (PWAs) promises a growing place for Ionic as a central content framework with a truly platform-agnostic approach.
Initially released on a completely free and open-source basis, Ionic has since added the Enterprise Edition that offers priority hot fixes, a next-day SLA response, long-term version support, version migration support and advice, and training products. No public pricing is available for this tier.
The later iterations 3x and 4x brought additional speed benefits and an outright focus on Progressive Web Apps (PWAs) via the deconstruction of functionality into web components. With Ionic 4, the project abandoned its dependence on Angular and Cordova entirely, and provided more comprehensive and useful documentation, as well as improving execution time by a factor of 1.5.
Ionic is suitable for SME development teams that are free to start a project with the technologies of their choice. Larger companies might benefit more from frameworks and libraries that have stronger associations with enterprise-level business software suites, such as Xamarin's integration into Microsoft's Visual Studio.
Note: here and below, * stands for ‘at time of writing – August 2019'
- Powerful animation options and tooling
- Good documentation, a helpful and populous community forum, and a wide range of other online resources facilitated by a large user base
- Easy and effective scalability
- UI can be difficult to navigate
- Overall performance lags against competitors such as Xamarin
- Framework overhead means app distributions may not run at native speeds
2: JQuery Mobile
JQuery Mobile prioritizes the widest possible spectrum of compatibility over competing factors such as platform styling integration and native-level app performance. It's arguably the Rosetta Stone of hybrid app frameworks, providing the most comprehensive browser and platform support across the current 1.3 and 1.4 iterations of the JQuery codebase.
The price for this level of reach and adaptability is that deployments based around JQuery Mobile tend to be visually and functionally more generic than the output from competing frameworks.
Aware of this shortfall, JQuery Mobile has provided the ThemeRoller tool where theme-specific styling can be applied. However, several of the rival frameworks offer more intrinsic and graceful methods for integrating into the host environment.
By the time of the first alpha release of JQuery Mobile in 2010, JQuery itself had already risen to great diffusion in the wake of the demise of Adobe Flash and the rise of HTML5. The first stable release candidate of JQuery Mobile came online in September 2011, with its uptake and popularity rising to a peak in the middle of 2013, when rivals such as AngularJS began to encroach into the mobile app development sector.
In the years since, demand has risen for libraries that run faster or more efficiently than JQuery. Minimalist offerings such as Umbrella, Zepto, Ratchet, and Dollardom provide lighter codebases aimed at apps that favor performance over comprehensive library resources.
JQuery has declined in popularity as the problems that it sought to redress (such as cross-browser compatibility) gradually became non-issues due to new technological innovations and the rise of competing and more efficient libraries and approaches.
Anecdotally, JQuery Mobile is said to remain very popular for internal corporate deployments where development speed, codebase maturity, affordability of developers, and a rock-solid open-source license trump some of the more superficial shortcomings of the platform.
- The broadest developer base of any similar platform
- The widest range of possible output platforms
- Very low entry costs—particularly appealing to inward-facing corporate platforms
- No dedicated MVC support
- A declining technology with a mission long-since accomplished, struggling to attract new internal development talent
- Inferior runtime speed compared to 'native' code execution
- Limited capability to adapt to host themes and styling
Launched in 2011, Xamarin is the development and extension of Mono, a project that ported cross-platform, open-source versions of key Microsoft technologies. After some years of cross-fertilization and acquisition across a dizzying range of associated projects, Xamarin was finally purchased outright by Microsoft in 2016 and ultimately bundled into its Visual Studio and .NET core offerings.
Xamarin enables the development and distribution of Android, iOS, and Windows apps via C# and XAML in a .NET environment, and offers extensive codebase sharing between platforms. Cross-platform code in a Xamarin project can range from 35% to as high as 90%, depending on requirements and the extent to which a development team is willing to prioritize this aspect.
The powerful Xamarin.Forms templating system exposes platform-specific functionality, enabling the development of fast-running apps with a native look and feel from a single codebase that's easy to manage. However, it's also worth noting that Xamarin.Forms is a brittle way to achieve OS integration, and that this approach will require ongoing maintenance when target OS features and styling change.
A Xamarin project can also be developed with Xamarin Native, a more traditional low-level development model that lacks the same focus on interoperability with OS-specific design and feature sets. Projects where rendering speed or compiled app size is critical, or where a UI is imposed at design level—for instance, games—are usually better suited to Xamarin Native rather than Forms. Here, we'll deal with the more popular Forms-based approach.
Official guides for leveraging platform capabilities are available for iOS, Android, and Windows. Developers can also create their own custom access channels to platform-specific functionality.
Xamarin capabilities are now native to Microsoft Visual Studio, which accompanied its 2019 update with the launch of Visual Studio 2019 for the Mac OSX platform. Android developers are catered for via the Xamarin.Android extension for Visual Studio on both Windows and OSX.
Besides the formidable pre-flighting capabilities of the Visual Studio suites for Windows and Mac, iOS builds can be previewed on Windows via the Remoted iOS Simulator for Windows. This requires a network-accessible Mac.
In 2016, Microsoft announced that it would bundle Xamarin into Visual Studio for free. However, this only applies to open-source projects, individual developers, for academic research or educational purposes, and for “small professional teams.”
Several Xamarin features are excluded from free use in Visual Studio (though you will have to click deep into Microsoft's interactive feature pricing map to discover this). While Xamarin.Forms is available across all versions, the live app inspector Xamarin Inspector and is only available in the Enterprise Edition of Visual Studio.
Xamarin Profiler, which enables dynamic program analysis and other high-level debugging investigative tools and methods, is also an Enterprise-only feature.
The profiler could be argued to be an essential tool, making its omission in the cheaper or free edition a strong upsell. There are alternatives to these tools, but none which are so integrated, convenient, and feature-complete.
You'll need to play 'Where's Waldo' with Microsoft's comprehensive and exhausting map of commercial SaaS offerings in order to discover what full-featured Xamarin development will cost your project. However, Visual Studio's core pricing currently breaks down like this, according to Microsoft:
An enterprise-level project is likely to need the evaluative and forensic capabilities of those premium tools. This renders the 'open-source' aspect of Xamarin a nursery environment for later, better-funded projects, rather than a functional large-scale FOSS framework for hybrid app development.
Nonetheless, for companies already accustomed to a .NET/Visual Studio workflow, a Xamarin-based approach to hybrid app frameworks is an obvious choice. For others, a new and notable burden of commitment could offset many of the advantages of Xamarin.
- Massive commercial investment and long-term backing by Microsoft
- Testing environments that don't require jail-broken test devices
- Coding in the most popular environment for developers (in 2019)
- Native or near-native code execution times, depending on scope and configuration
- High level of reusable code across host environments
- Static type checking in C# that eliminates many possible coding errors
- High availability of .NET developers
- Expensive, if you want the enterprise-level debugging and profiling tools
- Inherits some of the technical debt of Visual Studio and .NET core
- Xamarin.Forms configurations can prove brittle when the host OS updates or changes
- Larger file sizes for Forms-based distributed apps
- Xamarin code cannot be ported to HTML5 or native apps
- API lag can be a problem, particularly with Android
- Limited online community compared to some competitors, though a user-forum is available
4: React Native
React Native apps repurpose the UI building blocks of the host OS for fast response time and visual integration. They can also feature blocks of native code as necessary, a practice that Facebook implements for its own apps.
The decoupled architecture of React Native tends to reduce framework lag considerably, and React Native apps compare favorably to those written in lower-level languages such as Swift. However, it's necessary to pay attention to optimization bottlenecks such as unnecessary re-renders in order to achieve the advertised 60 FPS from your React Native app.
Since React Native is a component-driven library rather than a rich framework, the functionality one might expect in a feature-complete development suite will need to be added via components.
The laissez faire philosophy behind React Native will entail greater initial planning than with lower-level programming environments, since the environment itself has to be developed before work can begin on the app. That means defining the architecture and anticipating any components or services that will be needed to support it. This is likely to slow down initial development, as a trade-off against later ease of use.
React Native directly supports iOS and Android platforms, but the industry interest has prompted compatibility projects from some of Facebook's major tech stablemates. For instance, Microsoft maintains its own framework to facilitate the development of Universal Windows Platform (UWP) apps with React Native.
As for Apple, the React Native macOS GitHub repository forks the library to the OSX desktop platform. To make things easier, the advent of Apple's own Project Catalyst could make separate iOS device development channels redundant.
At 10.8%, React Native is high in the top ten developer environments for 2019 according to Stack Overflow. Nuevoo estimates the average salary for a React Native developer at $120,000, while PayScale places it at $91,000.
In terms of online documentation, Facebook maintains a list of resources. These include a frequently updated blog, a Twitter account (for React), and a bug report template at GitHub. There's also a dedicated Facebook group, a chaotic Discord channel, and a less-than-lively spectrum chat domain. The best resource for developers remains Stack Overflow, which currently hosts nearly 56,000 questions around React Native.
Enterprise projects where responsiveness is critical can benefit greatly from the ability to switch between React Native's very abstract node modelling and into native code as required. The backing of one of the planet's richest tech entities also means that you're getting a mature, rich and highly performant codebase without any of the commercial 'gotchas' featured in some of the rival frameworks listed here.
On the other hand, your project is likely to get off the ground later with React Native than with any comparable rival frameworks, so it's important to be realistic about this upfront investment of time and money.
- Near-native performance possible in distributed apps
- Easy to maintain after initial set-up
- High industry uptake with reasonable developer hire costs and good availability
- Backing of an uber-rich tech giant that's (currently) committed to the project
- Initial technology stack takes a lot of setting up
- Development cycle is likely to be longer than many competing frameworks/libraries
- Third-party components of varying quality may require extra coding to fix and maintain
- The currently permissive license has changed before, and it could change again
- Developers often complain about poor response times for posted issues
- Limited online help communities, with support largely deferred to Stack Overflow
5: Onsen UI
First released in 2014, Onsen UI is an open-source hybrid app development framework that distinguishes itself with a relatively shallow learning curve, the ability to deploy effectively to desktop as well as mobile environments, and by offering workflows based on existing frameworks—such as Angular and React—whilst remaining untethered to any particularly libraries.
Onsen UI's system of directive-driven CSS and web components includes support for desktop apps via Electron or NW.js. This enables the framework to easily output desktop apps or store-bound mobile apps from the same codebase, with manageable file sizes, fast operation and great fidelity to the host environment.
Currently supported output platforms include iOS9+, Android 4.4.4+ (with WebView or Chrome browser), the latest Safari OSX desktop browser, and the latest Chrome browser (across platforms). From v2.7.0k, Onsen has provided custom fixes for certain visual compatibility issues with iPhone X.
Onsen UI has relegated Edge, Firefox, IE11 and Windows Phone 10 into a semi-supported category where most functions are promised to work correctly, and polyfills are used to bridge the compatibility gap where possible.
Onsen UI features faithful native themes for iOS and Android, with animations that have been painstakingly optimized for authenticity and responsiveness. Onsen provides a test site with native controls for the target platform, and a comprehensive theme roller for iOS and Android.
Onsen's dedicated online community is not the liveliest, and in general Onsen continues to rely on developers convening at Stack Overflow for solutions.
That said, the project has responded to criticism of its poor online documentation with great improvements over the last few years. Onsen UI already had a fairly shallow learning curve, and now it really is very easy to get up and running with hybrid app development using this framework.
Onsen UI currently has 102 contributing developers, while the core source code appears to be driven by sole GitHub developer Naoki Matagawa. It's not quite as 'homespun' as it looks, though: Onsen UI is developed by Japan-based startup Asial, that has offices in Tokyo and San Francisco, and whose portfolio of software products includes both Onsen UI (free) and the associated hybrid app development and collation environment Monaca (commercial, with a fairly limited free version).
Whether by design or not, setting up Onsen UI to generate hybrid app production via Cordova is quite a challenge (as the official documentation admits)—a problem which Monaca solves, at a price.
The Business and Enterprise tiers offer annual or monthly billing (the latter at higher overall cost). Enterprise plugins for App Logic Encryption, Secure Storage and an In-App Updater cost $900 per year (each), for licenses below Enterprise.
Being limited to cloud-based development on the free tier is unlikely to suit a professional project, while the lack of support ticketing below the Business tier makes that plan the only realistic entry-level option.
Monaca's more detailed breakdown of full enterprise-level pricing is extensive and difficult to navigate, rivalling only Microsoft’s Xamarin/Visual Studio in terms of complexity. However, a 14-day free trial is available across all plans.
The Monaca debugging environment is an app available for iOS and Android, with support for custom debugger builds.
Onsen UI is an exciting, capable and imaginative alternative to Ionic, but it is more expensive to run on a professional basis than is initially apparent. To its credit, Onsen UI does at least explain its pricing structure, albeit in a tortuous manner, whereas Ionic saves this bad news for the 'Contact Us' button (not usually a good sign).
In most other respects, the functionality of the two frameworks is fairly similar.
- Framework-agnostic, highly portable approach
- Extensive functionality in the free configuration
- Fast, native-looking apps
- Good initial documentation
- Above-average scope of platforms supported
- A lot more expensive to run effectively than its superficial publicity suggests
- Limited online community
- Very limited app showcase compared to Ionic and other frameworks
Only project-specific requisites such as scope, scalability, fidelity, and developer and infrastructure cost can narrow down the choice of a hybrid app framework or library. Nonetheless, we can glean some guidelines from our examination of these five products.
If you're looking for a framework with rock-solid backing and practically zero ancillary costs, React Native is currently a very good choice. Ironically, it is actually a better choice for smaller budgets than the smaller players listed here, since the trickle-down effect of Facebook's own open-source development ecostructure has paid a large amount of the project costs in advance.
If your project needs to get off the ground quicker than React Native will allow, and cross-platform theming is less important than performant and functional hybrid apps, JQuery Mobile likely offers the lowest developer costs of any of the frameworks. The fact that JQuery itself retains such a strong grip on the JS-based development scene provides some reassurance about long-term availability of the framework as well.
If your budget is unconstrained, or you have already invested time and money in Visual Studio development, the immensely capable Xamarin is the obvious choice.
Between the smaller (and very similar) players Ionic Framework and Onsen UI, Ionic is arguably better value, with a more developed online community and an acceptable learning curve.
A Takeaway Summary
off the ground, native or cross-platform
In our Xamarin vs. Cordova comparison, we outline some advantages of each of these two cross-platform development tools for building mobile enterprise apps.
Xamarin in comparison to other platforms and whether it's good for particular kinds of projects. Learn the features that every business executive set on finding the best cross-platform development option should know of.
In this Xamarin vs React Native face-off, we compare the best and worst aspects of the two immensely popular cross-platform native app development tools.
WANT TO START A PROJECT?