Building Hybrid Android Apps with Java and JavaScript

Chapter 6. HTML Architecture for Hybrid Applications

Your hybrid application is primarily an HTML5 web page built using mobile-optimized JavaScript and CSS-styled to look and feel native. Like any application, hybrid applications can be rather complex depending upon the user experience. For the sake of simplicity, let’s assume a simple app that contains a single WebView and a single entry point web page—for example, index.html. An hybrid application will be visible to users like any other application on the application launcher. Once users tap on the application launch icon, the main activity will be created containing a WebView with no browser chrome visible. Upon creation, the WebView will load your default entry point web page to initiate the user experience. From that point on, the design of the web component is completely your choice, however single page applications have recently emerged as a de facto design strategy for these applications. Let’s look at this design pattern in slightly more detail.

Architecture of a Web Application

A typical web application can architecturally be represented as shown in Figure 6-1.

Figure 6-1. Web Application Architecture

The architecture is self explanatory, however, we would like to reiterate a few salient points:

• UI events generate DOM objects based on user interactions.
• The model abstracts network connectivity and storage making the controller ...