Developing a cross-platform application for mobiles and desktops with Aerogear

is a collection of examples, tutorials and best practices to develop mobile clients integrated with JBoss middleware. It aims at providing solutions for mobile clients to deal with typical requirements in enterprise applications, such as security and availability. Such mobile applications range from native clients (e.g. Android, iOS) via hybrid apps (with native and web components) to pure web apps (providing the highest portability but generally being less adapted to the target environment). In this post, we focus on a web-based mobile client and demonstrate how to develop a simple blog application where users can create and comment on blog posts.

Scope of the demo and relation to Aerogear

Mobile-Blog is a cross platform application which allows users to write and comment on blog posts. The client is written in HTML5 and JavaScript while the server application runs on JBoss AS7. The application demonstrates the following concepts:

  • client-server communication using Ajax calls over a REST API via JSON
  • automated execution of tests during the Maven build process, including Needle and Arquillian tests on the server and Jasmine tests for the client JavaScript
  • modularization of client-side JavaScript
  • simple device detection to differentiate between mobile and desktop clients
  • separate frontends for mobile and desktop clients
  • server deployment to the cloud using Redhat’s Openshift platform

The application is to be seen as a representative for more complex mobile applications. As such, modularization and testing is a concern of particular importance. While it would have been possible to write one JavaScript file for the client part of this application, larger projects quickly become difficult to maintain. The integration of all types of tests into the build process is a necessity to test the application in continuous integration environments.

Overview of the application

The initial screens of the desktop and welcome screen of both layouts can be seen here:

The mobile-blog-web application consists of two different layouts: A mobile interface for small touch displays and a desktop interface for mouse-based interaction and big resolutions. We did not follow the common approach of handling different layouts ad-hoc in the respective HTML and JavaScript files. Instead we use two separate layouts. Why? While CSS and JavaScript allow for mighty adaptions of UIs based on device detection, it is important to note that desktop and mobile interfaces are very different. Mobile interaction is based on touch and swipe events while a desktop interface is commonly used via mouse and keyboard. Moreover, the reduced screen size on mobiles will lead either to omission of information and functionality presented on desktop interfaces or to distribution of content from one desktop page across several mobile screens. While adaption of a desktop interface to mobile can still make sense, a distinct mobile interface offers higher adaption with the possibility of an app-like appearance, at the cost of increased effort.

The application consists of multiple Maven modules:

  • mobile-blog-ejb: The data access module, contains DAO beans for database operations
  • mobile-blog-jpa: The model package containing JPA/JSON annotated entities
  • mobile-blog-rest: The service package, contains REST annotated services
  • mobile-blog-web: The client package, contains the HTML/JavaScript files and generates the WAR file

The code for this application ist on Github. After cloning, just build it with

mvn install

as usual. After the build is complete, the web-archive under mobile-blog-web/target is ready to be deployed to the application server.

Client

Native apps usually offer the best performance and user experience. They integrate well within the target environment and share the platform look&feel the user is familiar with. Web-based apps on the other hand offer the possibility to reuse it on multiple platforms, iOS and Android in particular.

This example goes for the web-based approach, where we face the situation of having a huge variety of frameworks to choose from. Well-known candidates are JQuery Mobile and Sencha Touch. The former still suffers performance problems on Android (which is a big factor considering that we should aim for at least iOS and Android), while the latter requires a commercial license to be used for closed-source applications (which is free in most cases, but nonetheless a factor to consider). In this example, we rely on the Jo framework to define the UI and on zepto.js as a lightweight jQuery alternative.

The JavaScript code is divided between a frontend part (which is further divided into mobile/desktop) and the backend (which is used by both mobile and desktop layouts). Each screen in the application is composed of Jo widgets and stored in a separate JavaScript file. Here is the code of the list of blog posts shown in the screenshot above.

[sourcecode language=”JavaScript”]
var init = function() {
view = new joCard([
new joTitle(“Blog Post Demo”),
new joGroup(
new joFlexcol([
new joButton(‘Add Post’).selectEvent.subscribe(
onAddPostClicked),
new joDivider(),
new joHTML(“

")
         ])
      )
   ]);
};
[/sourcecode]

The layout is written in JavaScript and not HTML5. Events like onAddPostClicked bound to the widgets call the backend which sends out Ajax calls to the server. The JSON response is inserted into UI templates with utility methods provided by the Underscore.js library.

To test JavaScript functionality we use Jasmine, a behaviour-driven test and mocking framework. Tests written with Jasmine can be integrated into the Maven build process with the jasmine-maven-plugin. A typical test would be to check if the list of blog entries is properly updated after receiving a response to an Ajax call:

[sourcecode language="JavaScript"]
it("updates a given node with the list of blog entries", function() {
   spyOn($, "ajax").andCallFake(function(params) {
      params.success(responseMock);
   });
   var node = $('

One thought on “Developing a cross-platform application for mobiles and desktops with Aerogear

  1. Since his “jobs czar” praised Germany for the actuality that “government and organization [do the job] as a pack.
    In 1907, James Murray Spangler, built a vacuum cleaner with baggage to seize grime and
    debris, boosting kitchen area layout. A single of the fancy important things to
    do with modest microwave is reheating espresso without mess at
    a ideal temperature.

Comments are closed.