Hybrid Web Applications: The Best of All Worlds for Mobile Application Development

Tuesday, April 1, 2014

Mobile application developers face a dilemma. The mobile device landscape is fragmented and fast-moving. To be sure of covering as much of the market as possible, applications need to support multiple operating system environments, such as Android, iOS and BlackBerry OS. But these environments have different architectures and application programming interfaces (APIs) that makes it difficult to have a single piece of source code compile cleanly to run on different devices.

With Great Power Comes Great Porting Effort

Native application development using languages such as C++ and Objective-C delivers the best performance and integration with the host operating system but it comes at a cost. The development team needs to understand the detailed architecture of each target operating system and use its specific APIs and programming language. Besides differences in the ways APIs are offered, there may be differences in how the whole architecture of an application is designed for an operating system. This means that it is not necessarily feasible to just replicate the application code with a different set of APIs when porting it but, rather, it needs to be completely redesigned. This, of course, makes it even harder to support consistent behaviour across the various target systems as all bug fixes and new features need to be designed, implemented and debugged differently for all target platforms.

Even within a single platform, operating system updates demand frequent modifications to the application to take advantage of new user-interface techniques and maintain a look-and-feel that is in keeping with the platform’s native apps. With a native-code application, developers have to keep a close eye on possible changes to the underlying APIs they have used to ensure that each successive update does not impact performance or introduce faults. What is needed is some way to abstract the details of the underlying operating system to allow a single codebase to run across multiple targets.

Attempts have been made to provide cross-platform portability for applications on the desktop at the language level but they have met with limited acceptance. Java, for example, is now widely deployed on servers but developers focusing on client application development for desktop machines still tend to stay with the native languages and APIs of Windows, Linux and OS X. Native applications generally have higher performance and direct access to operating system resources thus having the benefit of using the platform’s native user-interface (UI) elements, giving them a consistent look amongst other applications in the system. An application running on Windows should look like a Windows application whereas very often, Java-based applications look alien to the core operating system.

HTML5 Is Not the Silver Bullet Either

The arrival of the smartphone and its focus on web-enabled applications led to hopes that the HyperText Markup Language (HTML) might form the basis of a common application-development language and API. Through the combination of Javascript, HTML markup and Cascading StyleSheet (CSS) version 3 definitions, HTML5 makes it possible to deploy rich-media applications on any mobile platform that has full, consistent support for the standard.

Although consistent interpretation of HTML5 definitions by browsers on different platforms has improved in recent years – some of which has been helped in the mobile environment by the widespread adoption of the open-source WebKit browser technology – there are still differences in the internal implementations of the features and competition between the different ports of browser engines. For instance Google forked their own Blink browser engine from the WebKit project taking a number of contributing parties with them, leaving Apple and their platforms on basic WebKit. This again increased the fragmentation of web technology that application developers must struggle with when targeting different browser

implementations.

Browser implementations can differ in simple ways, such as how they interpret form elements. For example, browsers may not handle more sophisticated types of data in forms such as enumerating the days of the week. Similarly, different display elements may be missing or only partially supported. Although the functions of those elements can often be emulated using custom CSS and JavaScript, this adds to the development cycle and demands the use of browser-sniffing code on the server or more complex JavaScript on the mobile client to render the application correctly.

More complex application needs such as event processing, animation and video are handled in different ways by some browsers, demanding custom development work to achieve effective emulation of those features.

A further, more fundamental issue with using HTML5 for mobile application development is that it relies on a functioning internet connection. This may be appropriate for apps that provide real-time data feeds. The use of server-delivered HTML5 can be an advantage for applications where regular updates to the software are desirable as the new code can be deployed without it having to be pre-approved by an app-store operator.

But the requirement for an active internet connection is a drawback for software that is more self-contained, such as a single-user game, particularly as users will often disable internet access while roaming abroad to keep bills from their operator under control. Native code stored on the mobile device itself allows much finer-grained control over network access. Similarly, security features and access to device I/O and peripherals are more easily implemented using native code than in HTML5. In a number of cases, there is way to access some device peripherals, such as the camera, from HTML5.

On the other hand what HTML5 enables over native approaches is more dynamic contents and the ability to run the contents inside any web browser, outside the mobile application. Should the application user interface have parts that would be shown or applied directly in a regular web page, native UI approaches could not be taken into the browser.

HTML5 enables the re-use of regular web page features and contents directly inside the mobile application. An HTML5 UI is thus often more dynamic and—because of its sometimes problematic online requirement—updated and fixed constantly as a new version of the markup can be loaded from the server every time without the need to re-compile and re-deploy the application code.

Hybrid Applications—You Can Never Go Wrong with Surf-and-Turf

For many development teams it makes sense to adopt a hybrid approach. Some parts of the app are implemented in native code to aid performance and provide much more fine-grained control over how the software runs on the target platform. Other parts may leverage the rich network-oriented functions of HTML5 to exchange real-time data with servers and allow rapid, seamless updating of the code. The question is how to achieve this in a way that allows easy deployment onto multiple platforms without significant rewrites or porting effort each time.

According to Kendo UI[1], 32 per cent of mobile applications are developed using a hybrid strategy in which HTML5 code works alongside native. A further 17 per cent use a different type of hybrid strategy in which leading platforms have natively coded software with a ‘catch all’ HTML5 implementations used on less popular platforms. Gartner has predicted[2], by 2016, more than 50 per cent of mobile applications deployed will be hybrid.

To make the hybrid or pure native strategy work, the answer is to adopt an applications development framework that has been designed from the ground up for cross-platform, that avoids the restrictions of the proprietary native software model and which provides a variety of implementation languages to suit hybrid application development. One such framework is the open-source Qt, which over the course of more than ten years has built up a proven and mature cross-platform codebase. Qt has been used not only in mobile phones but systems as diverse as digital photo frames, medical equipment, network analyzers and TV settop boxes.

Qt, Best of All Worlds

Qt 5 provides a complete development environment and a set of libraries that provide developers with the ability to take one codebase and apply it to multiple mobile platforms, including iOS, Android and BlackBerry. To provide developers with the flexibility they want from a hybrid applications architecture, Qt 5 embraces techniques they will be familiar with from native development as well as from HTML, but with the differences in platform support abstracted away.

As well as a more traditional API that can be used with languages such as C++ that provides access to interface elements, I/O and security functions, Qt 5 provides the Qt Quick framework that is based around a declarative language called QML. QML greatly eases the creation of rich-media user interfaces and can be worked together by the user interface designer and the software developer. Like HTML5, QML employs JavaScript and markup to build interactive interfaces that leverage the core C++ libraries as well as the OpenGL ES rendering support that is now available in many mobile devices. Unlike HTML5, QML has been specifically designed for creating modern touch-based user interfaces providing a very productive set of features for creating beautiful user interfaces with transitions, animations and state machines.

QML is also well integrated with web technologies and allows easy integration of dynamic web content, even directly written with HTML5, as well as using JavaScript code to perform business logic operations. This allows direct re-use of Web documents. With Qt 5 supporting the widely-adopted JSON (JavaScript Object Notation) format natively, integrating into online web service REST APIs is seamless directly from the QML or C++ back-end code.

The key advantage of using Qt 5 and Qt Quick is that it provides developers with a consistent development environment that maps to leading mobile-device platforms. Developers can easily employ a hybrid strategy using C++ with the Qt 5 framework for code that requires access to core device services. Other parts can be written in QML that is then mapped to HTML5, as well as WebGL for high-performance 2D and 3D graphics. By writing QML, developers are protected from inconsistencies in HTML5 support, providing them with the platform independence that HTML5 was intended to offer. For use cases requiring HTML5 based documents for a web interface, Qt provides seamless integration to allow embedding these into dynamic parts of a QML-written UI.

Using a hybrid strategy for mobile applications, developers can achieve the best of both worlds. By using a cross-platform framework such as Qt 5, developers can greatly ease the job of implementing hybrid strategies across the increasingly complex mobile-device environment.

This content is made possible by a guest author, or sponsor; it is not written by and does not necessarily reflect the views of App Developer Magazine's editorial staff.