1. © Copyright 2008 STI - INNSBRUCK www.sti-innsbruck.at Web Engineering Web Application Design & Architectures Lecture 8 Dr. Mohammad Ahmad

2. Web Engineering (703512) Overview Introduction Web Application Design Web Application Architectures 2

3. Web Engineering (703512) INTRODUCTION What is Web Application Design and architecture? 3

4. Web Engineering (703512) 4 Design for Web Application

5. Web Engineering (703512) 5 Design & WebApps When should we emphasize WebApp design? –when content and function are complex –when the size of the WebApp encompasses hundreds of content objects, functions, and analysis classes –when the success of the WebApp will have a direct impact on the success of the business

6. Web Engineering (703512) 6 Design & WebApp Quality Security –Rebuff external attacks –Exclude unauthorized access –Ensure the privacy of users/customers Availability –the measure of the percentage of time that a WebApp is available for use Scalability –Can the WebApp and the systems with which it is interfaced handle significant variation in user or transaction volume Time to Market

7. Web Engineering (703512) 7 Quality Dimensions for End-Users Time –How much has a Web site changed since the last upgrade? –How do you highlight the parts that have changed? Structural –How well do all of the parts of the Web site hold together. –Are all links inside and outside the Web site working? –Do all of the images work? –Are there parts of the Web site that are not connected? Content –Does the content of critical pages match what is supposed to be there? –Do key phrases exist continually in highly-changeable pages? –Do critical pages maintain quality content from version to version? –What about dynamically generated HTML pages?

8. Web Engineering (703512) 8 Quality Dimensions for End-Users Accuracy and Consistency –Are today's copies of the pages downloaded the same as yesterday's? Close enough? –Is the data presented accurate enough? How do you know? Response Time and Latency –Does the Web site server respond to a browser request within certain parameters? –In an E-commerce context, how is the end to end response time after a SUBMIT? –Are there parts of a site that are so slow the user declines to continue working on it? Performance –Is the Browser-Web-Web site-Web-Browser connection quick enough? –How does the performance vary by time of day, by load and usage? –Is performance adequate for E-commerce applications?

9. Web Engineering (703512) 9 WebApp Design Goals Consistency –Content should be constructed consistently –Graphic design (aesthetics) should present a consistent look across all parts of the WebApp –Architectural design should establish templates that lead to a consistent hypermedia structure –Interface design should define consistent modes of interaction, navigation and content display –Navigation mechanisms should be used consistently across all WebApp elements

10. Web Engineering (703512) 10 WebApp Design Goals Identity –Establish an “identity” that is appropriate for the business purpose Robustness –The user expects robust content and functions that are relevant to the user’s needs Navigability –designed in a manner that is intuitive and predictable Visual appeal –the look and feel of content, interface layout, color coordination, the balance of text, graphics and other media, navigation mechanisms must appeal to end-users Compatibility –With all appropriate environments and configurations

11. Web Engineering (703512) 11 WebE Design Pyramid

12. Web Engineering (703512) 12 WebApp Interface Design Where am I? The interface should – provide an indication of the WebApp that has been accessed – inform the user of her location in the content hierarchy. What can I do now? The interface should always help the user understand his current options –what functions are available? –what links are live? –what content is relevant? Where have I been, where am I going? The interface must facilitate navigation. –Provide a “map” (implemented in a way that is easy to understand) of where the user has been and what paths may be taken to move elsewhere within the WebApp.

13. Web Engineering (703512) 13 Effective WebApp Interfaces Bruce Tognozzi [TOG01] suggests… –Effective interfaces are visually apparent and forgiving, instilling in their users a sense of control. Users quickly see the breadth of their options, grasp how to achieve their goals, and do their work. –Effective interfaces do not concern the user with the inner workings of the system. Work is carefully and continuously saved, with full option for the user to undo any activity at any time.. –Effective applications and services perform a maximum of work, while requiring a minimum of information from users.

14. Web Engineering (703512) 14 Interface Design Workflow-I Review information contained in the analysis model and refine as required. Develop a rough sketch of the WebApp interface layout. Map user objectives into specific interface actions. Define a set of user tasks that are associated with each action. Storyboard screen images for each interface action. Refine interface layout and storyboards using input from aesthetic design.

15. Web Engineering (703512) 15 Mapping User Objectives

16. Web Engineering (703512) 16 Interface Design Workflow-II Identify user interface objects that are required to implement the interface. Develop a procedural representation of the user’s interaction with the interface. Develop a behavioral representation of the interface. Describe the interface layout for each state. Refine and review the interface design model.

17. Web Engineering (703512) 17 Aesthetic Design Don’t be afraid of white space. Emphasize content. Organize layout elements from top-left to bottom right. Group navigation, content, and function geographically within the page. Don’t extend your real estate with the scrolling bar. Consider resolution and browser window size when designing layout.

18. Web Engineering (703512) 18 Content Design Develops a design representation for content objects –For WebApps, a content object is more closely aligned with a data object for conventional software Represents the mechanisms required to instantiate their relationships to one another. –analogous to the relationship between analysis classes and design components described in Chapter 11 A content object has attributes that include content- specific information and implementation-specific attributes that are specified as part of design

19. Web Engineering (703512) 19 Design of Content Objects

20. Web Engineering (703512) Architectural Styles Hierarchical structure Grid structure Linear structure Network structure

21. Web Engineering (703512) Navigation Design identify the semantics of navigation for different users of the site –User roles must be defined –Semantics of navigation for each role must be identified –A semantic navigation unit (SNU) should be defined for each goal associated with each user –Ways of navigating (WoN) are defined define the mechanics (syntax) of achieving the navigation –options are text-based links, icons, buttons and switches, and graphical metaphors

22. Web Engineering (703512) 22 Navigation Design Begins with a consideration of the user hierarchy and related use-cases –Each actor may use the WebApp somewhat differently and therefore have different navigation requirements As each user interacts with the WebApp, she encounters a series of navigation semantic units (NSUs) –NSU—“a set of information and related navigation structures that collaborate in the fulfillment of a subset of related user requirements”

23. Web Engineering (703512) 23 Navigation Semantic Units Navigation semantic unit –Ways of navigation (WoN)—represents the best navigation way or path for users with certain profiles to achieve their desired goal or sub-goal. Composed of … Navigation nodes (NN) connected by Navigation links NN 1 NN 2 NN 4 NN 3 link 13 link 12 link 34 link 24 NSU

24. Web Engineering (703512) 24 Navigation Syntax Individual navigation link—text-based links, icons, buttons and switches, and graphical metaphors.. Horizontal navigation bar—lists major content or functional categories in a bar containing appropriate links. In general, between 4 and 7 categories are listed. Vertical navigation column –lists major content or functional categories –lists virtually all major content objects within the WebApp. Tabs—a metaphor that is nothing more than a variation of the navigation bar or column, representing content or functional categories as tab sheets that are selected when a link is required. Site maps—provide an all-inclusive tab of contents for navigation to all content objects and functionality contained within the WebApp.

25. Web Engineering (703512) 25 Component-Level Design WebApp components implement the following functionality –perform localized processing to generate content and navigation capability in a dynamic fashion – provide computation or data processing capability that are appropriate for the WebApp’s business domain – provide sophisticated database query and access – establish data interfaces with external corporate systems.

26. Web Engineering (703512) 26 Hypermedia Design Patterns-I Architectural patterns. –assist in the design of content and WebApp architecture –many architectural patterns are available (e.g., Java Blueprints at java.sun.com/blueprints/) Component construction patterns. – recommend methods for combining WebApp components (e.g., content objects, functions) into composite components. Navigation patterns. –assist in the design of NSUs, navigation links and the overall navigation flow of the WebApp. _

27. Web Engineering (703512) 27 Hypermedia Design Patterns-II Presentation patterns –how to organize user interface control functions for better usability –how to show the relationship between a interface action and the content objects it affects –how to establish effective content hierarchies, and many others. Behavior/user interaction patterns – how the interface informs the user of the consequences of a specific action –how a user expands content based on usage context and user desires –how to best describe the destination that is implied by a link –how to inform the user about the status of an on-going interaction, and others.

28. Web Engineering (703512) 28 Design Metrics Does the user interface promote usability? Are the aesthetics of the WebApp appropriate for the application domain and pleasing to the user? Is the content designed in a manner that imparts the most information with the least effort? Is navigation efficient and straightforward? Has the WebApp architecture been designed to accommodate the special goals and objectives of WebApp users, the structure of content and functionality, and the flow of navigation required to use the system effectively? Are components designed in a manner that reduces procedural complexity and enhances the correctness, reliability and performance?

29. Web Engineering (703512) Software Architectures “Architecture is defined [...] as the fundamental organization of a system, embodied in its components, their relationships to each other and the environment, and the principles governing its design and evolution.”(IEEE Architecture Working Group, P1471, 1999) Architectures describe structure –Components of software systems, their interfaces and relationships –static as well as dynamic aspects –blueprint of software system Architectures connect software development phases –requirements mapped iteratively to components and their relationships 29

30. Web Engineering (703512) Software Architectures “Architecture is the set of design decisions [...] that keeps its implementers and maintainers from exercising needless creativity.”(Desmond F. D’Souza and Alan C. Wills, 1999) Architectures describe different viewpoints –conceptual view: entities of application domain and their relationships –process view: system runs, concurrency, synchronization –implementation view: software artefacts (subsystems, components, source code) –runtime view: components at runtime and their communication Architectures make systems comprehensible and controllable –structuring according to different viewpoints –enables communication between different stakeholders 30

31. Web Engineering (703512) Developing Architectures Influences on Architectures Architecture Functional Requirements Clients Users Other Stakeholders Non-Functional Requirements Performance Scalability Reusability Other? 31

32. Web Engineering (703512) Developing Architectures Influences on Architectures Technical Aspects Operating System Middleware Legacy Systems Other? Architecture Experience with Existing Architecture Patterns Project Management Other? 32

33. Web Engineering (703512) Developing Architectures Remember, requirements are always subject to change. –Organizational & Environment changes –Ambiguous requirements initially Thus, iterative approaches are the suggested means of development –Pro: Helps to mitigate design risks –Caution: Doesn’t guarantee a good architecture (ex., What about legacy systems?) 33

34. Web Engineering (703512) Patterns & Frameworks Patterns describe recurring design problems 3 types of patterns –Architecture patterns (e.g. MVC) –Design patterns (e.g. Publisher-Subscriber) –Idioms (e.g. Counted-Pointer in C++) They are a guideline, implementation must be grounded to the specific problem Patterns need to be “integrated” among them! 34

35. Web Engineering (703512) Patterns & Frameworks Frameworks: another option to reuse existing architecture –something that provides you a frame to be filled! Reuse of existing software objects that just need to be properly configured Bound to a specific technology –Require training –High cost of switch –Level of customization not always accetable 35

36. Web Engineering (703512) WEB APPLICATION ARCHITECTURES 36

37. Web Engineering (703512) Architecture Types Layering Aspect –“Separation of concerns” –How many concurrent users are you serving? –Shared needs among multiple applications? (e.g., security) Data Aspect –What kind(s) of data are you delivering? Structured vs. non-structured On-demand vs. real-time –What are the bandwidth requirements? Size & nature of data Again, audience concerns 37

38. Web Engineering (703512) Architecture Types Web Platform Architecture (WPA) –Platform = Infrastructure Hardware Software modules & configurations Choice of software platform (e.g., J2EE,.NET) Web Application Architecture (WAA) –Conceptual view of how key business processes and needs are separated & implemented –Often domain-specific –Greater complexity requires greater modularity 38

39. Web Engineering (703512) Example of a WAA Web Application Presentation Business LogicData Management Personalization SecuritySearch 39

40. Web Engineering (703512) Generic Web (Platform) Architecture The Web “platform” is based on –TCP/IP –HTTP –HTML It’s essentially a Client/Server architecture! –In term of patterns one of the simplest one But still thing can get complex… –Components on the network (firewall, proxy, load balancer) –Components in the intranet (Web server, application server, data base, legacy systems, web services) 40

41. Web Engineering (703512) Model View Controller Architectural Pattern from Smalltalk (1979) Decouples data and presentation Eases the development 41

42. Web Engineering (703512) Model View Controller Model –encapsulate application state –responds to state queries –exposes application functionality –notifies views of changes View –renders the models –requests updates from models –sends user interaction to controller –allows controller to select view Controller –defines application behavior –maps user actions to model updates –selects view for response –one for each functionality 42

43. Web Engineering (703512) Web Architectures: Specifics Technological constraints –HTTP Broad variety of technical solutions –application servers, proxies, firewalls, legacy applications –checking of quality difficult e.g., performance depends on various components, like database, network bandwidth, processor, memory, code, … –improvement of quality difficult e.g., code performance may not change overall performance substantially Technical solutions inhomogeneous and immature –short product life cycles –missing standards impede component integration from different manufactures –many solutions are open source: continuity of development, extendibility, … Global access to Web applications –internationalization, cultural differences 43

44. Web Engineering (703512) Model-View-Controller 2 (MVC 2) Adaptation of MVC for the Web –stateless connection between the client and the server –notification of view changes –re-querying the server to discover modification of application’s state 44

45. Web Engineering (703512) Client/Server (2-Layer) Client Web/App Server Database Services Dynamic HTML Static HTML Client Server 45

46. Web Engineering (703512) N-Layer Architectures Client Application Server (Business Logic, Connectors, Personalization, Data Access) Presentation Layer Firewall Proxy Web Server DBMSB2B Backend (Legacy Application, Enterprise Info System) Business Layer Data Layer 46

47. Web Engineering (703512) Why an N-Layer Architecture? Separating services in business layer promotes re- use among applications –Loose-coupling – changes reduce impact on overall system. –More maintainable (in terms of code) –More extensible (modular) Trade-offs –Needless complexity –More points of failure 47

48. Web Engineering (703512) JSP-Model-1 Architecture 48

49. Web Engineering (703512) JSP-Model-2 Architecture 49 1. user request 2. create/change model 3. create/change view 4. generate output 5. server response

50. Web Engineering (703512) Struts Architecture 50 1. user request 2. forwarding to controller 3. create/change model 4. create/change view 5. generate output 6. server response

51. Web Engineering (703512) Things to keep in mind (or summary) Good design of architecture is crucial You can leverage on patterns and frameworks –Both have advantages and disadvantages Design is constrained on Web “infrastructure” MVC is the most commonly used pattern 51