Arsalan Shahid

Introduction to Design Patterns for Web Applications

My dear reader, how are you? السلام عليكم

We are what we repeatedly do. Excellence is not an act but a habit – Aristotle

In this post, we will continue our web-journey and discuss the popular web application design patterns. Further we will talk about MVC and related architectural patterns.


Just started exploring the web and web applications? Want to start from the beginning? Follow the structured tutorial series in the following sequence:

  1. How a Web Application Works: From Beginning to Boundaries (DirectMe)
  2. Web Services: A dive into yesterday and shaping today (DirectMe)
  3. Software Architecture: An Abstract Introduction (DirectMe)
  4. Software Architectural Patterns: N-Tier Layered and Microservices (DirectMe)
  5. Insights to Microkernel Architectural Patterns (DirectMe)

Design Patterns

What is a design pattern for web applications? A design pattern is a description of interacting objects and classes that interact to solve a general design problem within a particular context [1]. Design patterns are different from architectural patterns and the fundamental difference is the scope of the patterns. This is explained in detail in above-mentioned post 3 on introduction to software architecture.

Modern web applications involve a significant amount of complexity, particularly on the server side. There are a number of protocols, programming languages, and technologies spread throughout the web application stack. This makes development, maintenance and extension of these applications extremely difficult. Therefore, a foundation of solid design principles can simplify each of these tasks and this motivates software engineers to use abstraction for dealing with this ever increasing complexity. Design patterns provide useful design abstractions for object-oriented systems.

The design patterns can be divided into three groups: 1)  creational (deal with object creation mechanisms and are used in situations when basic form of object creation could result in design problems or increase the complexity of a code base), 2) structural (ease the design by identifying a simple way to realise relationships between entities or defines a manner for creating relationships between objects), and 3) behavioral (describes how different objects and classes send messages to each other to make things happen and how the steps of a task are divided among different objects) [2].

These groups have been described in detail in a popular book on design patterns (DirectMe). The patterns discussed in this book are collectively called a Gang of Fours or GOF design patterns. Need a video tutorial summarizing them? DirectMe. So, we learned that following are the patterns that fall in each category.


Apart from the design patterns, the Model-View-Controller (MVC) design pattern has become one of the most used architectural patterns for web applications development in the industry. The MVC specifies that an application consists of a data model, presentation information, and control information. The pattern requires that each of these is separated into different objects. MVC is more of an architectural pattern, but not for complete application and it related to the UI layer of an application. The individual components of the MVC pattern and their interactions are shown in Figure 1. These are further described [3] below:

Related image

Fig 1: Components of the MVC design pattern.

Apart from the MVC architectural pattern, we also have a few other patterns called the MVP, MVW, and MVVM. Need a quick comparison between them? DirectMe.

In future posts, I will explain the development frameworks that implement these architectural patterns to provide modern day optimized web-applications.

References

[1] Web applications – design patterns, source: http://researchhubs.com/post/computing/web-application/design-pattern.html, Accessed on March 31, 2019.

[2] What is the difference between Creational, Structural and Behavioral Patterns? source: https://www.quora.com/What-is-the-difference-between-Creational-Structural-and-Behavioral-Patterns, Accessed on March 31, 2019.

[3] MVC Design Pattern. Source: https://www.geeksforgeeks.org/mvc-design-pattern/

Exit mobile version