Stateful web, developments, trends

Stateful web, developments, trends 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 GET /ws HTTP/1.1 Host: ws.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Origin: http://ws.example.com Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== • 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 function sendText() { var msg = { type: "message", text: document.getElementById("text").value, id: clientID, date: Date.now() }; mySocket.send(JSON.stringify(msg)); } HTTP/1.1 101 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);

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 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); } 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();

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... <!DOCTYPE HTML> <html manifest="demo.appcache"> <head> <title>Hello World</title> <script src="main.js"></script> <link rel="stylesheet" href="theme.css"> </head> ... </html> CACHE MANIFEST # 2014-03-26 v1.0.0 /theme.css /logo.png /main.js NETWORK: login.asp FALLBACK: /video/ /offline.html

Stateful web, developments, trends Trends Webtechnologie Lennart Herlaar

Gartner Hype Cycle

Node.js http.createServer( function (request, response) { response.writeHead(200, {'Content-Type': 'text/plain'}); response.end('Hello World\n'); } ).listen(8000); console.log('Server running at http://localhost:8000/'); • 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" 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); }); }); <script src="/socket.io/socket.io.js"></script> <script> var socket = io.connect('http://example.com'); socket.on('news', function (data) { console.log(data); socket.emit('my other event', { my: 'data' }); }); </script>

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...) <canvas id="example" width="200" height="200"> This text is displayed if your browser does not support HTML5 Canvas. </canvas> var example = document.getElementById('example'); var context = example.getContext('2d'); context.fillStyle = 'red'; context.fillRect(30, 30, 50, 50); <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg>

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

Stateful web, developments, trends