A Brief Analysis of Web Design Patterns

A Brief Analysis of Web Design Patterns Ginny Sharma M.Tech Student, Dept. of CSE, MRIU Faridabad, Haryana, India Abstract Design patterns document good design solutions to a recurring problem in a particular context. They are typically modelled using UML. This paper analysis a number of design patterns focusing on architectural and navigational design patterns. Main focus of this paper is on detection and visualisation of web design patterns. For detection of patterns implemented via hyperlinks the Interactive Design Pattern (IDP) Detect system is used, which detects through static analysis of web page source code and visualizes detected web design patterns via UML class diagrams. A web service VisDP is presented for explicitly visualising design patterns in UML diagrams. This web service is developed based on a UML profile. Keywords Design patterns, static and dynamic analysis,mvc, PAC, IDP detectsystem, VisDP. I. Introduction Design patterns refer to reusable or repeatable solutions that aim to solve similar design problems during development process. From developer s prospective design patterns produce a more maintainable design. Whilst from the users prospective, the solution provided by design patterns will enhance the usability of web applications. Reusability of design patterns is suitable for any system development that has the similar functions or problems. Choosing the most suitable design pattern in the context of web application is not easy. Most developers lack of knowledge on existing design patterns. The existing and well proven design experiences help us in finding appropriate solutions to design problems. Every code review needs to take into consideration as there are different constraints which are associated with design patterns. The main goal of this study is to analyse and compare several design patterns to support the selection of suitable design patterns for general feature in wed application. In this research the focus is on architectural and navigational design patterns. This research also investigates detection and visualisation of web design patterns. Figure1 illustrate the structure of MVC pattern.webapplication that adopts MVC will be maintainable and scalablein web application User interface can be updated and changed frequently without affecting the model component by creating a dynamic view. Controller can handle multiple views without real processing while a view can be called by the combination of different Controllers. MVC requires developers to have some experiences, good programming abilities and significant planning in separating between components. Besides, it is difficult and time consuming to adopt MVC. This web design pattern is inappropriate to be applied in small and medium size web application. Extra works and efforts are needed which are not worthy. Below figure shows its structure. Each one is performing its own task. According to Christopher Alexander Each pattern describes a problem which occurs over and over again in our environment and then describes the core of the solution to that problem in such a way that you can use this solution a million times over without ever doing it the same way twice. It is a predefined layout for designing a web page. So a design pattern is a formal description of a problem and its solution. Design patterns must have a simple, descriptive name that can be readily used when referring to the pattern. A pattern should document the problem, its solution and the consequences of using it. It should be easily reusable. II. Types of Design Patterns Architectural Patterns Navigational Patterns A. Architectural Patterns 1. Model-View-Controller MVC pattern has three components- model, view, controller. Model summarises the core application data and functionality. View displays information to client on screen. Controller handles the interaction between user interface and user input andinitiates the creation of applications newview. Fig. 1: structure of MVC 2. Presentation-Abstraction-Control Presentation Abstraction Control PAC architectural patterns provides a structure that is suitable for interactive software systems in the hierarchy of cooperative agents. Each agent is responsible for the specific aspect of applications functionality. It consists of three components which are presentation, Abstraction and control. Agents act as an interactive system that generates view as a set of cooperating agents that is developed independently. Agents are suitable in development of interactive applications. 155

in Eduation Technology (IJARET) ISSN : 2394-2975 (Online) Figure shows the collaboration of PAC. Since PAC consists of separate agents, it allows the development of data model and uses interface to work independently. Besides PAC supports changes within presentation or abstraction components of a PAC agent that do not affect other agents in the system. PAC supports multitasking as PAC agents can be distributed easily to different threads, processes, or machines. Multitasking feature facilitates multiuser and interactive applications. Although PAC is suitable for multiuser applications, long chain of communication in the application may lead to inefficiency because it can be difficult to get control while maintaining too many independent agents. In order to overcome the liabilities of PAC, there are some current works that integrate different design patterns into PAC to extend its functionalities. There are three agents in figure top level agent, intermediate level agent, bottom level agent. With their help we can develop better interactive application which supports multitasking. Independent agents can performs independent tasks in an application. There are too many agents so multiuser application should be maintained properly so that various aspects of an application can be fulfilled. When PAC pattern is applied to any web page its different agents start getting different processes, threads and they perform tasks in collaboration with each other. Any change in one agent cannot affect any other agent s performance Fig 2: Collaborations of PAC agents B. Navigational Patterns 1. Navigation Observer Navigation Observer design pattern is useful to record the visited node and link in a navigation history. It is normally used to decouple the navigation process from the perceivable record of the process. It simplifies the construction of navigation viewer in the way that separating hypermedia components including node and link from the objects, which will implements both the record of navigation and its appearance as well. However overhead might occur when users are only interested in certain type of nodes, they need to interpret the history to filter their desired types of nodes. This pattern is useful when we want to get the history record of the navigated path in easier way. Backtracking process helps users in getting the previous visited path faster. 2. Navigation Strategy Navigation strategy design pattern addresses the computation of link end points while navigating.it shows the ways to complete the navigation process via Web nodes, perform the navigation process, obtain link endpoint, activate the link and store those endpoints for later access. 3. News News design pattern allows the access of new information and ease the growth of website. This pattern can be used when there are issues of how user will be notified about the recent changes of information while maintenance of website needs to be considered. This pattern provides visual feedback to announce the recent changes to the user in a clearer way so that users can be notified immediately. By using this pattern, users can easily take note on the latest changes of the website. Users can navigate the newest information. This pattern is useful for rapid changing websites. Latest news and updates can be shown. 4. Pagination Pagination pattern is used for performance purpose to organize the search results in a simpler and more organized way. It enables users to navigate results using controls such as page number or next, previous, first and last. Pagination is suitable when users need to view a long list of items that cannot fit on one page. This pattern is also suitable when the search result is organized into categories of interest, such as newest first. It displays a few results in a page rather than showing all results in one page. It organizes the search results into smaller parts to ease user reading. It supports very well forum structured information such as Google search results but it fails to support user s preferences for structured information. 5. Set-Based Navigation It organises the information in set of related information items. It shows attributes and anchors in a node. This pattern groups the nodes under meaningful set and provides intra set navigation facilities. It is crucial to allow users moving easily from node to node. With number of sets provided readers can traverse to get the most important information set based navigation is applied in many successful hypermedia applications such as Art Gallery. This pattern is useful for websites with massive data. It improves the efficiency of browsing information. In summary, there are similar characteristics between MVC and PAC for architectural design patterns. The main difference is in the way of achieving synchronization of related objects and location of input and output responsibilities. For output case, model and view components of MVC are separated and work independently. In PAC, input and output action is combined in the presentation component. MVC is simpler than PAC because in MVC relationship between objects can be interpreted as different views of the model. PAC model uses hierarchy of control components that leads to more complex specification and implementation. III. Detecting And Visualizing Web Design Patterns. All patterns follow almost the same structure regardless of the domain in which they are being applied. They are documented in natural language and also illustrated via diagrams. While architectural patterns utilize an uncomplicated outline for visualization purpose, SE patterns make use of UML diagrams to illustrate design patterns in this field. Up to the present time, a great deal of research has been done into detecting design patterns. Most of it has been done in the field of SE. however there are also some but few references about detection of HCI design patterns. Design patterns can be detected automatically or semi-automatically. 156

A. Design patterns detection approaches are divided into two categories : Static Analysis Dynamic Analysis These approaches address structural and behavioural aspects. Among the approaches device for detection of patterns in SE field only static analysis for detection of design patterns through the matrix matching method is considered. Automatic detection of design patterns through the usage of both static and dynamic analysis is considered. It can be noticed that the focus of reviewed approaches is either on detection or visualization of design patterns.furthermore the quality as well as quantity of the research done in the field of SE regarding design patterns detection is incomparable with what has been accomplished in HCI field which is due to the lack of diagrams in the structure of HCI design patterns. Accordingly, HCI design patterns should be visualized to make the application of SE pattern detection approaches B. Method The scenario for the application of detection and visualization approaches starts when a user submits a Web page address in which the occurrence of specific Web design patterns should be checked. Consequently, detection of these patterns can be fulfilled through static analysis of the source code of Web page. The static analysis approach that is used for detecting Web design patterns instances in a Web page parses the contents of the web page to find a Web design patterns elements. After detecting a pattern's elements the relationship between those elements are also being examined. If those relationships have conformity with the definition of that pattern, the instance of the pattern will be reported as a detected pattern. The visualization through the usage of diagrams illustrate the classes that hold the elements of each pattern as class properties and also the relationship between those classes which together form the diagram of that pattern. All Web design patterns are implemented via hyperlinks. A link is implemented with an HTML <a> tag. This tag has many properties such as name, Id, ref and more. To create a diagram for a design pattern implemented via links, each <a> tag is considered as a class and its properties are considered as the attributes of that class. The relationship between classes is shown via arrow heads, which shows the references that is kept between one class and the instance of another class. Different colors are also used whenever required to differentiate the role of classes in each pattern. C. Interactivedesign Pattern Detect (IDP Detect) System IDP Detect is a system that detects and visualizes the web design patterns implemented via hyperlinks in a Web page. It uses a static analysis approach for detection of design patterns and UML class diagrams for visualizing detected Web design patterns. The IDP Detect system is a desktop application that is implemented through Java language. IDP Detect make use of two external package: Jericho HTML Parser, which is used for detection approach andjgraph,which is used for visualization approach. IDP Detect provides Web design pattern detection and visualization servicesfor three Web design patternsimplemented via hyperlinks which are to-the-top link pattern, paging pattern and breadcrumbs pattern. Users can make a request for detection of the any aforementioned Web design patterns in a Web page by identifying it's address. Fig. 3: Conceptual Diagram of IDP Detect System Based on the selection of each Web design pattern for detection, brief information is displayed by the IDP Detect system. When a user requests detection of the pattern, IDP Detect gets the identified Web page addresses, parses its contents using the services provided by Jericho HTML parser package to find the relevant elements of a Web design pattern, analysis those elements and defines the candidate Web design pattern based on the found elements. At the next step, it checks the relationships between those elements to confirm candidate patterns as detected ones. It generates a list of feedback about the implementation of detected Web design patterns. After the completion of detection process, detected Web design patterns are reported by the system. For each detected Web design pattern, the system displays two options of diagram and feedback, which can be selected by the user. By selecting the feedback option, a list of generated feedbacks through the detection process of that pattern will be shown to the user in a new window. The diagram option is the visualization service provided by the system. By selecting this option, the system gets the information of the detected pattern and based on the consisting elements of that pattern and the relationship between them, generates the UML class diagram of that pattern using the services provided by the JGrap package. D. VisDP : A Web service for visualizing design patterns on demand. We provide visual technique and a tool called VisDP, which is able to visualize pattern related information in a UML diagram on demand. With VisDP, the user is able to identify design patterns by moving the mouse and viewing color changes in UML diagrams. Additional pattern related information can be dynamically displayed based on the current mouse location.visdp is developed based on a UML profile containing new stereotypes, tagged values and constraints for visualizing design patterns in UML diagrams. Service-Oriented Architecture (SOA) is an architectural style whose objective is to reduce coupling among interacting software agents. A web service is SOA with additional constraints: first, interfaces must be based on Internet protocol such as HTTP,FTP and SMTP. Second, messages must be in XML except for binary data attachment 157

in Eduation Technology (IJARET) ISSN : 2394-2975 (Online) E. On-Demand Visualization This technique is based on colouring and mouse movement. A tool called VisDP, Which can hide /show pattern related information on demand. When the pattern related information is hidden, the diagrams are just like the ordinary UML diagrams. When the pattern related information is shown, the end user can identify the design patterns that a class (operation, attribute) participants and the roles it plays by different colours and on-demand information shown in the diagram. By using our technique and tool in a UML diagrams, the software designer can move his mouse onto the modelling elements i. e. Class, operation, attribute in question. All classes that participate in the same pattern as the class under the mouse are changing to same colour. If the class under the mouse participates in more than one design pattern, different colours are used to distinguish the pattern. In the overlapping part of a composition of patterns, the corresponding colours of all participating patterns are displayed in alternation with a certain time interval. Outside the overlapping part, only the corresponding colours are displayed. All pattern related information encoded in the stereotypes and tagged values of a modelling element is shown when the user moves the mouse over that modelling element. When the user's mouse is moved out, all pattern related information is gone and no colour is shown. F. A Web service for visualizing patterns In the previous section, we describe our techniques and a tool for visualizing design patterns in terms of standalone applications. In this section, we present how to provide a Web service for our techniques to be broadly accessible in the Internet and how to incorporate our tool with common UML tools, such as Rational Rose and ArgoUML. We use service oriented architecture to publish our application which is based on the following considerations. First, the web service is accessible through a Web browser so that the user can access our application anywhere. Second, Web service provides the communication between applications. VisDP can not only be accessed by Web browsers, it can also be plugged into other standalone applications. Below figure depicts the overall system architecture of VisDP. On the server side, we deploy VisDP as a Web service which is registered in the web service engine so that it is ready to serve users. On the client side, the user may use any common UML tools, such as Rational Rose, to draw diagrams with stereotypes and tagged values representing pattern related information. In this case, the Stereotypes and tagged values are hidden. The diagrams are normal UML diagrams. When the user wants to use VisDP Web service to visualize pattern related information encapsulated in the diagram, he may use an appropriate plug-in e.g. Uni-Sys XMI for rational rose to transform a UML diagraminto an XML file. The JSP page of VisDP takes the XML file as an input and returns the user with a new UML diagram that can visualize design pattern on demand. Fig. 4 : System architecture of VisDP. IV. Conclusion Web application is designed by using design patterns. These design patterns improves its consistency and reusability. Without the adoption of design patterns or wrong selection of them will make the development of Web application more complex and hard to maintain. Thus knowledge in design patterns is essential in selecting the most appropriate patterns in the web application development. This paper analysis and compares a number of design patterns focusing on architectural and navigational design patterns. MVC is an architectural pattern but it require users having good programming ability, experience etc. This is suitable for large size web applications. PAC is also an architectural pattern which is useful for developing interactive software system. It supports multitasking. So we should choose appropriate design pattern for any web application. Interactive Design pattern Detect (IDP Detect) system is considered for detection of Web design patterns in a Web page which are implementedvia hyperlinks. It Detects the occurrence of design patterns in a Web page through static analysis of the web page source code and visualizes detected Web design patterns via UML class diagrams. Web design patterns are typically modelled using UML. In this paper, we present a Web service VisDP for visualizing design patterns in UML diagrams. This Web service is developed based on a UML profile containing new stereotypes, tagged values and constraints for visualizing design patterns in UML diagrams Insufficient knowledge on design patterns makes the process of choosing pattern more complicated.so knowledge must be theirs. User should choose most suitable design pattern for a web application. Reusability of design patterns is suitable for any system development that has similar functions or problems. Each pattern provides the main solution for a particular problem. References [1] V.Pawan, "Web Application Design patterns" CA:MorganKautmann, 2009. [2] L.Bass and j. Coutaz, " Developing Software for the user interface, " Addison -Wesley.1991. [3] E.Cerami. Web services Essentials. O'Reilly @ Associates,inc,2002. [4] J.Vlissides. Notation, Notation, Notation. C++Report, April 1998. [5] Argo UML website. http:// Argouml. tigris.org/ [6] Rational Rose website. http:// www.rational. Com / 158

[7] VisDP. http://www.utdallas [8] Enterprises Java Beans Specifications, https:// Java. sun. Com /products /plugin /1.2/plugin.faq. html, 2001. [9] Flanagan, David, Javascript :The Definitive Guide,3rd O'Reilly, 1998. [10] F.Lyardet, G. Rossi and D Schwabe, "Patterns for Dynamic Websites, " USA, 1998. [11] G.Booch,J.Rumbaugh and I. Jacobson, The Unified Modeling Language User Guide. Addison - Wesley, 1999. [12] E. Gamma, R. Helm, R. Johnson and Vlissides, Design patterns :Elements of reusable object oriented software, Addison - Wesley, MA, 1995. [13] R. Beale and B. Bordbar, "using modeling to put HCI design patterns to work, ".HCI International.11th international conference on HCI Lawrence Erlbaum Associates, 2005. [14] A.Hussey and D. Carrington, "comparing two user interface architectures :MVC and PAC, " springer Verlag, 1996. [15] A.Garrido, G. Rossi and S. Carvalho, "Pattern systems for hypermedia," Proc.Of Plop 97 Pattern language for program 1997. Author s profile Ginny Sharma. M.Tech (CSE) from MRIU Faridabad. Research interests are web design patterns, computer networks. 159