World Wide Web and Web Applications Martin Kruli

World Wide Web and Web Applications Martin Kruliš by Martin Kruliš (v 1. 0) 4. 12. 2019 1

TODO � Bylo to moc rychle, pridat par prikladu (k dynamickym strankam – server i client) by Martin Kruliš (v 1. 0) 4. 12. 2019 2

World Wide Web � What is www? ◦ WWW is NOT the Internet �It is the most used Internet service though ◦ Started as an experiment of CERN physicists ◦ Soon becomes a platform for information exchange �… and business �… and communication �… and porn entertainment �… ◦ Now, www provides fully-grown environment for applications, that are accessible from anywhere by Martin Kruliš (v 1. 0) 4. 12. 2019 3

World Wide Web � Ancient History ◦ Dr. Vannevar Bush �Human brain operates with associations �Designed concept of MEMEX �Device that was never constructed �Published in “As We May Think” paper (1945) ◦ Theodore Nelson �First used the word hyper-text �I. e. , text interlinked with associations �Xanadu �System for sharing information �Implemented as prototype by Martin Kruliš (v 1. 0) 4. 12. 2019 4

World Wide Web � History ◦ Tim Berners-Lee �Created system for sharing data (1989) �Community of physicists in CERN �Simple textual data only ◦ NCSA Mosaic �First browser by Marc Andreesen and Eric Bina �Development started 1992, 1993 released for public �Bought by Microsoft … �… and released in 1995 as Internet Explorer The First Page Ever by Martin Kruliš (v 1. 0) 4. 12. 2019 5

World Wide Web � History ◦ 1996 – The war of the browsers started �Internet Explorer vs. Netscape Navigator ◦ 1999 – Last revision of HTML 4. 01 ◦ 2002 – The first ideas of “Web 2. 0” �The content is massively created by users ◦ 2004~2006 – Introduction of AJAX applications �Web is becoming much more interactive ◦ 2010 – HTML 5 is entering the scene �An attempt to eliminate Flash, Silverlight, … by Martin Kruliš (v 1. 0) 4. 12. 2019 6

Web Technologies • • HTML (text) Pictures CSS Embedded Objects (Flash) Scripting (Java. Script) XMLHttp. Request (AJAX, AJAJ) HTML 5 … Server Client • Serving Plaintext • Binary Content • Dynamic Content (CGI) • Scripting (PHP) • AJAX, AJAJ • Caching, HPC, Cloud Solutions • Web. Sockets Integration • Node. JS • … Internet • HTTP (0. 9, 1. 0, 1. 1, 2) • HTTPS • Long-held HTTP (Comet) • Web. Sockets by Martin Kruliš (v 1. 0) Database 4. 12. 2019 7

Accessing Web Pages � How does it work? Address Bar v Browser http: //www. ksi. mff. cuni. cz/cs/lide. php Port 80 v DNS Server 195. 113. 20. 128 v Creates TCP Connection HTTP Protocol Server Client 195. 113. 20. 128 by Martin Kruliš (v 1. 0) 4. 12. 2019 8

Resource Identification � Uniform Resource Identifier (URI) ◦ Identification string with specific format <schema>: <hierarchical_part>? <query>#<fragment> ◦ Query and fragment parts are optional � Uniform Resource Locator (URL) ◦ An URI that describes a location of a resource protocol: //username: password@domain: port/path ? p 1=v 1&p 2=v 2#element_id ◦ Real world example http: //webik. ms. mff. cuni. cz/~krulis#last_part by Martin Kruliš (v 1. 0) 4. 12. 2019 9

HTTP � Hyper-Text Transfer Protocol ◦ Simple textual-based protocol �Operates over TCP channel ◦ Designed for data retrieval �Originally for plain text data �Extended to support any type and encoding (MIME) ◦ The user sends a HTTP Request �Specifying the details of the requested content ◦ The server replies with HTTP Response �Usually containing the requested data ◦ HTTP 1. 1 (RFC 2616) and HTTP/2 (RFC 7540) by Martin Kruliš (v 1. 0) 4. 12. 2019 10

HTTP � Hyper-Text Transfer Protocol Client sends a HTTP request Headers (what the client wants), cookies, POSTed form data Client (Browser) Headers specifying the response and the content user wanted (e. g. , a HTML file) Loads/Generates Content TCP channel established Web Server TCP channel closed…? by Martin Kruliš (v 1. 0) 4. 12. 2019 11

Web Page styles. css index. html <!DOCTYPE HTML> <html> <head> <title>Example</title> <link rel="stylesheet" type="text/css" href="styles. css"> </head> <body> Text contents. . . <img src="beaver. png" alt…. . . <video. . . > <source src="movie. mp 4" type="video/mp 4"> </video> body { font: 12 pt Calibri; } p { margin: 10 px; }. . . beaver. png movie. mp 4 by Martin Kruliš (v 1. 0) 4. 12. 2019 12

HTTP � Typical Web Page Loading TCP channel established HTML Document Pipelining Client (Browser) Web Server CSS Styles, Images, Scripts, … by Martin Kruliš (v 1. 0) 4. 12. 2019 13

HTML and Hypertext � Hyperlinks ◦ Elements on page are entangled with specific URL ◦ On click, the browser initiates browsing �Retrieve target page using GET request �Saves old URL in browser history (so we can go “back”) Web Page by Martin Kruliš (v 1. 0) 4. 12. 2019 14

World Wide Web � Twofold Nature of Web ◦ Current World Wide Web is sometimes referred to as Web of Documents �HTML as a format for representing documents published on the Web �URLs as unique global identifiers of documents �Hyperlinks between documents to link related documents on the Web ◦ Platform for web applications �HTML+CSS – UI presentation format �HTTP – form of remote procedure calls (RPC) �… by Martin Kruliš (v 1. 0) 4. 12. 2019 15

Web of Documents http: //. . . Web Page http: //example. com/page. html http: //. . . Web Page http: //. . . Web Page by Martin Kruliš (v 1. 0) 4. 12. 2019 16

Web Applications � Interactive Elements ◦ Hyperlinks – way to change application view ◦ Form controls – user inputs �Can be submitted and processed at server side � Dynamic Web Pages ◦ Server-side �The page is generated on demand (on request) ◦ Client-side �Script running inside a browser can handle user events and modify loaded HTML document by Martin Kruliš (v 1. 0) 4. 12. 2019 17

Forms � HTML Form ◦ Component of web page composed of UI controls �Text fields of various types �Select boxes, radio buttons �Check boxes �File uploads ◦ Smarter version of hyperlink �Sends user data and receive new page �HTTP method can be selected (GET, POST) ◦ Data are sent when a submit button is hit by Martin Kruliš (v 1. 0) 4. 12. 2019 18

Web Server � Serving Static Pages Apache configuration HTTP Request GET /myweb/index. html. . . /var/www/myweb/ ` Internet Client Web Server HTTP Response HTTP/1. 1 200 OK Content-Length: 1019 Content-Type: text/html; . . . <contents of index. html> index. html by Martin Kruliš (v 1. 0) 4. 12. 2019 19

Dynamic Pages (Server) � Common Gateway Interface ◦ One of the first standards for generating dynamic web content ◦ NSCA specification from 1993 how to invoke command line applications �Current version CGI 1. 1 (RFC 3875) from 2004 ◦ Specifies only the interface �Application may be written in any language �Important information and headers are set as environment variables, POST body is directed to std. input �Response is taken from the std. output by Martin Kruliš (v 1. 0) 4. 12. 2019 20

Dynamic Pages (Server) � Common Gateway Interface HTTP Request /var/www/myweb/ GET /myweb/app. cgi. . . ` stdin Internet stdout Client Web Server app. cgi HTTP Response HTTP/1. 1 200 OK Content-Length: 2049 Content-Type: text/html; . . . <contents generated by cgi> Database by Martin Kruliš (v 1. 0) 4. 12. 2019 21

Dynamic Pages (Server) � Fast CGI ◦ The CGI processes are already started and waiting for requests ◦ More effective interface � Scripting Language Modules ◦ Special modules integrated into HTTP server ◦ Interpret script files and serve their outputs � Application with Embedded HTTP Server ◦ Web application embeds HTTP server (as library) by Martin Kruliš (v 1. 0) 4. 12. 2019 22

Dynamic Pages (Server) � Improving CGI Concept HTTP Request GET /myweb/app. cgi. . . ` Internet Client Web Server Fast. CGI Server HTTP Response HTTP/1. 1 200 OK Content-Length: 2049 Content-Type: text/html; . . . <contents generated by cgi> Database by Martin Kruliš (v 1. 0) 4. 12. 2019 23

Dynamic Pages (Server) � Integrating Scripting Modules HTTP Request /var/www/myweb/ GET /myweb/index. php. . . ` mod_php Internet Client Web Server index. php HTTP Response HTTP/1. 1 200 OK Content-Length: 1984 Content-Type: text/html; . . . <contents generated by php> Database by Martin Kruliš (v 1. 0) 4. 12. 2019 24

Dynamic Pages (Server) � Dedicated Web Server for an Application HTTP Request GET /myweb/index. . . ` Internet Web Server Module Client Database Module HTTP Response HTTP/1. 1 200 OK Content-Length: 1984 Content-Type: text/html; . . . <contents generated by app> by Martin Kruliš (v 1. 0) 4. 12. 2019 25

Dynamic Pages (Client) � Java. Script ◦ Developed by Brendan Eich in Netscape as a scripting language for web browser (early 90’s) �C-like syntax �Dynamic, weakly typed, object-oriented with prototyping and functional aspects ◦ Named after Java for marketing reasons �But very different from Java ◦ Standardized by ECMA (also called ECMAScript) by Martin Kruliš (v 1. 0) 4. 12. 2019 26

Dynamic Pages (Client) � Java. Script in Browser ◦ Sandboxed, limited interactions with user ◦ DOM API �Allow manipulating loaded HTML document and CSS �Modifications are immediately visualized �Event model for handling user actions ◦ Other APIs �Browser window control, history, location (URL) �Animations, 3 D graphics, sounds �Data storage (inside browser) �Networking (HTTP requests, Web. Sockets, Web. RTC) �… by Martin Kruliš (v 1. 0) 4. 12. 2019 27

AJAX � Asynchronous Java. Script and XML ◦ A technique that combines three technologies �Java. Script �Asynchronous HTTP client API integrated in browser �XML or other semi-structured data format ◦ Script invokes HTTP transfer �Providing URL, method, callbacks, … ◦ The callback is invoked asynchronously �At the conclusion of the HTTP transfer �It may process the returned data (e. g. , update the contents of the web page) by Martin Kruliš (v 1. 0) 4. 12. 2019 28

Single Page Applications � Three-tire Applications HTTP Client HTML Web Server Business Logic by Martin Kruliš (v 1. 0) Database 4. 12. 2019 29

Web Application Architectures � Single Page Applications (SPA) Internet Client Application Frontend Browser downloads static content (HTML, JS, …) Web Server Static Contents AJAX, Web. Sockets, … HTML document and scripts (REST) API Example by Martin Kruliš (v 1. 0) 4. 12. 2019 30

Discussion by Martin Kruliš (v 1. 0) 4. 12. 2019 31