Design Models

• The design phase of software development, transforming the cust01ner requirements as

described in the SRS documents into design forms.
• Designing a model is an important phase and is a multi-process that represent the data
structure, program structure, interface characteristic and procedural details.
0

► There are four types of design elements/ models

l. Data Design Element / Model
2. User Interface Design Ele1nent / Model
3. Architectural Design Element / Model
4. Component Level Design Element / Model
 Component Level Design Model
► What is Component?
• A component 1s a modular, portable, replaceable and reusable set of well-defined
functionalities. 0
...
... --
~ ••
, _,_

,,..
' -~

··- -)
..,,_
---
U..._..lw

......
.... .
► What is Component Level Design? ~ .;..,--i!
...
~·- -·
·•p,tltlof•

• The component-based architecture focuses on breaking the software design into small
individual modules.
• The component design describes communication, interfaces, algorithms & functionalities of
each component regarding the whole software design.
• Co1nponent Level Design notations are Activity Diagram, Data Flow Diagra1n, Conditional
Notations & Tabular forms.
 Benefits of Component Design
1. The major benefit of using the Component design is that it makes every module reusable.
0
2. It also .reduces the cost as every module is reusable.

3. It is more reliable as the client gets its interaction with the system with each module, so it
increases the reliability of the entire system.

4. The component design makes the system easy to maintain as we don't need to make
changes in the entire system.

5. The component design describes each component's functionality more clearly.

 Steps of Component Level Design
1. Identify all design classes that corresponds to problem domain.
O
2. Identify all design classes that corresponds to infrastructure domain. Ex. GUI Class,
Database management class, OS Communication class etc.
3. Elaborate all design classes that are not acquired as reusable component. Ex. Coupling &
Cohesion methods like 1nessage details between classes, data type, data structure & data
flow between classes.
4. Describe persistent data source & identify classes require to manage them. Ex. Classes
which data from databases.
5. Develop behavioral representation for a co1nponent & class. Ex. Classes, Operations &
there Interactions through Activity & State diagram.
6. Elaborate deployment diagra1n. Ex. Hardware, OS, Server of components.
7. Factors every component level design representations. Ex. Diff. design solutions that
provide good characteristics. ~
 Component Design Example
• It has Account, Customer, Order & Product this Four Components.
• Every object is an individual component but is related to each other at the same time.

l. Customer will go online site and search product.

2. By selecting product, the customer will place an order.
~Dallll
············l>
3. System will store customer & his account information
in Order Database. -
4. The order would be generated against the customer -Codi

and stored in the Database.

 Component Design View
1. Object Oriented View:
• An object-oriented view is a set of collaborating + id: int
+ name: string

classes in module mentioned in architectural design

• It view all the objects, methods, properties and
functionalities mentioned in classes.
0
/
Salaryl!mployee
om.ends

+ calculate_payroll(l: numbar
' extend~

HourlyEmployee

+ ealeulate_payrOII(): number
• It also view how classes in each module are
connected with each other.
t -
extends
;;nplements
··.
imple,=nts

• It detailed out data structure & algorithms required

for processing.
l
ComminionEmployee
<<Int.rt.~»
lhyrol1Celcul1tor
_____ implements- _-{> + id: int .
+ calculale_payroll(): number +n_a_me _ _ _ _~
_: 5_1""9
+ ~ate_payroll(): number
 Component Design View
2. Conventional View:
• It is viewed functional element of a program that integrates the all logical & internal
operations performed in class.
• It also view calling and coordinating the request like calling functions, parameter passing,
data passing between the of other modules. o

• They analyze complete view of data flow model & state diagram.

3. Process-related View:
• The process-related view majorly focuses on the reusability feature of the component design.
• Databases and libraries are used to store pre-existed 1nodules.
• This pre-existed data used for creating new modules.
 Component Level Design Guidelines
1. Components: 0

• Naming conventions should be established for components that are specified as part of the
architectural model which is understandable to all stakeholders. Ex. Calculator
• Use Infrastructure component name that mentioned implementation details. Ex. Stack

2. Interface:
• Recognizes and discover these independent entities as new components.
• Interfaces provide important information about communication and collaboration.

3. Dependencies and Inheritance:

• Models any dependencies from left to right and Inheritance from top (base class) to bottom ( derived
classes).
• Used complete concept of Coupling & Cohesion of system.
eA$j
 Component Level Design for WebApps
► What is Web Apps Component?
• A well-defined cohesive function that provides data processing for an end user
• A cohesive package of content and functionality that provides the end user with some
required capability.
• Web applications include online fonns, shopping carts, word processors, spreadsheets, video
and photo editing, file conversion, file scanning & emails such as Gmail, Yahoo etc.

► Component-level design for WebApps often incorporates elements of

l. Content design '""
"...,..
--==i mrr

2. Functional design. ~ I___ I ~ 0

3. Deployment design L.:=:_J ·-~ 1ml-.OOCS

I-~,
IDQln ~
I
! = I ~ ~
 Component Level Design for WebApps
1. Content Design at Component Level:
• It focus on objects & there collaboration in packaged for presentation to a WebApp end user.
• It should be tuned to the characteristics of the WebApp to be built.
• Size and complexity between objects their interrelationships grows, it may be necessary to
organize content in a way that allows easier reference and design.

2. Functional Design at Component Level:

• Perform localized processing to generate content and navigation capability in a dynamic
fashion. CLIENT WEB SERVER

• Provide sophisticated database query and access. WEB

stRVICfS

• Establish data interfaces with external corporate systems.

 Component Level Design for WebApps
3. Deployment Design at Component Level:
• It indicates how software functionality & subsyste1n will be allocated within the physical
computing environment that will support the software.
• Examples: Personal Computer, Internet connectivity, Server, Control Panel like Security etc.
0

CLIENT WEB SERVER

AJAX

JSON
BUSINESS
HTML LOG IC