Networking & The Web. HCID 520 User Interface Software & Technology

Size: px

Start display at page:

Download "Networking & The Web. HCID 520 User Interface Software & Technology"

Geraldine Hunter
5 years ago
Views:

1 Networking & The HCID 520 User Interface Software & Technology

2 Uniform Resource Locator (URL) HTTP v0.9

3 Uniform Resource Locator (URL) Scheme/Protocol 1991 HTTP v0.9

4 Uniform Resource Locator (URL) Scheme/Protocol Host 1991 HTTP v0.9

5 Uniform Resource Locator (URL) Host Scheme/Protocol Port 1991 HTTP v0.9

6 Uniform Resource Locator (URL) Host Path Scheme/Protocol Port 1991 HTTP v0.9

7 1992 Line Mode Browser

8 WorldWide, first graphical browser

9 Mosaic, commercialized as Netscape

10 Server-Side Client-Side Server Browser Database

11 Server-Side Client-Side Server Browser Go to URL Database

12 Server-Side Client-Side Server HTTP Request Browser Go to URL Database

13 Server-Side Client-Side Route Request Server HTTP Request Browser Go to URL Database

14 Server-Side Client-Side Route Request Process Data Server HTTP Request Browser Go to URL Database

15 Server-Side Client-Side Route Request Process Data Server HTTP Request Browser Go to URL SQL Database

16 Server-Side Client-Side Route Request Process Data Build Response Server HTTP Request Browser Go to URL SQL Database

17 Server-Side Client-Side Route Request Process Data Build Response Send Response Server HTTP Request Browser Go to URL SQL Database

18 Server-Side Client-Side Route Request Process Data Build Response Send Response Server HTTP Request HTTP Response Browser Go to URL SQL Database

19 Server-Side Client-Side Route Request Process Data Build Response Send Response Server HTTP Request HTTP Response Browser Go to URL Get Response SQL Database

20 Server-Side Client-Side Route Request Process Data Build Response Send Response Server HTTP Request HTTP Response Browser Go to URL Get Response Render Page SQL Database

21 Request Response Headers Content

22 Server-Side Client-Side SQL Server HTTP Request HTTP Response Browser Database

23 Server-Side Server Server Technologies Apache (basic server) Java Servlets PHP Ruby on Rails (Ruby) Django (Python) Node.js / JavaScript Browser and many others HTTP Request HTTP Response Client-Side SQL Database Databases MySQL Postgres SQLite MongoDB and many others

24 Server-Side Client-Side Server HTTP Request HTTP Response Browser SQL What about interactivity? Database

25 Server-Side Client-Side Server HTTP Request HTTP Response Browser SQL Database What about interactivity? In the early days, users could submit forms. The server would process the results and return a new page.

26 Mosaic, commercialized as Netscape

28 Netscape Navigator Internet Explorer 1995 JavaScript created... in 10 days

29 Netscape Navigator Internet Explorer 1997 DHTML & Proprietary DOMs

30 Netscape Navigator Internet Explorer 2000 XMLHttpRequest

31 Netscape Navigator Internet Explorer 2001 Internet Explorer 6

32 Internet Explorer 2001 Internet Explorer 6

33 Firefox Internet Explorer Firefox released 2004

34 Firefox Internet Explorer XMLHttpRequest standardized ("AJAX") Firefox released 2004

35 Server-Side Client-Side Route Request Process Data Build Response Send Response Server HTTP Request HTTP Response Browser Go to URL Get Response Render Page SQL Database

36 Server-Side Client-Side Route Request Process Data Build Response Send Response Server HTTP Request HTTP Response Browser Go to URL Get Response Render Page SQL (HTML, CSS, etc.) Database

37 Server-Side Client-Side Server JavaScript UI (HTML) Database

38 Server-Side Client-Side Server JavaScript Call UI (HTML) Database

39 Server-Side Client-Side Server HTTP Request JavaScript Call UI (HTML) Database

40 Server-Side Client-Side Route Request Server HTTP Request JavaScript Call UI (HTML) Database

41 Server-Side Client-Side Route Request Process Data Server HTTP Request JavaScript Call UI (HTML) Database

42 Server-Side Client-Side Route Request Process Data Server HTTP Request JavaScript Call UI (HTML) SQL Database

43 Server-Side Client-Side Route Request Process Data Build Response Server HTTP Request JavaScript Call UI (HTML) SQL Database

44 Server-Side Client-Side Route Request Process Data Build Response Send Response Server HTTP Request JavaScript Call UI (HTML) SQL Database

45 Server-Side Client-Side Route Request Process Data Build Response Send Response Server HTTP Request HTTP Response JavaScript Call UI (HTML) SQL Database

46 Server-Side Client-Side Route Request Process Data Build Response Send Response Server HTTP Request HTTP Response JavaScript Call Update UI (HTML) SQL Database

47 Server-Side Client-Side (XML/JSON) Route Request Process Data Build Response Send Response Server HTTP Request HTTP Response JavaScript Call Update UI (HTML) SQL (XML/JSON) Database

48 JavaScript Object Notation (JSON) Basic Types (Primitives) Boolean true false Number String "hello" No Value null Advanced Types Object {"key": value} Array [value, value,...]

49 JavaScript Object Notation (JSON) [true, false, true, true, false]

50 JavaScript Object Notation (JSON) [true, false, true, true, false] Array of booleans.

51 JavaScript Object Notation (JSON) [true, false, true, true, false] Array of booleans. [5, 0.491, 80, 29.41, ]

52 JavaScript Object Notation (JSON) [true, false, true, true, false] Array of booleans. [5, 0.491, 80, 29.41, ] Array of numbers.

53 JavaScript Object Notation (JSON) [true, false, true, true, false] Array of booleans. [5, 0.491, 80, 29.41, ] Array of numbers. ["whiskey", "tango", "foxtrot"]

54 JavaScript Object Notation (JSON) [true, false, true, true, false] Array of booleans. [5, 0.491, 80, 29.41, ] Array of numbers. ["whiskey", "tango", "foxtrot"] Array of string.

55 JavaScript Object Notation (JSON) {"fruit": "apples", "amount": 2}

56 JavaScript Object Notation (JSON) {"fruit": "apples", "amount": 2} Object with two keys and a string and number value.

57 JavaScript Object Notation (JSON) {"fruit": "apples", "amount": 2} Object with two keys and a string and number value. {"fruits": ["apples", "bananas"], "amount": 2}

58 JavaScript Object Notation (JSON) {"fruit": "apples", "amount": 2} Object with two keys and a string and number value. {"fruits": ["apples", "bananas"], "amount": 2} Object with an array and number value.

59 JavaScript Object Notation (JSON) {"fruit": "apples", "amount": 2} Object with two keys and a string and number value. {"fruits": ["apples", "bananas"], "amount": 2} Object with an array and number value. [{"fruit": "apples"}, 4, true, null]

60 JavaScript Object Notation (JSON) {"fruit": "apples", "amount": 2} Object with two keys and a string and number value. {"fruits": ["apples", "bananas"], "amount": 2} Object with an array and number value. [{"fruit": "apples"}, 4, true, null] Array of values.

61 XMLHttpRequest (XHR) Server-Side Server Client-Side JavaScript Call UI (HTML) var xhr = new XMLHttpRequest(); Database

62 XMLHttpRequest (XHR) var xhr = new XMLHttpRequest(); Server-Side Server Database HTTP Request Client-Side JavaScript Call UI (HTML) // Make the request xhr.open("get", "//graph.facebook.com/v2.5/me", true); xhr.send();

63 XMLHttpRequest (XHR) Server-Side Server HTTP Request Client-Side JavaScript Call UI (HTML) var xhr = new XMLHttpRequest(); Database // Make the request xhr.open("get", "//graph.facebook.com/v2.5/me", true); xhr.send(); HTTP Method "GET", "POST", "PUT", "DELETE", etc.

64 XMLHttpRequest (XHR) Server-Side Server HTTP Request Client-Side JavaScript Call UI (HTML) var xhr = new XMLHttpRequest(); Database // Make the request xhr.open("get", "//graph.facebook.com/v2.5/me", true); xhr.send(); HTTP Post Content "name=arvind& location=seattle" HTTP Method "GET", "POST", "PUT", "DELETE", etc.

65 XMLHttpRequest (XHR) Server-Side Server HTTP Request Client-Side JavaScript Call UI (HTML) var xhr = new XMLHttpRequest(); Database // Make the request xhr.open("get", "//graph.facebook.com/v2.5/me", true); xhr.send(); HTTP Post Content "name=arvind& location=seattle" URL HTTP Method "GET", "POST", "PUT", "DELETE", etc.

66 XMLHttpRequest (XHR) Server-Side Server HTTP Request Client-Side JavaScript Call UI (HTML) var xhr = new XMLHttpRequest(); Database // Make the request xhr.open("get", "//graph.facebook.com/v2.5/me", true); xhr.send(); HTTP Post Content "name=arvind& location=seattle" URL HTTP Method "GET", "POST", "PUT", "DELETE", etc. Asynchronous? i.e., should execution wait for xhr.send().

67 XMLHttpRequest (XHR) var xhr = new XMLHttpRequest(); Server-Side Route Request Process Data Build Response Send Response Server SQL Database HTTP Request HTTP Response Client-Side JavaScript Call UI (HTML) // Handle the response xhr.onreadystatechange = function() { }; // Make the request xhr.open("get", "//graph.facebook.com/v2.5/me", true); xhr.send();

68 XMLHttpRequest (XHR) var xhr = new XMLHttpRequest(); Server-Side Route Request Process Data Build Response Send Response Server SQL Database HTTP Request HTTP Response Client-Side JavaScript Call UI (HTML) // Handle the response xhr.onreadystatechange = function() { if (xhr.readystate == 4 && xhr.status == 200) { } }; // Make the request xhr.open("get", "//graph.facebook.com/v2.5/me", true); xhr.send();

69 XMLHttpRequest (XHR) var xhr = new XMLHttpRequest(); Server-Side Route Request Process Data Build Response Send Response Server SQL Database HTTP Request HTTP Response Client-Side JavaScript Call UI (HTML) // Handle the response xhr.onreadystatechange = function() { if (xhr.readystate == 4 && xhr.status == 200) { } }; // Make the request xhr.open("get", "//graph.facebook.com/v2.5/me", true); xhr.send(); XHR operation complete.

70 XMLHttpRequest (XHR) var xhr = new XMLHttpRequest(); Server-Side Route Request Process Data Build Response Send Response Server SQL Database HTTP Request HTTP Response Client-Side JavaScript Call UI (HTML) // Handle the response xhr.onreadystatechange = function() { if (xhr.readystate == 4 && xhr.status == 200) { } }; // Make the request xhr.open("get", "//graph.facebook.com/v2.5/me", true); xhr.send(); XHR operation complete. HTTP Status Code. 200 (OK)

71 XMLHttpRequest (XHR) var xhr = new XMLHttpRequest(); Server-Side Route Request Process Data Build Response Send Response Server SQL Database HTTP Request HTTP Response Client-Side JavaScript Call UI (HTML) // Handle the response xhr.onreadystatechange = function() { if (xhr.readystate == 4 && xhr.status == 200) { var response = JSON.parse(xhr.responseText); } }; // Make the request xhr.open("get", "//graph.facebook.com/v2.5/me", true); xhr.send();

72 XMLHttpRequest (XHR) Libraries to the rescue! E.g., jquery: $.get("url", function(text) { }); $.getjson("url", function(json) { }); $.post("url", data, function() { });

73 Discussion Questions

74 The Semantic Gap How does reducing the semantic gap by having more compatible designs improve the user experience? Christopher It is a very interesting concept but I don t know why I would like to have a self describing api? Consuming api is usually a targeted activity rather than an exploratory one with predefined flows which api-consumer solicits from a api-provider. Ankit It seems like solving the Semantic Challenge will require some sort of AI for a computer to understand what a document means. Matthew If companies were to institute this standard, could this create an environment where it was easier for developers to talk to APIs, or where services like Siri could learn the standard for APIs to be able to interact with them without site-specific programming? Lyle

75 What about interaction initiated by the server?

77 Sockets var socket = new Socket("ws://hcid-520.com/api");

78 Sockets var socket = new Socket("ws://hcid-520.com/api"); New URL scheme for Sockets. ws : http :: wss : https

79 Sockets var socket = new Socket("ws://hcid-520.com/api"); // Send a message to the server socket.onopen = function() { socket.send("hello"); };

80 Sockets var socket = new Socket("ws://hcid-520.com/api"); // Send a message to the server socket.onopen = function() { socket.send("hello"); }; Can be any JSON data types, including binary data (e.g., images).

81 Sockets var socket = new Socket("ws://hcid-520.com/api"); // Send a message to the server socket.onopen = function() { socket.send("hello"); }; // Receive messages from the server socket.onmessage = function(msg) { console.log(msg.data); };

82 Sockets Libraries to the rescue (again!). E.g., socket.io: var socket = io("ws://hcid-520.com/api"); socket.send("ant", mousex, mousey); socket.on("ant", function(mousex, mousey) { });

Networking & The Web. HCID 520 User Interface Software & Technology

Networking & The Web. HCID 520 User Interface Software & Technology Networking & The Web HCID 520 User Interface Software & Technology Uniform Resource Locator (URL) http://info.cern.ch:80/ 1991 HTTP v0.9 Uniform Resource Locator (URL) http://info.cern.ch:80/ Scheme/Protocol