Introductie Webtechnologie Lennart Herlaar Lennart Herlaar - UU

Deze week Lees de informatie op de website van het vak Kies een onderwerp voor je website Reserveringssysteem is al enige tijd open! Zoek naar bronmateriaal, begin met schrijven Zorg dat je de tooling op orde krijgt Eerste practicumsessie: vandaag na college Assistentie bij tooling Assistentie bij het van start gaan met je onderwerp Lennart Herlaar - UU

Centraal architectuur Introductie Centraal architectuur diagram Webtechnologie Lennart Herlaar Lennart Herlaar - UU

Centraal architectuur diagram Form, parameters Parameters, code Web browser Webserver Interpreter HTML HTML File access HTML+code SQL Result set Statische files RDBMS Lennart Herlaar - UU

Centraal architectuur diagram Form, parameters, … Web Browser + Applicatie Parameters, code Webserver Interpreter HTML, CSS, JavaScript, JSON, … HTML, JavaScript, JSON, … File access File access File SQL Result set File Files RDBMS Lennart Herlaar - UU

Eigenschappen (vervolgd) Webtechnologie Introductie Lennart Herlaar Lennart Herlaar - UU

Eigenschappen revisited Client/server Bovenop HTTP over TCP/IP Page based requests ("one resource at a time") Ontbreken van state Client side aspecten Server side aspecten Multi-user aspecten Security aspecten Belang van standaarden Lennart Herlaar - UU

Het glas is half-leeg? Page based requests leiden tot veel overhead Ontbreken van state leidt tot veel overhead Veel security issues zijn hieraan gerelateerd Er zijn (te) veel standaarden in (te) veel versies Browsers ondersteunen lang niet alle standaarden, en niet op de juiste wijze Als web developer ben je hier continu mee bezig (sorry!) Waarom dan überhaupt webapplicaties? Lennart Herlaar - UU

Het glas is half-vol! "Iedereen" heeft een browser En iedereen weet 'm te bedienen Je applicatie heeft een zero-install footprint De browser handelt de user-interface af HTTP biedt heel veel zaken wèl Evenals de webserver, het RDBMS en de taal Standaarden en tools worden volwassen Lennart Herlaar - UU

Wat is het alternatief? Een eigen application layer protocol bedenken Een eigen server schrijven Eigen clients voor elk platform schrijven Server installeren bij ISP Downloads van clients en updates faciliteren Gebruikers over de streep trekken Ondersteuning bieden Lennart Herlaar - UU

The web programming environment Webtechnologie Lennart Herlaar Lennart Herlaar - UU

Inhoud Markup, hypertext en HTML Browsers en servers HyperText Transfer Protocol URIs, headers, persistence Scripting en integratie Lennart Herlaar - UU

Markup Syntactisch onderscheidbare annotatie van tekst Vaak in-line toegepast Procedural markup Beschrijft presentatie, stijl, layout, verwerking Descriptive markup Beschrijft structuur en semantiek Descriptive markup is veelal domeinspecifiek Loskoppeling van presentatie en structuur Presentatie vastleggen in een stylesheet Lennart Herlaar - UU

Hypertext Tekst met (actieve) referenties Doorbreekt lineariteit van teksten Vannevar Bush: memex (1945) Ted Nelson: "hypertext" en "hypermedia" (1963) Douglas Engelbart: Mother of all demos (1968) Apple Computer: HyperCard (1987) Tim Berners-Lee: WWW (1989-1991) "By now the word 'hypertext' has become generally accepted for branching and responding text, but the corresponding word 'hypermedia', meaning complexes of branching and responding graphics, movies and sound – as well as text – is much less used. Instead they use the strange term "interactive multimedia": this is four syllables longer, and does not express the idea of extending hypertext." – Ted Nelson, 1992 "HyperText is a way to link and access information of various kinds as a web of nodes in which the user can browse at will. It provides a single user-interface to large classes of information (reports, notes, data-bases, computer documentation and on-line help). We propose a simple scheme incorporating servers already available at CERN... A program which provides access to the hypertext world we call a browser..." – Tim Berners-Lee, 1990 Lennart Herlaar - UU

HyperText Markup Language HTML heeft z'n wortels in de Standard Generalized Markup Language (SGML) Meer daarover bij client side representation Eerste versie onderdeel van het werk van Tim Berners-Lee "HTML tags", een lijst van zo'n 20 elementen In de basis heel eenvoudig Syntactisch onderscheidbare tags Nesting van tags, negeren van extra whitespace De kracht zit in de hyperlinks Lennart Herlaar - UU

HTML for dummies Maar… <html> <head> <title>Hello world</title> </head> <body> <h1>My First Heading</h1> <p>My <b>first</b> paragraph.</p> <p> Including a <a href="index.html">link</a> </p> </body> </html> Maar… Lennart Herlaar - UU

The web programming environment Browsers en servers Webtechnologie Lennart Herlaar Lennart Herlaar - UU

Browsers Client voor het HTTP protocol (User Agent) Gereedschap voor rendering van markup Veel varianten, beperkt aantal rendering engines Gecko, Webkit, Blink, Trident, (Presto) Ondersteuning van standaarden zeer divers (X)HTML(5), CSS(2/3), JavaScript, … Dilemma's van fabrikanten Market share / concurrentieoverwegingen, imago, legacy aspecten, ontwikkeltijd, Gartner Hype Cycle Lennart Herlaar - UU

Lennart Herlaar - UU

Lennart Herlaar - UU

Browser marktaandeel

Browser marktaandeel W3Schools W3Counter Lennart Herlaar - UU

Webservers Server voor het HTTP protocol Beperkt aantal opties, verschillend in insteek Apache web server, Microsoft IIS Multiprocess / multithreaded, één per request Nginx Asynchronous event driven C10k probleem Apache Tomcat Integratie van webserver en applicatie Lennart Herlaar - UU

Webserver marktaandeel Lennart Herlaar - UU

The web programming environment HTTP Webtechnologie Lennart Herlaar Lennart Herlaar - UU

HyperText Transfer Protocol WWW = HTML + HTTP + URIs HTTP is een eenvoudig stateless request-response protocol Server luistert (meestal) op poort 80 Client maakt TCP connectie met server (afsplitsing) Client stuurt HTTP request Server handelt request af en stuurt HTTP response Server sluit TCP connectie met client Lennart Herlaar - UU

HTTP request HTTP request begint met een request method GET – Haal een resource op HEAD – Haal de header van een resource op PUT – Plaats/vervang een resource POST – Verwerk de meegezonden data DELETE – Verwijder een resource OPTIONS – Geef de ondersteunde methoden TRACE – Echo het request … Lennart Herlaar - UU

HTTP request Overige onderdelen van een HTTP request Resource Protocol versie Header lines Message body GET en HEAD moeten ondersteund worden GET, HEAD, OPTIONS en TRACE zijn "safe" PUT, DELETE (en safe methods) zijn idempotent PUT en POST hebben een message body Meest gebruikt zijn GET en POST GET /index.html HTTP/1.1 Host: www.example.com User-Agent: Mozilla/5.0 […] Accept: text/html, image/png Lennart Herlaar - UU

HTTP response Protocol versie, status code, header lines, message body HTTP/1.1 200 OK Date: Fri, 07 Feb 2014 08:01:34 GMT Server: Apache/2.2.21 (Unix) (Red-Hat/Linux) Last-Modified: Sat, 01 Feb 2014 23:11:55 GMT Content-Length: 438 Connection: close Content-Type: text/html; charset=utf-8 <html> […] Lennart Herlaar - UU

Status codes 1xx – Informational 2xx – Success 3xx – Redirection 4xx – Client error 5xx – Server error 200 OK, 301 Moved Permanently, 304 Not Modified, 401 Unauthorized, 404 Not Found, 500 Internal Server Error Niet verwarren met Server not found error Lennart Herlaar - UU

The web programming environment URIs, headers, persistence Webtechnologie Lennart Herlaar Lennart Herlaar - UU

URL, URN, URI Tot nu toe pagina en resource uitwisselbaar Officiële term is resource Uniform Resource Locator Geeft de unieke locatie van een resource op een netwerk weer, inclusief de wijze van benadering Uniform Resource Name Geeft de unieke naam van een resource weer Uniform Resource Identifier Overkoepelend, identificeert uniek een resource Lennart Herlaar - UU

URI voorbeelden Absolute en relatieve locaties Schemes, namespaces http://www.cs.uu.nl/docs/vakken/b2wt/index.html http://lennart:geheim@cs.uu.nl:8080/cijfers.php? student=0036123&cijfer=9#resultaat Practicum%20opgave.html ../../../colleges.txt #sectie01 ftp://ftp.cs.uu.nl/pub mailto:l.herlaar@uu.nl urn:isbn:0470916591 urn:isan:0000-0000-9E59-0000-O-0000-0000-2 Case sensitive? Lennart Herlaar - UU

The gory details (Sterk) vereenvoudigde grammatica voor URLs RFC3986 – URIs : Generic Syntax url ::= scheme address scheme ::= http:// | ftp:// | mailto: | file:// | ... address ::= full-domain/path-to-doc [#anchor] full-domain ::= host.domainname[:portnr] domainname ::= domain . domainname | domain domain ::= string-without-whitespace-and-;:& path-to-doc ::= /-separated-strings-without- whitespace-and-;:& Lennart Herlaar - UU

URL encoding / decoding Bijzondere karakters in een URI Spatie, control, :/@&=?%, diakritische tekens, enz. Voor "normaal" gebruik in een URI is encoding / decoding nodig, ook wel percent-encoding % teken met ASCII waarde als hexadecimaal getal Spatie, ASCII code 32, 20 hexadecimaal, dus %20 Overal waar de URI gebruikt wordt Chinese URLs? Internationalized Resource Identifier Lennart Herlaar - UU

HTTP request en response GET /index.html HTTP/1.1 Host: www.example.com User-Agent: Mozilla/5.0 […] Accept: text/html, image/png HTTP/1.1 200 OK Date: Fri, 07 Feb 2014 08:01:34 GMT Server: Apache/2.2.21 (Unix) (Red-Hat/Linux) Last-Modified: Sat, 01 Feb 2014 23:11:55 GMT Content-Length: 438 Connection: close Content-Type: text/html; charset=utf-8 <html> […] Lennart Herlaar - UU

HTTP headers Vele tientallen (optionele) headers gedefinieerd Welke headers hangt af van de HTTP versie HTTP/1.0 versus HTTP/1.1 Veelal gericht op content negotiation en efficiënt gebruik van de bandbreedte De onderhandeling is "server-driven" Lennart Herlaar - UU

HTTP headers Compression Language MIME type Character set Accept-Encoding: gzip, identity Content-Encoding: gzip Accept-Language: fr; q=1.0, en; q=0.5 Content-Language: en-US Later meer hierover! Accept: text/html; q=1.0, image/jpeg; q=0.6, */*; q=0.1 Accept-Charset: utf-8 Content-Type: text/html; charset=utf-8 Lennart Herlaar - UU

HTTP headers Range request Caching Persistent connection Range: bytes=500-999 Content-Range: bytes 500-999/3573 If-Modified-Since: Mon, 27 Jan 2014 10:12:43 GMT If-None-Match: "69af74da0860cdc288ad309d058282f2" Last-Modified: Mon, 27 Jan 2014 10:12:43 GMT ETag: "69af74da0860cdc288ad309d058282f2" Cache-Control: no-cache Connection: close Connection: keep-alive Lennart Herlaar - UU

Poorten en sockets Een poort is een "brievenbus" binnen het OS Een proces kan zich koppelen aan een poort Een socket is een eindpunt voor communicatie Lokaal IP adres en poortnummer Remote IP adres en poortnummer (bij TCP) Transport protocol (TCP, UDP, …) Een TCP verbinding wordt geïdentificeerd aan de hand van een 4-tuple De transportlaag gebruikt deze informatie voor (de)multiplexing Lennart Herlaar - UU

TCP verbindingen Officiële IANA poorten voor HTTP: 80 – HTTP 443 – HTTPS 8080 – HTTP (alt) Lennart Herlaar - UU

Persistent connections Close Client Server Client Server Keep-Alive t 3-way TCP handshake incl. request 3-way TCP handshake incl. request > 2*RTT Response Response TCP disconnect 2 requests 2 responses 3-way TCP handshake incl. request 4 requests 4 responses Response Etc. TCP disconnect TCP disconnect Etc. Ready! Lennart Herlaar - UU

Persistence versus state Verwar persistent connections niet met state Persistent connections betreffen state op TCP niveau Op HTTP niveau is er geen state Echt niet? Nouja, stiekem toch wel ergens iets van… Headers zijn een krachtig "mod" mechanisme Headers zijn in de regel bereikbaar vanuit je scripting taal Later meer hierover! Set-Cookie: UserID=darkhelmet; Max-Age=3600; Version=1 Lennart Herlaar - UU

(wacht op volgende request) Zelf aan de slag? Eenvoudige webserver maken is niet moeilijk Beperkt aantal methods en headers Vaak ook libraries beschikbaar 1 proces/thread per request Start proces/ thread Hoofdproces/thread, luistert op poort 80 Start proces/ thread (wacht op volgende request) Request Request Response Response Lennart Herlaar - UU

Voorbeeld webserver(tje) void loop() { EthernetClient client = server.available(); if (client) { boolean currentLineIsBlank = true; while (client.connected()) { if (client.available()) { char c = client.read(); if (c == '\n' && currentLineIsBlank) { client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println(); // payload goes here! […] } client.stop(); byte mac[] = {0xDE,0xAD,0xBE,0xEF,0xFE,0xED}; IPAddress ip(192,168,1,177); EthernetServer server(80); void setup() { Ethernet.begin(mac, ip); server.begin(); } "Put the fun back into learning computing" – Rapberry Pi Foundation Lennart Herlaar - UU

Request For Comments Details over protocollen zijn te vinden in RFCs RFC2616 – HTTP/1.1 RFC3986 – URIs Maar ook: TCP, IP, DHCP, DNS, … Internet Engineering Task Force (IETF) Peer review; veel strikter dan het klinkt (X)HTML(5)? RFC2322 – peg-DHCP Lennart Herlaar - UU