Category
Mobile

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.

The most complete review of top 5 hybrid mobile development frameworks, from the enterprise perspective: Ionic, JQuery Mobile, Xamarin, React Native and Onsen UI
Tweet

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.

Released in 2016, Ionic 2 upgraded its upstream dependencies from Angular 1x to Angular 2x, and featured increased DOM performance, a native plugin system, new form controls, and reimagined theming tools. It also offered faster and native JavaScript-free scrolling for iOS, rather than just Android, as well as improved error reporting, a new raft of version-specific API-based components, and support for web workers.

Ionic 2's new access (via Angular 2) to W3C's Web Animations API also enabled developers to exploit the browser engine's animation features via JavaScript-based API calls, instead of relying on HTML5 code to call the browser's renderer.

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.

Summary

Note: here and below, * stands for ‘at time of writing – August 2019'

Created:
2013-2015
License/Cost:
Open-source MIT2 license (Community Edition)
Supported Output Platforms:
iOS, Android; Desktop + Web (via PWA)
Commercial Ecostructure:
Enterprise Edition; themes; third-party support; mobile app development services
Stack Overflow Questions:
39,702*
Forks:
13,085*
Issues:
613*
Notable End Users:
MarketWatch, McDonalds, McLaren Automotive, Morgan Stanley StockPlan Connect, Sworkit, TD Trading

Pros:

  • 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

Cons:

  • 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

Born of the phenomenal success of the JQuery JavaScript library, JQuery Mobile is a dedicated library for wrapping and deploying HTML5-based content into native, platform-specific containers.

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.

Hybrid apps developed via JQuery Mobile can run slower, depending on the tasks they must perform. JQuery itself was not specifically designed for mobile environments, and cannot usually match the performance of dedicated JavaScript code, where events are called directly rather than routed through JQuery's framework.

Some rival libraries and frameworks are able to access lower-level instruction sets in mobile devices with less dependence on optimizers, interpreters, or transpiling. For example, the emerging open standard WebAssembly (WASM) not only outstrips any JavaScript performance on mobile devices, but performs on a par with native code.

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.

JQuery: percentage of Stack Overflow questions

However, 'decline' is a relative term: JQuery itself currently retains 97.4% of the market share among JavaScript libraries, and is used on 74% of all websites, according to W3Techs.

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.

Summary

Created:
2010-2011
License/Cost:
MIT (commercial use allowed)
Supported Output Platforms:
All
Commercial Ecostructure:
Third-party developers; third-party support
Stack Overflow Questions:
22,864*
Forks:
2,567*
Issues:
157*
Notable End Users:
All Recipes, Disney, GasBuddy, Kmart, Monster Energy, Safeway, United Airlines, Woot, Zoopla

Pros:

  • 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

Cons:

  • 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

3: Xamarin

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.

Xamarin.Forms

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.

Xamarin Native

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 Inspector

Xamarin Profiler, which enables dynamic program analysis and other high-level debugging investigative tools and methods, is also an Enterprise-only feature.

Xamarin Profiler

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:

Professional (p/m)
$45 p/m per user
Professional (p/a)
$1,199 (first year, thereafter $799 p/a) per user
Enterprise (p/m)
$250 p/m per user
Enterprise (p/a)
$5,999 (first year, thereafter $2,569 p/a) per user

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.

Summary

Created:
2011 (with roots back to 1999)
License/Cost:
Varies depending on need (see table above)
Supported Output Platforms:
Android, iOS, Windows
Commercial Ecostructure:
Desirable withheld features at premium cost
Stack Overflow Questions:
37,542*
Forks:
1,400* (Xamarin.Forms) / 304* (xamarin-macios) / 372* (xamarin-android)
Issues:
Various (see links in 'Forks' above)
Notable End Users:
Alaska Airlines, American Cancer Society, Azure App, BBC Good Food, Fox Sports, Insightly, JustGiving, Novarum DX, The World Bank, Thermo Fisher Scientific, UPS

Pros:

  • 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

Cons:

  • 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
What are Xamarin costs, you ask? You'll have to play 'Where's Waldo' with Microsoft's exhausting map of commercial SaaS offerings to fully discover those
Tweet
Let's find your perfect
hybrid mobile app framework

4: React Native

React Native is Facebook's solution for the deployment of cross-platform apps. Officially launched in 2015, React Native grew out of an internal hackathon in 2013 to develop a hybrid app framework to leverage the company's own Spartan JavaScript library, React. Since the company uses it for the development of its own apps (including Instagram and Facebook's Ads Manager app, among others), it has attracted high-level adopters such as Bloomberg, SoundCloud, and Walmart.

In contrast to C#-based hybrid app development environments such as Xamarin, React Native takes a decoupled, piecemeal approach, where JavaScript segments operate effectively as widgets in a wider app ecostructure.

React Native apps also use a Virtual Document Object Model (DOM) to allow for easy updating of these discrete JavaScript-driven components in a flexible hierarchy. Apps distributed from React Native benefit from Hot Reloading, which can inject new files and data into a stream without changing the active state of the app.

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.

For instance, React Native has no out-of-the-box state management tools, for which shortcoming a third-party solution, such as Redux, will be necessary. External tools will also be needed for app testing, in areas such as unit testing (Enzyme is a popular choice), JavaScript testing (Facebook uses Jest), DOM testing (react-testing-library, for instance), and component testing (Enzyme or unexpected-react).

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.

As of 2016, React Native operates under a permissive and short MIT license that allows commercial use. However, the controversial history of React Native licensing signifies that the terms of use could be reviewed again by Facebook in the future.

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.

Summary

Created:
2013-2015
License/Cost:
MIT (commercial usage allowed, but license historically subject to change)
Supported Output Platforms:
Android, iOS (with third-party support for other platforms, see above)
Commercial Ecostructure:
Third-party only
Stack Overflow Questions:
55,985*
Forks:
17,795*
Issues:
678*
Notable End Users:
Adidas, AirBnB, Bloomberg, CBS, Discord, Discovery VR, Gyroscope, Instagram, Salesforce, Skype, Tencent QQ, Tesla, Uber, Vogue, Walmart

Pros:

  • 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

Cons:

  • 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.

Supported frameworks in Onsen UI include JavaScript (web components), AngularJS 1+ and 2+, React, and Vue.js.

Though Onsen UI also provides full support for JQuery, there are more appropriate frameworks and libraries (not least, JQuery Mobile) for those wishing to stick with a traditional JavaScript stack. However, such an approach rather defeats the framework-agnostic ambitions of the Onsen project.

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 demo screenshots

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.

Monaca pricing

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.

The Monaca Cloud IDE does not currently support Onsen UI with an Angular 2 framework, since the source code needs transpiling to JavaScript. In this case, the Pro tier is the minimum requirement to use the Monaca CLI, since you'll need to develop locally.

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.

Summary

Created:
2014
License/Cost:
Apache License 2.0 / Various Monaca pricing tiers (see above)
Supported Output Platforms:
iOS9+, Android 4.4.4+, Safari (Mac desktop), Chrome (cross-platform)
Commercial Ecostructure:
Upsell to Monaca enterprise pricing for easier production flow
Stack Overflow Questions:
1,135*
Forks:
873*
Issues:
86*
Notable End Users:
Giro D'Italia, Offcourse Golf, Ohalog, Petoom

Pros:

  • Framework-agnostic, highly portable approach
  • Extensive functionality in the free configuration
  • Fast, native-looking apps
  • Good initial documentation
  • Above-average scope of platforms supported

Cons:

  • 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

Conclusion

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.

The choice of a hybrid mobile framework boils down to such project requisites as scope, scalability, fidelity, and developer and infrastructure costs
Tweet

A Takeaway Summary

top 5 hybrid mobile frameworks: a comparative table
Content type
Blog
We'll get your mobile app project
off the ground, native or cross-platform

WANT TO START A PROJECT?

It’s simple!

Please wait...