Stateful web, developments, trends 1 Webtechnologie Lennart Herlaar

Inhoud •Stateful web •AJAX, JSON •(HTML5) developments •Trends

Websockets •(HTML5) Standaard voor meerdere full-duplex communicatiekanalen via één TCP poort (80) •Omzeilen van blokkades van andere poorten •En voor webapps met persistent tweeweg behoefte! •HTTP-compatible handshake •Upgrade mechanisme naar Websocket protocol •Websocket frames over dezelfde TCP connectie •Feitelijk een ander application layer protocol •JavaScript API; event driven •Protocol: IETF RFC6455; API: W3C

Websockets •Geïnitieerd door de client; long-polling alternatief •Same Origin Policy niet persé afgedwongen •Vergelijkbaar met CORS •ws:// en wss:// URI schemes •Vergt uiteraard wel een Websocket aware server GET /ws HTTP/1.1 Host: ws.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Origin: Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== HTTP/ Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= var myWebSocket = new WebSocket("ws://ws.example.com/ws"); myWebSocket.send("Hello World!"); myWebSocket.close(); myWebSocket.addEventListener("message", function(e) { alert("Received Message: " + e.data);}, false); function sendText() { var msg = { type: "message", text: document.getElementById("text").value, id: clientID, date: Date.now() }; mySocket.send(JSON.stringify(msg)); }

Web workers •(HTML5) Standaard voor langlopende JavaScripts die draaien in de achtergrond •Heavy-weight, batch processing •Losstaand van JavaScript voor UI afhandeling •Geen DOM access, maar communicatie via messages •Twee types: dedicated en shared workers •Werking van cross-document messaging, SSE, websockets en web workers lijkt op elkaar •Event driven, non-blocking var worker = new Worker("worker.js"); worker.addEventListener("message", function(e) { document.getElementById("result").textContent = e.data; } worker.postmessage("Your workday has begun!"); worker.terminate(); var n = 1; search: while (true) { n += 2; for (var i = 2; i <= Math.sqrt(n); i += 1) if (n % i == 0) continue search; // found a prime! postMessage(n); }

Application cache •HTML5 standaard voor offline application cache •Downloaden van een versie die offline draait •Op basis van een cache manifest file •Offline browsing, snelheid, server resources •CACHE MANIFEST, NETWORK, FALLBACK •Let op: caching is permanent •Tot het expliciet opschonen van de cache •Tot het wijzigen van de cache manifest file •Tweemaal laden voor een actuele versie... Hello World... CACHE MANIFEST # v1.0.0 /theme.css /logo.png /main.js NETWORK: login.asp FALLBACK: /video/ /offline.html

Stateful web, developments, trends 7 Webtechnologie Lennart Herlaar

Gartner Hype Cycle

Node.js •JavaScript "framework" voor internet applicaties •Met name webservers (server side JavaScript!) •Minimale overhead, maximale scalability •Event driven, non-blocking; real-time applicaties •JavaScript engine en diverse ingebouwde libraries •Socket.IO •Module voor Node.js voor Websockets, inclusief cross-browser fallbacks (flash, long-polling, iframe) •Heeft ook een client component •"jQuery voor Websockets" http.createServer( function (request, response) { response.writeHead(200, {'Content-Type': 'text/plain'}); response.end('Hello World\n'); } ).listen(8000); console.log('Server running at var io = require('socket.io').listen(80); io.sockets.on('connection', function (socket) { socket.emit('news', { hello: 'world' }); socket.on('my other event', function (data) { console.log(data); }); var socket = io.connect(' socket.on('news', function (data) { console.log(data); socket.emit('my other event', { my: 'data' }); });

NoSQL •Verzamelterm voor DBMSen die bepaalde relationele aspecten loslaten •NoREL is een betere naam •Geen SQL, geen schema, geen joins, geen ACID •Horizontale schaalbaarheid •Key-value stores, document stores,... •Past soms beter bij 't soort data en 't real-time aspect •CouchDB •Opslag van JSON documenten •Views als JavaScript functies •HTTP API

HTML5 Canvas, SVG, WebGL •Canvas is een HTML5 element voor het dynamisch renderen van 2D-vormen en bitmaps •Scriptable vanuit JavaScript •Flash killer? •Canvas versus Scalable Vector Graphics (SVG) •SVG betreft vector graphics •Een SVG afbeelding is een XML document •SVG is "higher level": scene graph, event handlers •WebGL: JavaScript API voor native 3D graphics •Maakt gebruik van het canvas element (maar...) This text is displayed if your browser does not support HTML5 Canvas. var example = document.getElementById('example'); var context = example.getContext('2d'); context.fillStyle = 'red'; context.fillRect(30, 30, 50, 50); <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>

Mobile web •"Het web voor mobieltjes loopt 5 jaar achter" •Matige ondersteuning standaarden, geen JavaScript •Nu: full browser, 4-core processor, retina display •Van native apps naar HTML5? •Fundamentele verschillen •Touch; moeizame keyboard input •Screen real-estate; ontbreken meerdere windows •Bandbreedte, en vooral: datalimieten! •Location awareness •Steeds minder technologie gerelateerd; usability