Doodle, A demo drawing program

Events
- JupiterEvents
- internet.com/webcasts
Jobs
Partners
Solutions
- eBooks
- Video
Shop

Doodle, A Demo Drawing Program - Part 1

Introduction

Look around the Web and you'ill find a bustling menagerie of online applications providing services such as shops, calculators, e-mail, maps, games and more. Recently, some of the big Web players have even started working to provide online office suites; Google for instance has already made some inroads in this direction with a JavaScript spreadsheet aplication and its recent purchase of Writeley, a word processing program.

From my perspective as an I.T. developer, what's immediately noticble in many of these Web sites is a complete lack of structure regarding the JavaScript code running on each page. Conspicuous in its absense is the use of JavaScript's object oriented capabilities, functions are loosely tied together working on global variables without any attempt to namespace or organize them into classes. In many ways the applications on the Web today resembles the wild west with prospectors staking out claims to their piece of Internet turf. In my experience, however, the sphagetti coding that pervades many of these new applications has only one consequence; difficult to understand applications of limited complexity and sophistication.

For the past year I have been working with Adaptix Technologies on the development of www.preezo.net, an online slide-presentation application. From the outset, we intended to buck the trend in JavaScript applications and use solid software design practices, many of them borrowed from experience working with Windows applications. In this article and the ones that follow I will demonstrate some of the techniques adopted while working on this application by developing a Web based drawing package (I've called it "Doodle" so as not to confuse it with another well known demonstration drawing applications).

Where To Start?

There are numerous ways to begin developing a new application. Some favor the rigorous approach centered around the use of sophisticated software design tools (or pen and paper for the old fashioned).

In contrast is an exploratory approach where components are coded and experimented with to see how they can work together. The overall design of the application is evolutionary in nature and generally is secondary to the user interface and look and feel. The main advantage of this approach is speed. Prototypes can be thrown together, tested and even released to the public for alpha testing in very short time frames. In the current atmosphere of rapid application deployment this can mean the difference between success or failure.

I would like to strees that my aim in these articles is not to push any one particular design-process over another, but to promote the use of object oriented techniques and demonstrate how a structured application design can help build complex yet robust Web applications.

For the purposes of this article I will start with the canvas, the most central visible part of any drawing page.

The job of the canvas is to display the user's drawing and to accept the users input to allow the user to manipulate and add to the drawing.

A simple input device.

Click and drag the mouse over the 'canvas' on the left to sketch a simple drawing