Stateful web, developments, trends 1 Webtechnologie Lennart Herlaar.

Stateful web, developments, trends

1WebtechnologieLennartHerlaar

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.1Host: ws.example.comUpgrade: websocketConnection: UpgradeSec-WebSocket-Origin: http://ws.example.comSec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==

HTTP/1.1 101 Switching ProtocolsUpgrade: websocketConnection: UpgradeSec-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...

<!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

7WebtechnologieLennartHerlaar

Trends

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 http://localhost:8000/');

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 1 Webtechnologie Lennart Herlaar.

Documents

Transcript of Stateful web, developments, trends 1 Webtechnologie Lennart Herlaar.