Remember me

Register  |   Lost password?

The Trading Mesh

HTML5 Series- Part 2: How HTML5 Aids Mobile Financial App Development

Tue, 27 Mar 2012 12:22:27 GMT           

This is our second post in the HTML5 series. There are number of new tags in HTML5 that aid in the development of mobile financial apps. In this post, I aim to explain these new HTML5 tags and how they facilitate the building of fully functional financial apps with native user experience.

We partnered with our friends at OpenFin, to develop a HTML5-based mobile app. They developed a HTML5-based financial app (PNL tool) for the iPad. The app gets updated every five minutes and provides quotes for securities across multiple asset classes (stock, bonds, options and futures). The app was developed in 2 weeks flat.  As they say, seeing is believing. To get a feel of how powerful HTML5 apps can be, download the app for free on your iPad.

The installation instructions and the download link for the HTML5 app are given below:

  1. On your iPad, visit: https://pnlhd.openf.​in/app/pnlhd.html.
  2. Tap on the install button.
  3. Follow the 3-step instructions to install the mobile app.

In my last post, I outlined why HTML5 is a good platform for developing mobile financial apps. The key advantages that HTML5 provides are summarized below:

  1. HTML5-based financial apps work cross-platform and a single mobile app lets you support clients across all mobile platforms (you might need to optimize the mobile app to counter differences like screen sizes on different devices).
  2. HTML5-based financial apps let you take control of mobile app support, enhancing reliability, as you don’t have to depend on the platform provider (Apple store) for support.
  3. HTML5 mobile apps provide a very strong visualization interface that supports native user experience, making financial data far more intuitive.
  4. HTML5 mobile apps can be instantly deployed and updated in real-time, allowing you to constantly add new features and differentiate from competitors.
  5. HTML5 mobile apps are just as powerful as native apps, providing optimal performance required for financial apps.
  6. HTML5-based financial apps are secure, if HTML5 specifications are used in conjunction with security best practices.

HTML5 Tags & How They Aid Financial App Development

This section explains the HTML5 features we used, how they were used and the advantages they provide.

HTML5, not HTML:

The first step is to inform the mobile browser that the financial app is HTML5-based, and not HTML-based. The way to do this is to include the HTML5 doctype.

The valid doctype for HTML5 is <!doctype HTML>

<!DOCTYPE html>
<meta charset=”UTF-8”/>
<title>PNL HD Financial-App</title>

Unlocking storage

One of the biggest hurdles developers of financial apps face, is the limited storage space available for mobile apps. Financial apps need to store data for a multitude of reasons such as updating security quotes and news. It is often inefficient to store such data on a server.  Fortunately, the HTML5 specifications contain a standard for local storage which is supported by browsers on all mobile platforms.
There are two types of storage available for the client code in HTML5, local storage and the SQL database:

  1. Local Storage:

    Local storage is a simple key-value store that supports only strings as both keys and values. Local storage can be manipulated using two basic operations, set and get, as shown below:

    //To save an item into local storage
    localStorage.setItem(key, value);

    //To get an item from local storage
    value = localStorage.getItem(key);

    In our financial app, we used this to store application installation keys, session information and user preferences. It is limited in size to 5mb on iOS.

  2. SQL Storage:

    SQL storage is a light SQL database. It generally occupies 5Mb, but subject to user permissions, it can occupy up to 50Mb. We used this database to cache app data, dynamic image assets, and user preferences. It supports all of the CRUD operations.

Making the application work offline

For financial apps, functionality gets reduced if the user does not have a constant connection to the Internet. However, applications should not fail completely because the user is not connected to the Internet. Imagine financial apps not displaying your portfolio, just because the mobile app is offline.

The manifest enables financial apps to work in offline mode. It is very easy to use but you must make sure all static assets are listed in your app.manifest file and that the manifest is referenced in your .html file before the tag:

<html manifest=”pnlhd/pnlhd.manifest”>
The assets listed in the manifest file must not exceed 5Mb in total.

There’s another advantage to this, and that is speed. As financial apps have to be functional even offline, the HTML, JavaScript and CSS are all cached. This ensures that the mobile app is as fast and powerful as a native app.

Using the canvas tag

Canvas is a very simple pixel-based drawing API, but if used the right way it provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs or other visual images on the fly.

To use the canvas tag, you’ll need two things:

  1. A Canvas tag in the HTML to place the drawing canvas
    <canvas id=”IntradayChart” width=”200″ height=”200″>
    </canvas>JavaScript to do the drawing
  2. <var drawingCanvas = document.getElementById(‘IntradayChart’);
    // Checking that element is in the DOM and that the browser supports canvas
    if(drawingCanvas.getContext) {
    // Initialize a 2-dimensional drawing context
    var context = drawingCanvas.getContext(’2d’);
    //Canvas commands go here

In the mobile app we developed, we needed to manipulate existing images (which were returned as a result of the web service calls). External images can be loaded using the drawImage method.

context.drawImage(imgObj, XPos, YPos, Width, Height);

After the image has been loaded, you can make manipulations like pixel manipulation and drawing text to the canvas, all of which make rendering of financial data more intuitive.

Making Financial Apps secure

Security is one of the top concerns that crops up when people think of HTML5 mobile apps. Below are the major security threats that HTML5-based financial apps face and best practices to counter these threats.

  1. General Considerations:

Financial apps that are HTML5 standards compliant benefit from full browser security and sandbox.Therefore, they have limited and controlled access to local resources including other apps that are running on the same device. These limitations are valuable because it gives users the comfort that developers don’t have access to any of the proprietary information that resides on their device.

  1. Malicious Code:

JSON (JavaScript Object Notation) is the preferred data transport in HTML5-based mobile apps because it is fast and very easy to use. Unfortunately, JSON also exposes you to running malicious code if the code somehow makes it into the data you are handling. It is critical to scrub all data that passes through an application and remove any code.

  1. Cross Site Scripting (XSS):

Cross-Site Scripting is a danger for all mobile apps. XSS allows attackers to inject malicious code into client-side scripts. To eliminate this threat, you should limit the locations from which the financial app downloads content, and treat all incoming data as potentially malicious code.

  1. Local Storage:

Threats related to use of the HTML5 local storage and database can be mitigated by encrypting the local database. In financial apps, all the data stored in the Local Storage and Database should be encrypted using an encryption library. Also, threats related to exploitation of the manifest file should be eliminated by using HTTPS.

I hope that the HTML5 blog series was able to convince you that HTML5 is a viable platform for quickly and efficiently developing financial apps. Please feel free to comment, I would love to hear you views on the same.


, , , , , , , , , , , , , ,