Web Applications. Software Engineering 2017 Alessio Gambi - Saarland University

Transcription

1 Web Applications Software Engineering 2017 Alessio Gambi - Saarland University Based on the work of Cesare Pautasso, Christoph Dorn, Andrea Arcuri, and others

2 ReCap

3 Software Architecture A software system s architecture is the set of principal design decisions made about the system. N. Taylor et al. Abstraction Communication Visualization and Representation Quality Attributes

4 What designers want Every system a software architecture has

5 Design Architectural Styles Architectural Patterns Building Blocks - Software Components - Component API/Interfaces - Software Connectors

6 Send a HTTP request, and get back a HTML page which will be visualized in the Send HTTP request, and get HTTP response containing the HTML page Browser visualizes it

7 Client/Server Many clients, active, close to users One server, passive, close to data Single point of failure, scalability Security, scalability

8 HTTP The Hypertext Transfer Protocol

9 HTTP The Hypertext Transfer Protocol Connector or Component?

10 HTTP The Hypertext Transfer Protocol Connector or Component? Synch or Asynch?

11 HTTP The Hypertext Transfer Protocol Connector or Component? Synch or Asynch? Stateful or stateless?

12 HTTP Request Action: verb, express the intent Headers: meta-data Body: optional, can be anything, a stream of bytes, form data, session information, etc.

13 HTTP Actions Have precise semantic, and a web application might not implement all of them GET retrieve a resource POST send data and/or create a resource PUT replace an existing resource DELETE delete a resource HEAD retrieve HEADers but not body OPTIONS check the methods available on the resource Web applications must to implement the semantic right

14 HTTP Response Headers and status Status codes, organized in families: 1xx: information 2xx: success 3xx: redirection 4xx: user error 5xx: server error Delivers a resource: a page HTML, a CSS file for the style, images, JS libraries, etc.

15 HTTP Body Transfer the main part of the data, but not the only way to send data query params, custom headers Required in POST and PUT requests Required in responses to GET requests HEAD must not provide one

16 HTML The Hypertext Markup Language

17 Resources One request per resources, multiple requests in parallel All requests must complete before a page is fully displayed

18 Static vs Dynamic Pages Static: Files are served as they are (index.html) content does not change

19 Static vs Dynamic Pages Static: Files are served as they are (index.html) content does not change Dynamic: The HTML (or part of it) is generated upon request based on data

20 State-Logic-Display cluster elements that change at the same rate

21 Server-Side HTML Rendering The HTML page is created on the server and sent back to the client Overhead in processing each request if the page is created from scratch Same content for different displays Desktop vs Tablet vs Mobile

22 Presenter-View extract the content from the model to be presented from the rendering into screens/web pages

23 Server-Side HTML Rendering Based on HTML templates that mix together HTML tags, data, and code

24 Server-Side HTML Rendering Based on HTML templates that mix together HTML tags, data, and code Different technologies: PHP scripts index.php JavaServer Faces (JSF) index.xhtml Embedded Ruby (ERB) index.html.erb

25

26 Server-Side HTML Rendering Based on HTML templates that mix together HTML tags, data, and code Different technologies: PHP scripts index.php JavaServer Faces (JSF) index.xhtml Embedded Ruby (ERB) index.html.erb Templates do not necessarily target the entire page and they might not be stored in files

27 Components

28 Content Management Systems (CMS)

29

30 Design

31 3-Tier Architecture Presentation Web Browser Business logic Data source Front End App Server Back End

32 Layered (Style) Communications 1 layer up/down Information hiding, no circular deps Possibly bad performance Good evolvability

33 What run where? thin-client fat-client

34 3-Tier Architecture Presentation Web Browser Business logic Data source Front End App Server Back End

35 Data Layer Back End Persistence Storage

36 A Mapping Problem Domain model Data storage

37 Domain Model Represent concepts in the domain and their relations, not as rows in a database Network of interconnected concepts Abstract Data Type data and the behavior

38 Storage model How to store data? Key-Value Model list of keys and values (hashtable style) Relational Model traditional SQL model Document-oriented Model schema-less documents Graph-oriented Model data is stored as an interconnected graph

39 Key-Value Implement a map Values have no schema

40 Relational Set-theory Collection of tables with rows and columns

41 Document-oriented Data stored in document but not relations Extends Key-Value

42 Graph-oriented Data stored as network graph Relations first-class citizens

43 Polyglot Persistence Multiple ways to store data Financial Data Relational Reporting Product Catalog Document KeyValue User Sessions Recomme ndation Graph Shopping Cart

44 3-Tier Architecture Presentation Web Browser Business logic Data source Front End App Server Back End

45 Application Layer App Server Data access, navigation, and persistence Data processing (Business logic)

46 Plugin Explicit extension points Static/Dynamic composition Low security (3rd party code) Extensibility and customizability

47 A Different Problem (?) Programming Language Storage Architecture

48 Data Access API REST API REST API Object-based storage (e.g. S3) Relational Database (e.g. MySQL) Add an abstraction layer that the represent the database in the application Service API Documentbased Database Tool-specific API Relational Database Wrap the communication with the data store and expose it as domain model

49 Data Source Patterns Row Data Gateway One instance per row returned by a query Table Data Gateway One instance per table Active Record Encapsulates DB access and adds business logic to data Data Mapper loads DB into Domain Model, and vice-versa

50 Row and Table Gateways Based on table structure Conversion of object type to database format Typically stateless Push back and forth data

51 Active Record Row Data Gateway + Business Logic Product productid productname static get(int id) insert update delete Data Store calculaterecognitions() Methods for: - Create instances from SLQ results - Insert new instances in the data store - Update data store based on instances data - Find relevant instances

52 Data Mapper Product productid productname calculaterecognitions() ProductMapper get(int id) insert update delete Data Store Decouple objects structure from database structure There may be more than one mapper per domain object

53 Navigate (Relational) Data Traverse object graph Join over foreign keys

54 Lazy Loading

55 Lazy Loading Interrupt the load at some point and resume it later only if needed

56 Lazy Loading Patterns Lazy Initialization Checks if field is null at every access Value Holder Wraps lazy-loaded objects Virtual Proxy Mocks field access and loads values on the demand Ghost Real object but partially loaded, missing data loaded on first access

57 3-Tier Architecture Presentation Web Browser Business logic Data source Front End App Server Back End

58 Front End Front End Generate the HTML based on request and data from the backend Can handle client side interactions both inside the server and the client s browser Security, input validation, responsiveness, etc.

59 Web Frameworks

60 Plugin Explicit extension points Static/Dynamic composition Low security (3rd party code) Extensibility and customizability

61 Client Side

62 JavaScript a programming language executed in the browser nothing to do with java JS files/libraries referenced by the web page like any other resource Can be inlined Dynamically manipulates the page Document Object Model (DOM) to alter page s content, structure, and behavior

63 AJAX Asynchronous JavaScript and XML

64 JS not so (well designed) easy

65 JS Frameworks

66 Case Study

67 Main Scenarios A user requests an article during normal operation and gets the rendered article HTML page. An editor saves an edited article during normal operation and the article is saved.

68

69

70 UI Page Submit Logic Static Resources ArticleView Skinning Localization ArticleEdit Parser Writes Reads Backend

71 Qualities Basic implementation - Limited scalability - Single point of failure - Limited Security

72 Performance Tactics Control Resource Demand - Increase the resource efficiency (caching) - Reduce overhead (pre-generate HTML from PHP) Manage Resources - Schedule resources (load balancer)

73 Load Balancing deploy many replicated instances of the server on multiple machines

74

75

76 Caching + Load Balancing FrontEnd (Apache)

77 Caching + Load Balancing Squid (Caching) Apache

78

79 Caching + Load Balancing Squid (Caching) Apache

80 Caching + Load Balancing LoadBalancer (Squid) Squid LoadBalancer Apache

81 Caching + Load Balancing LoadBalancer (Squid) Squid LoadBalancer Apache Squid Apache LoadBalancer Squid LoadBalancer Apache Squid Apache

82 UI Page Submit Logic Static Resources ArticleView Skinning Localization ArticleEdit Parser Writes Reads Backend

83 UI Page Cache Cache Submit Logic Loader ArticleView Skinning Localization Static Resources Cache Cache ArticleEdit Parser Writes Reads Backend

84 Performance Tactics Control Resource Demand - Prioritize events (deferred article updates) Manage Resources - Introduce concurrency (distributed database) - Schedule resources (load balancer) - Multiple copies of data and computations

85 Master/Slave split a large job into smaller independent partitions which can be processed in parallel

86 Distribution + Replication Database More reads than writes Near-live updates (no strict consistency requirements)

87 Distribution + Replication Load Balancer Writes Reads DB Master DB Slave More reads than writes Near-live updates (no strict consistency requirements)

88 Distribution + Replication Data Sharding Clear data separation (Article Name: A-B, C-D, etc..)

89 Distribution + Replication Load Balancer Writes Reads DB Master DB Slave

90 Distribution + Replication Load Balancer (Master) Partition Logic (Sharding, Relication Writes Reads DB Master (Shard) DB Slave

91 Visualization

92 UI Page Cache Cache Submit Logic Loader ArticleView Skinning Localization Static Resources Cache Cache ArticleEdit Parser Writes Reads Backend

93 UI Page Cached Submit Logic Loader Static Resources HTML File Cache ArticleView Skinning Localization Cached ArticleEdit Parser Cache Job Queue Job Runner Writes Parser Reads Writes Backend Precompile/Recompile Regenerate/Invalidate

94 Security/Availability Tactics Prevent Attacks Challenge Tokens (CSRF) Validation (User) and Sanitization (SQL Injection, XSS) Resist Attacks Maintain multiple copies of computations Maintain multiple copies of data Recover from Attacks DB Versioning (Recovery from data loss)

95 UI Page Cache Cache Submit Logic Loader ArticleView Skinning Localization Static Resources Cache Cache ArticleEdit Parser Writes Reads Backend

96 UI Page Cache Cache Submit Logic Loader ArticleView Skinning Localization Sanitizer Pipeline Static Resources Cache Cache ArticleEdit Parser Reads Writes User Access Backend

97 UI Page Submit Logic Loader Cache ArticleView Cache Skinning Localization Sanitizer Static Resources Cache Cache ArticleEdit Parser Writes Reads Backend

98 Additional Qualities

99 Extensibility UI Page Submit Logic Loader Cache ArticleView Cache Skinning Localization Sanitizer Static Resources Cache Cache ArticleEdit Parser Writes Reads Backend

100 Extensibility UI Page Cache Cache Submit Logic Loader ArticleView Skinning Localization Sanitizer Static Resources Cache Notify Cache Notify ArticleEdit Notify Parser Writes Notify Reads Notify Backend Hook Engine Register Callback External Module

101 Configurability/Customizability UI Page Cache Cache Submit Logic Loader ArticleView Skinning Localization Sanitizer Static Resources Cache Cache ArticleEdit Parser Writes Reads

102 Configurability/Customizability UI Page Cache Cache Submit Logic Global Variables and Configurations Sanitizer Loader Static Resources ArticleView Cache Skinning Localization Cache ArticleEdit Parser Writes Reads

103 Process View

104 Read Article A user requests an article during normal operation and gets the rendered article HTML page.

105 Read Article Article Exists GET Article N Y Get Article from DB HTML Cache Y Missing Page N Parse Content LoadBalancer Select DB Render Content Y Parser Cache

106 Write/Edit Article An editor saves an edited article during normal operation and the article is saved.

107 Write/Edit Article Error Page Y Write Conflict Submit Logic Update Job User Authorized Y Create Edit Form Article Edit Render Content LoadBalancer Select DB

108 Summary Work incrementally Use different architectural views Start the design from the domain model and go up in the layers Use frameworks whenever possible Each design decision has a rationale (hoisting)