modelling javascript
One of the things I like to do before embarking on any large scale development work, is to draw out all the packages, classes, singletons/ objects I will be creating: i.e. modelling my code using UML.
From most of what I’ve seen in the development world, it’s becoming somewhat of a lost art. I feel this is a shame as I have found modelling applications or frameworks I’ve worked on not only gives me a great overall picture of what it is I am building, it also helps me speed up my overall development time by cutting down the time I spend creating most of the common skeleton code, very early on in the development cycle.
where/ how to start?
My main aim is not to list every single property and method — be they private, protected or public — that will be present in the API up front. I simply want to see a basic outline of what it is I will be building.
The benefits of this allow me to see relationships between components and which components should be grouped into packages together.
Whats important to remember is that these relationships are not set in stone. Things can and will change. We want a general outline to be able to start visualising what we are building. For example, this is a sample from some of my first run through designing the thud framework:
From this point I can start creating the directories and files that match whats present in my diagram. Packages become directories, the rest become files. I’m not concerned about how many files are present at this stage as I will be merging most of these into singular files later. For now, I want to keep things as modular as I can, to make it easy to find functionality and fix errors, etc.
Getting more specific
Once I’ve done this, I’m able to get started on the particulars of each each package and its components. Here is my first run through the thud.base and thud.lang packages:
From this point I can start creating the skeleton of each component, for each file, in each package/ directory.
A good sizeable portion of my development work is now done. It’s simply a matter of filling in the empty functions with code and assigning the correct values to each property. A great part of this is that I can cut out a lot of the laborious work very early on and save time by copying and pasting a lot of the common skeleton code!
Another benefit is, as I am writing unit tests for a specific component which relies on incomplete functionality, I can simply have that empty function return a valid value to satisfy the test for now.
Of course I made changes to the code, some components got moved to different packages as I realised I needed specific functionality to be available earlier on; I changed the names of some functions to make them easier to understand; and, I’ve added in private functions that are only required by specific components and not exposed in the public API.
However, I’m not hung up on keeping my diagrams up to date, they were simply a starting point to get an overall picture of what it is I am building. :^)
so, what UML tools are available?
There are a range of UML tools available to developers. Most of the halfway descent looking ones are only available for the Windows operating system, and most of the Java based cross-platform ones, frankly, suck.
paid tools
As far as paid UML tools go, I’ve used Altova UModel before and I found it to be fairly good for modelling JavaScript. There re only two problems. The first is, I bought a license and used it one company on the computer they provided for me. I uninstalled it from that computer when my contract ended, when I tried to install it on my home computer, I was informed that the license was already in use, £90 down the drain. The second problem is it’s only available on windows and I made the mistake of buying a mac two years ago.
free tools
As far as free tools go, I’ve haven’t found any that are easy to use and have enough features/ functionality to allow me to model JavaScript instead of Java.
online tools
There are also two online tools that I’ve found, both are flash based. The first is gModeler. gModeler is a free, very simple tool, you can create packages, classes and notes. You to save your diagrams for later, however, it can become somewhat frustrating to use the bigger your diagram gets.
The second is a called gliffy. Gliffy is a more complete diagraming tool, it comes with a free version which allows you to save 3 diagrams and a premium account, which I couldn’t find a price for.
I used gliffy to create my diagrams for thud, it can also become a bit frustrating, I lost one diagram and had to recreate it from scratch, but on the whole isn’t a bad tool to get you started.
In summary, I would recommend modelling your application/ framework to any developer. It not only allows you to gain an over all picture of what it is you’re building, it’s a great way to communicate the scope of your work to other team mates and your project manager, and in the long run can speed up your development time, by doing a lot of your planning and laborious development up front.
