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:
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:
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:
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]