I wrote some code in javascript regarding a canvas object and used Javascript/jQuery. Now I want to draw a sequence diagram but I don't know where to start or what to do. E.g. there are object:classes in the diagram but I don't know what objects I shall use?!
1 Answer
This is a subtle question: it all depends on what you wish to model. JavaScript and UML are average companions because Javascript is not like traditional oriented languages as it is prototype-based. Such a programming technique is more appropriated for dynamic languages as it focuses more on objects than on classes. A class is a structure, more appropriate for static programming languages. In a purely structural diagram such as a class diagram, a Javascript program would be very challenging to model.
However, a sequence diagram is mainly behavioral with a few structural features. But identifying correctly an object creation can be quite challenging as there are multiple ways to do that. Javascript objects are not equals in quality. Most objects only contain values: these have few interest in a sequence diagram as their interactions are limited to read/write operations.
Timelines: objects identification
If you wish to create a sequence diagram, I guess you have quite rich objects with methods. In such a case, the creation syntax is easier to identify. Multiple documents detailing the basics of Javascript object creation are available. Here is one that could help you (sorry if you are already a Javascript expert).
Messages: method calls
Each object created should have its own timeline. Each method call is a message addressed to the object timeline. The subtle point is about identifying the other object making the call (and the original message timeline).
Finally, choosing the scope of your diagram is an important step. Depending on the complexity of your program and what you wish to focus on, representing all Javascript objects involved in the canvas manipulation is perhaps not relevant.
Comments
