Web Engineering

1. Web Application Design & Architectures Lecture 8 Dr. Mohammad Ahmad Web Engineering

2. Overview • Introduction • Web Application Design • Web Application Architectures

3. What is Web Application Design and architecture? INTRODUCTION

4. Design for Web Application

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. 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. 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. 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. 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. 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. WebE Design Pyramid

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. 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, whilerequiring a minimum of information from users.

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. Mapping User Objectives

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. 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. 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. Design of Content Objects

20. Architectural Styles Linear structure Grid structure Network structure Hierarchical structure

21. 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. 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. 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 link12 link24 NN2 NN1 NN4 NSU link13 NN3 link34

24. Navigation Syntax • Individual navigation link—text-based links, icons, buttons and switches, and graphical metaphors.. • Horizontal navigationbar—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. 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. 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. 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. 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. 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

30. 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

31. Developing ArchitecturesInfluences on Architectures • Functional Requirements • Clients • Users • Other Stakeholders • Non-Functional Requirements • Performance • Scalability • Reusability • Other? Architecture

32. Developing ArchitecturesInfluences on Architectures • Technical Aspects • Operating System • Middleware • Legacy Systems • Other? Architecture • Experience with • Existing Architecture • Patterns • Project Management • Other?

33. 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?)

34. 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!

35. 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

36. Web APPLICATION Architectures

37. 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

38. 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

39. Example of a WAA Web Application Presentation Business Logic Data Management Personalization Security Search

40. 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)

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

42. 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

43. 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

44. 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

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

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

47. 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

48. JSP-Model-1 Architecture

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

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