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.
Tweet
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.
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
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 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.
Summary
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
Tweet
hybrid mobile app framework
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'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.
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
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.
Tweet
A Takeaway Summary
off the ground, native or cross-platform
WANT TO START A PROJECT?
It’s simple!