1

When designing an application I have always been shown things such as UML Class diagrams, but these seem useless if your program does not use classes. Take a JavaScript application for example. If it is purely event-driven, you listen for an event like a "click" then fire a function in response, how could you design this?

I have heard flow charts are a good option, but these don't provide a way to list all of a functions variables. Is there a standard way to design a typical event-driven JavaScript application?

2 Answers 2

3

UML is OO based modelling language, but the notation is abstract and extendible, so you can always use stereotypes to give your own semantics to standard elements. They don't even need to be "real" classes, objects, etc. in order to be modeled in UML.

For example, you can model your C-program (C is not OO) and use a class for each .h file. The stereotype of this "new" class could be "H". This gives a concrete meaning to your model.

You can model many aspects of a system, roughly divided in structure and behavior.

Structure in JS: In JS you can use classes to model JS-objects with their relevant attributs and functions. Events that are raised by an object can be modelled as a function with a stereotype "event".

Different UI-Elements could also be modelled as classes with corresponding stereotype (button, list, table, combo, whatever).

You can use UML dependencies to model dependencies between different JS-object (or namespaces if you prefer).

Behavior in JS Here you can use sequence/communication diagrams to specify different scenarios. Even an activity diagram, state diagram, etc. could be handy.

I made a simple example: http://postimg.org/image/b0ae4g2jf/

This is only one possible approach. You can think of many more, depending on your concrete focus and needs.

In summary, UML can help you A LOT, in ANY SW-development, to make your code better structured, can help you to force modules instead of using a global space in JS, can help you to think about your code before you write it. Also to document it.

Sign up to request clarification or add additional context in comments.

Comments

1

This → http://www.uml-diagrams.org/sequence-diagrams.html ← page starts with sequence diagram annotated with <<ajax>>, <<javascript>> stereotypes and a :window object so it is for sure quite normal to use UML in the context of events and JavaScripts.

Try Googling for "javascript ajax uml stereotype" and you should find some more useful tips and examples

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.