UML Sequence Diagram to Design Web Application Use Cases

UML Sequence Diagram goes a long way in designing web applications efficiently. Since it caters to dynamic behaviour & interaction aspect of web application. And it tends to become complex since multiple layers are involved when building applications. Find below, in detail, and with an example, how this sequence diagram is so powerful in designing software applications.

Efficient Designing

The whole idea of efficient design is to prepare accurate blueprint of the solution, and detail to the point of conversion to development easily. And this should be done in shortest time, without unnecessary iterations that can lead to re-coding by developers. Furthermore, one should present the design in an effective manner as well. For this we always should use diagramming technique. As developers you would have used flowcharts or Entity-Relationship diagrams. However, these are just warm ups.

When presented, a design should invoke remarks such as “this is exactly how I perceived“, “we didn’t realize substantial percentage of the steps, but these all look important“, or “we can see the complexity now”. Of course, any errors or gaps in the requirement specification, can be rectified by working iteratively on the design with feedback from product owners. Its alright if one must tone down the complexity, and scope out some of the items or scenarios.

As a good project management practice, don’t just delete these scoped out items, but do mention under Scoped Out section, so that all stakeholders are formally aware.

Use Cases – Designing Specifications

Talking specifically, the end result of designing will be use cases with some development aspects. Use Cases are a very important artifact. Designing of specification results in use cases (along with actors). And these use cases will be inputs to designing the software application. Refer below example of uses cases from geeks articles here providing quick info for software architects. However, if you are project manager, product owner or in any role accountable to deliver application solution, you should read importance and nitty gritty on use cases from pmi (link here).

Use Case Diagram Example
Image from geeks referred article

To summarize, specification design (aka use cases) is the glue between specification & development. And interaction/behaviour/sequence design is the glue between use cases & development. Feel free to search and read further on use cases, for advanced concepts.

Sample Simplistic UML Sequence Diagram for a use case

Lets look into a single use case “Access Folders” and put in into a simplistic sequence diagram, representing the interaction between user and application alongwith sequence of steps. In below diagram, a folders area is accessed, which returns list of folders to user.

UML Sequence Diagram Example

Now, we can design it one level deeper by expanding application into UI, Backend and DB levels. Note, here we also specify the REST call from UI to Application as a GET request to resource /dms/fld/. In turn, the backend application calls DB stored procedure dms_getFId. The response flows back with Folder List and associated info.

UML Interaction Diagram between Frontend and Backend

UML Diagrams – Use Case, Sequence Diagrams etc

Lets take a pause to understand the context w.r.t designing using diagrams. UML i.e. Unified Modelling language provides a robust way to visualize design of software system/component. I would suggest to read this, if you are not aware of UML. Furthermore read on the various diagrams in UML on wiki (here). Below image lists these diagrams under UML. Each diagram has its importance.

Hierarchy of UML 2.2 Diagrams, shown as a class diagram
Image from Wiki

I generally use Component Diagram along with DB Entity Relationship and my special Sequence-cum-Activity-cum-Use Case Diagram for a fairly complex small-size application. As you grow or reduce application size and complexity, so you will require more or lesser diagrams in order to effectively design software applications.

Sample UML Sequence Diagram for a use case for multiple levels

Extension of DB Layer to API Layer

Recollect the interaction diagram between UI, Backend Application and DB/REST. The DB / REST API can be detailed as well by including it as another layer. And here you can specify high level psuedo code or other details related to API. With this you can include some technical specification in design.

Moving ahead from the simplistic design, lets add Browser or UI Cache. A sophisticated app will utilize Cache to store user details and App specific data that is usually constant over long periods. An important thing when designing Caching is to set expiration logic and how to refresh the cache.

UML Sequence Diagram of Browser Cache
UML Sequence Diagram of Server Cache

Similar to Browser Cache, a sophisticated app will also use Server Cache, which avoids DB / REST Calls. And it stores data across users, and sometimes across tenants. Note how additional logic is written in brackets, providing another level or dimension in designing.

Here is the end to end design for one use case. Now see how all levels make sense. And how easy it makes to identify any gaps and issues. It is a diagram as well has lot of textual info to make it more meaningful design, which is easy to start development on.

UML Sequence Diagram - holistic example

As a final note, lets see a more complicate use case where there’s lot of action and interaction on UI by the actor.

Imagine the complete flow for such scenario and how useful it would be to see end to end flow, with all the invocations, their responses and implementation notes.

UI Interaction Diagram - complex use case

I will try to come up with another post on diagram which is very useful for designing & communicating to stakeholders. You can see all diagrams related post here.


2 Responses

  1. sikis izle says:

    Good reading material with a good layout. Your site lives up to the numerous encouraging comments it will be getting. Starr Vincent Abbot

  2. movie online says:

    Very informative blog article. Much thanks again. Fantastic. Elene Filippo Pascasia

Leave a Reply