Category - Software & Technology

As I watch the mobile software market explode I can’t help but notice a pattern that keeps repeating itself. Like software architecture design patterns, software packages follow distinct patterns that have been repeating over the past 20-30 years.

While there is a lot of history before this point, let’s start at mainframes and terminals. See a pattern here?

• Remote – Terminal / Mainframe
  During this phase of our history one could sit down at a dumb terminal that had a direct connection to the mainframe. This would provide remote access to the functionality on the server but wouldn’t provide much other functionality.
• Local – Thick client apps
  Next came thick client apps. That is, applications that are physically installed on a computer. This typically moved a lot of the processing off the central system and onto a stand alone computer. A good example of this is word processing.
• Remote/Local – Distributed thick client apps
  Once thick clients were widespread the software industry quickly realized they had a problem. They needed easy ways to update their thick client applications but also needed to be able to gather and aggregate data across all of the installations. The resulting evolution was a set of applications that could communicate with a central server as well as install updates as necessary, all without needing a technician physically present.
• Remote – Web based apps
  The software industry quickly realized that the bulk of the functionality that they were installing on people’s computers could easily be handled via the internet, given the advance of software and networking technologies. Thus, the web based app was born. These apps provide 90% of what most users need without the overhead of distributing, installing, and supporting thick client software. Note, however that specific app needs still have to be addressed with this clients, even in this evolution, 3D rendering being a good example.
• Local – Thick client mobile apps
  As the mobile world started to mature we found that the hardware in our mobile devices was becoming much more powerful and capable of handling apps. At this time the browser capabilities of these devices as well as the ability to have fast mobile networking was sufficiently infantile that once again we found ourselves utilizing thick client apps as the best way to deliver functionality.
• Remote/Local – Distributed thick client mobile apps
  Once again, technology advances delivered us better mobile browsers and a newfound ability to handle much faster networking on mobile devices, giving birth to the distributed thick client apps for mobile devices. These apps, in many regards, follow the same basic principles as the distributed thick clients of the PC era. They are installed but can update themselves and communicate with a remote server or servers.
• Remote – Mobile responsive apps
  This phase of our evolution is unfolding now and is really just starting to gain traction. Over the next year this will become the de facto way that the majority of companies get their data into a mobile device. The responsive layouts concept is a way of designing a web site/application in a such a way that it understands what kind of device (PC, phone, tablet, etc.) it is being displayed on and applies the correct styling for that type device. Bank of America has a pretty good example of this. If you visit their mobile site you are seeing the same basic content you would on their primary site, however it has been styled so that it works well and is easy to use on your mobile device.

Predicting what comes next in this evolution isn’t exact but also isn’t particularly difficult. We’ll likely see bridges to cross some of the major gaps that currently tie us to mobile devices, such as:

• Browser support for mobile features
  Mobile browsers will likely continue to begin supporting, or at least provide an API for supporting, multiple features that are device specific, such as GPS or the accelerometer. Likewise, mobile operating systems will continue to evolve in such a way that allows the browser to more easily interact with the mobile system.
• Generic push notification capabilities
  One of the major limitations today that cause companies to gravitate towards thick client mobile apps are push notifications. If I want to be able to notify a user of a particular event the only way to do so today is to utilize the push API for a particular device. My hope is that this functionality will become standardized in such a way that notifications can be sent to a central location (albeit, possibly different device dependent locations) that knows how to notify the device in a manner suitable to that device.For example, my web application may trigger an event that then notifies the Apple servers of the event and provides a unique key that was authorized by and identifies the device. The Apple servers would then know how to send the notification to that device based on the unique id. Users would be able to easily control who does and doesn’t have access to push to them in the same manner they do today, only the system would be distributed.

Until these changes take place there will always be a need for a thick client mobile app in certain situations. Just don’t write a custom thick client app for a mobile device unless you actually need the features that are offered by the mobile device you are writing for. If you just want an app for the sake of having an app, spend your money having a good designer build a mobile responsive layout for your site. However, if you actually need things like GPS, accelerometer, notifications, or other device specific features, you really don’t have much choice, in present day, but to write a thick client mobile app. In this situation you should still follow the web based paradigm as much as possible and keep as much content web based as you can.

I have a need for a web based drawing tool, much like Microsoft Paint – just a simple canvas that allows me to draw on it. I’ve searched around a bit and have found that the majority of the tools are Flash based and the ones that are not are lacking in one way or another.

So I decided to create a simple, purely web based drawing tool. This works in all browsers and even works on my iPad (although I have to click each square to form the drawing on the iPad since dragging simply moves the screen). The canvas, with a drawing, is shown in Figure 1.

It uses some simple JavaScript and CSS to achieve the effect. The grid lines, border, and cell size are all controlled by CSS. Just click or click and drag to draw. Do the same while holding down the SHIFT key to erase (draw in alternate color). I chose to use the SHIFT key combination for color 2 to avoid conflict with context menus when right clicking and OS specific uses for ALT and CTRL.

Figure 1: Picture of a drawing done on “Canvas” (demo link below).

Everything is encapsulated inside the Canvas object, so it is really easy to use. All you need is a DIV, a little bit of CSS, and the couple lines of JavaScript below.

Here’s how to use it:

// Creates the canvas - just make sure you have a DIV with an id of "drawingArea"
// The last parameter of false allows editing - set to true for read only
// Note that these are squares - actual square size is set via CSS
var myCanvas = new Canvas("drawingArea", 60, 40, false);

// This will change the drawing colors
myCanvas.setFillColor("#CCCCCC"); // #000 by default
myCanvas.setEraseColor("#555555"); // #FFF by default

// This will resize the canvas, preserving what portions of the drawing it can
myCanvas.resize(100, 10); // 100 wide by 10 high

// This will save the contents of the canvas down to a JSON string
var myData = myCanvas.save();

// This will load a drawing from a JSON string
myCanvas.load(myData);

You can view a working demo here.

You can find the JS file here:
http://www.mcdonaldland.info/files/canvas/canvas.js

Note that you’ll also need the JSON2 JS file as well:
http://www.mcdonaldland.info/files/canvas/json2.js

An improvement idea:
When mouse moves fast, lines have gaps in them. It would be pretty easy to write an algorithm that figures out empty squares between two points and fills them in. Alternatively, it wouldn’t be too difficult to handle this without tables by tracking the mouse location within the DIV then drawing points/lines.

Feel free to use this as you see fit. I just ask that you:

1. Leave the copyright information at the top of the JS file in place.
2. Don’t sell the code or any product that has this code as the core feature without my consent.

Enjoy!

I searched the web for quite a while and couldn’t find a good answer to this problem, so I figured I’d post it to save the next person a little time.

I have a situation where I want to send an event to an instance of a JavaScript object. I could get it to go to the object itself, but was having trouble getting it to apply to only a specific instance of the object.

The answer was surprisingly simple – just wrap the pointer to your event handler function in an anonymous function. Doing this gives the anonymous function (closure) access to the variables currently in scope, which means that I have access to my object instance now.

The code is below. The commented out event listener add lines were the original attempt that would result in “undefined” being printed to the screen instead of my instance variable value. The uncommented version correctly calls my instance, which prints “test” to the debug area of the screen each time it is clicked.

// The object to handle the event...
function TestListenerObj(txt) {
    this.eventText = txt;
    this.handleEvent = function() {
        var debug = document.getElementById("debug");
        debug.innerHTML = debug.innerHTML + this.eventText + "<br/>";
        return false;
    }
}

// Sets up the event handler
function init() {
    var link = document.getElementById("test_link");
    var obj = new TestListenerObj("test");

    if (link.addEventListener) {
        // link.addEventListener("click", obj.handleEvent, false); // Calls "class" level handleEvent()
        link.addEventListener("click", function() { obj.handleEvent(); }, false); // Calls instance level handleEvent()
    } else {
        // link.attachEvent("onclick", obj.handleEvent ); // Calls "class" level handleEvent()
        link.attachEvent("onclick", function() { obj.handleEvent(); }); // Calls instance level handleEvent()
    }
}

For a working example go here. For complete source visit this link and view source. Just click the “Test” link on the example to see the event be handled by the object, which in this case just prints to the debug area.