Developing mobile Web AJAX Applications

Despite the popularity of the media, the development of mobile device applications has been a high input, low return of work for many years. The latest generation of smartphones based on the IPhone OS and Google Android offers a simpler application development approach: Web apps. This one-compile method can support all devices to reduce development costs. More importantly, all of these high-end devices have hyper-modern browsers that support advanced HTML, JavaScript, and CSS. In this article, we will learn how to develop the extensive use of asynchronous JavaScript and XML (Ajax) technology to take full advantage of modern smartphone capabilities. We will not only learn how to make the most of these devices, but also learn how to deal with the nuances between them.

Begin

This article explains how to develop a mobile WEB application that runs on the Apple IPhone and on Android based smartphones. To develop mobile WEB applications on these devices, we cannot use the usual desktop browsers, or at least use only desktop browsers. We also need simulators or actual equipment. For the iphone, we need to use the iphone simulator. It's part of the IPhone SDK. This article is using the IPhone SDK 3.1. Similarly, we also need to use the Android SDK. It contains an Android Virtual Device manager, which can be used to create Android simulators that run each Android version of the device. This article uses the Android SDK 2.1. Most of the code used in this article is JavaScript code, as well as some HTML and CSS. In addition, the application has a server side that uses Java™ implementations. This is not mandatory, as with other WEB applications, we can choose to use any server-side technology on our own. We need to use the Java 1.6来 to run the application developed in this article. We also need to use Jersey, which is the Jax-rs reference implementation and all relevant Java Archive (JAR) files.

Mobile browser and WebKit

Mobile devices have a Web browser for many years. However, because WEB developers have to deal with cross-browser support issues, it is always difficult to develop browser applications. Developers need to spend a lot of time implementing HTML, JavaScript, and CSS to run exactly the same on different versions of browsers, such as Internet Explorer, Mozilla Firefox, Safari, and so on. The problem with desktop browsers is almost the same as in the mobile browser. Different versions of mobile browsers are amazing. Each device manufacturer has its own browser, and even devices from the same manufacturer differ greatly in terms of operating system, screen size, and so on. Some browsers only support WAP, while others support partial HTML, while some have full support for HTML but do not support JavaScript.

Fortunately, the situation is very different now. By January 2010, more than 80% of the mobile Internet traffic in the United States was generated by iphones or Android phones. Not only do both operating systems use WebKit for html/css rendering, but they are equally active in using the JavaScript engine used by the HTML 5 standard. That's right. Mainstream browsers in the Mobile world are now using open standards. This is the best time for WEB developers to meet.

There is still a difference between browsers, even for different versions of the IPhone and Android. Android browsers have the biggest difference. Android browsers used proprietary Google Gears technology on Android, the previous version of 2.0. Although Gears has many excellent innovative technologies, it is now included in the HTML 5 standard. However, this means that for a long time, Android browsers do not support some of these HTML 5 standards, but we can still use Gears to implement a subset of the functionality. All of the code in this article is based on the HTML 5 standard and can be run normally on the Android 2.0+ or IPhone 3.0+. Now that we have these modern WebKit browsers, let's take a look at some of the Ajax on these devices.

Ajax on a mobile browser

Like desktop Web Apps, the key to creating compelling user experiences on mobile Web applications is often using Ajax. Of course, the user experience is not the only reason to use Ajax, but it may also involve speed and efficiency reasons. The latter is precisely the more important reason for using Ajax on mobile Web applications, because the latency of mobile networks is greater, and the browser itself is limited by processor speed, memory, and cache size. Thankfully, Ajax is just one of many things that makes it easier to focus on standards-based browsers. Before we discuss this in detail, let's take a quick look at the backend servers used by the applications developed in this article.

Before we start, we need to download the necessary JAR files, including the Jersey, Xerces, Rome, and Google App Engine SDK. Then install them in the following folder: Webkitblog>war>web-inf>lib. We can download the other source code for the application from here.

WebKit Blog

The mobile Web application of this paper is a simple application of reading mobile Web development News. Although it is currently simply crawling RSS feeds from the official WebKit blog, it can be easily modified to collect multiple RSS feeds. This application is an ordinary Java WEB application that can be deployed to any Java application server. All code is shown in Listing 1.

Listing 1. Feed class

@Path ("/feed")
public class Feed {
String Surfinsafari = "http://webkit.org/blog/feed/";

@GET @Produces ("Application/json")
Public News getnews (@DefaultValue ("0") @QueryParam (' after ') long after) 　　　
throws exception{
url feedurl = new URL (surfinsafari);
Syndfeedinput input = new Syndfeedinput ();
Syndfeed feed = input.build (new XmlReader (Feedurl));
list<item> entries = new arraylist<item> (Feed.getentries (). Size ()); 　　　　　　
for (Object obj:feed.getEntries ()) {
Syndentry entry = (syndentry) obj;
if (Entry.getpublisheddate (). GetTime () > after) {
Item item = new Item (Entry.gettitle (), Entry.getlink (),
Entry.getdescription (). GetValue (),
Entry.getpublisheddate (). GetTime ());
Entries.Add (item); 　　
}
}
return new News (Feed.gettitle (), entries);
}
}