Mobile app development has quickly evolved from plain HTML5 to apps that combine native code with hybrid code. While this mix of different coding styles remains invisible to the user, he or she can stand to benefit from such an approach.
Mixing hybrid and native code
In the past, developers have often had to decide on one approach in advance. But mixing code leverages additional possibilities, such as cross-platform development, while maintaining the native OS look, feel and performance. There are several technical concepts that enable enterprises to use both technologies in the same app. Overall, the possibilities available to developers depend on which mobile operating systems are being targeted. For the major mobile operating systems (iOS, Android and Windows), the APIs and native concepts are completely different.
The common foundation for all hybrid mobile applications is Apache Cordova. From a technical perspective, Cordova-based apps are also native apps, though they’re very simple native apps that load a HTML file on startup and render the HTML, JavaScript and CSS code. In addition, Cordova adds a native library to the app that can be referenced from JavaScript code.
Mixed apps
There are several approaches to implementing mixed apps. The simplest method would be to have native views and hybrid views live separately in the app. The developer would then have to be in charge of making the styling consistent across all layers. This approach becomes more expensive if these different layers need to communicate with each other. For instance, data that is generated in a native view might need to be used in a hybrid view. Additionally, a native task may need to run in the background and notify the hybrid layer after it has finished.
The next level of mixing these technologies would be to have them in the same user interface screen. In this scenario, part of the view, such as the navigation bar, footer and slide menu, would be native while the other parts, such as the content and geographical map, would be implemented in HTML5.
The exchange of information can be implemented in the same way as above, but the placement of the different view elements needs to be handled in the native code. The possibilities are vast, as this enables smooth animations, extended use of gestures and advanced use of device sensors.
Use cases
The use cases for this mix of technologies are widespread:
Shopping apps can use HTML-responsive design capabilities to present product details adjusted to the actual screen size. If developers pay attention to life cycle management, this content can also be synced with Web content. The navigation and 3-D animations can be implemented in native code, unleashing the full potential of the hardware.
Other cases are based on the use of HTML5 as a common layer across different device operating systems. HTML5 has become quite powerful, so a large amount of user interaction can be implemented on this neutral layer. Even advanced user interfaces, such as graphs or interactive charts, can be implemented with good performance across mobile platforms.
But it’s important to remember that not every app needs a combination of HTML5 and native code. Many mobile use cases can be implemented in a single technology. Sometimes, a particular feature that the stakeholders demand enforces the use of native code for the complete app. With the option for mixed apps, such features can be implemented in native code, while maintaining cross-platform availability for the major portion of the code.
As outlined, the interaction between the technology segments can be challenging. To ensure a proper architecture, enterprises should use a framework as “standardized glue code.” This can be done with Cordova plugins. It’s even more convenient for developers to use a library that provides a simple API to enable interactions in a single line of code.