Mobile HTML5 Enterprise Application Architecture

David Pitt Architecture, HTML5, JavaScript, Mobile, Tutorial 10 Comments

Attention: The following article was published over 11 years ago, and the information provided may be aged or outdated. Please keep that in mind as you read the post.

If you’re thinking that you can prevent end-user demand for mobility, just remember this: when PCs were first introduced, IT attempted to hold them at bay. How did that work out? Mobile device proliferation is causing (some say forcing) IT departments to change. They must now support mobile devices, which further extends to IT having to develop mobile-friendly applications. Simply accessing existing corporate applications via a mobile browser just won’t fly.

Delivering a rich user interface for a mobile application can be either done natively or using HTML5 with Javascript. Native applications can provide a rich user experience, however it can be time-consuming and expensive to build native applications for multiple device operating systems. HTML5 with Javascript has opened the door for device-independent user interfaces. This means that user interfaces can be created using Javascript component libraries that render interactive user interface widgets using HTML5 elements. HTML5 has many new features that support mobility and rich user interface development. However, exploring these features is not the intent of this article. Instead, this article will concentrate on the application architecture required to develop HTML5-based applications.

Current Thin Browser Application Architecture

Consider current web-based application architectures that many enterprise have developed using the .NET and Java EE technology stacks. There are many deviations of this, but this is arguably a common architecture pattern:

6:29 thin-browser-application-architecture

This application architecture puts all elements server-side. Dynamic HTML is produced from server-side software and user interaction and dynamic user interface transition is handled in a server request/response mechanism. HTTP traffic consists of server-side generated HTML/browser elements. AJAX calls and data sources are accessed and merged into the resulting HTML tags returned to the browser for display. Lots of bandwidth is consumed with user interface HTML elements, screen refreshes and latency, hindering rich client behavior. While this may work for desktop browsers, mobile based browsers have less processing power and bandwidth, causing mobile to struggle.

Mobile Rich Client Browser-based Application Architecture

HTML5 directives and features, along with the mature Javascript libraries, allow very rich user interfaces to be defined within a browser context. Previously, plug-in technologies such as Java applets or Flash/Flex were used to deliver robust application type interfaces. Now, this can be accomplished with HTML/Javascript elements. This leads to an application architecture where the user interface elements and supporting model exists on the client (browser) and the server is responsible for headless data access for the application. This is shown in the diagram below:6.29.12 mobile-rich-client-browser-based-application-architecture

Client/Server? Not really.

If you’re thinking that we’ve just gone back in time to a client/server architecture, that’s partially true. However, the primary difference is that the application is not permanently resident on the client. The browser and web provide a standardized way to deploy applications. In the client-server days before the web, client applications were installed on the workstation and updates were performed by various non-standard means. Connectivity to data sources was configured on the workstation, increasing the support burden.

The universal adoption of web standards opens the door for rich client implementations to be introduced in a three-tier manner, but obtain the benefits of rich client/server experience.

Applications, Not Web Sites

Initially HTML and browsers were intended for website development. However it soon was modified to support user interaction, and the wide acceptance of the web made it a platform to deliver full-blown applications, not just brochure-ware. As stated earlier, browser plug-in technology (flex, applet) filled the role of rich user interface requirements, but there was always a problem with keeping plug-in versions and capabilities in sync with browser versions and features. Browser and HTML standards, as well as the optimization of Javascript interpreters are now at the point in which rich interactive applications can reside on the client.

JavaScript Application Architecture

Javascript was never really intended to be a general programming language. However, its dynamic and object oriented-nature, along with its usefulness in manipulating the HTML Document Object Model (DOM), has made it the primary way to build dynamic HTML applications. However, the language does not provide modularization constructs that available to more general purpose languages such as Java or C#. Additionally, it being a weakly typed dynamic language that allows closures and the ability to treat code blocks as datatypes provides a lot of programming flexibility. But, that can lead to unmaintainable code. Therefore, rigor must be applied to Javascript-based applications. Here’s a list of some generalized mechanisms that need to be put into place:

  • Navigation
  • Remote Data Access
  • Authentication/Authorization
  • Decouple View from Application Model (MVC pattern)
  • Modularization/Packaging
  • Dependency Management
  • Logging/Tracing
  • Exception Handling

In the Java world, frameworks exist to help support a layered application architecture. Likewise frameworks are available in the Javascript world to also help support a layered application architecture. Although not as numerous, here is a list of frameworks that we have experience with that help support architecture attributes.

Client Frameworks

  • Backbone.js – Javascript MVC/Navigation framework
  • Require.js – AMD based module organization and library dependency management
  • _Underscore.js – Provide functional programming features to Javascript
  • Jquery – Document Object Model(DOM) access and manipulation
  • Jquery Mobile – Mobile HTML5 Javascript Components

Server Side Java EE Frameworks (These could be replaced with comparable .NET frameworks)

  • khsSherpa – Remote Java Object/JSON Data Access framework
  • Spring Core – Dependency Injection
  • Spring Security – Role Based Security Framework
  • Hibernate – Object Relational Mapping Framework

Here’s a picture of the application topology:

6.29.12 html5-application-architecture

For a more in-depth look at HTML5/JavaScript Mobile Application Architecture, make sure to download Keyhole’s informational White Paper: HTML5 Application Architecture.

— David Pitt, [email protected]

0 0 votes
Article Rating
Notify of
Newest Most Voted
Inline Feedbacks
View all comments