stateful web, developments, trends 1 webtechnologie lennart herlaar
Post on 23-May-2015
230 Views
Preview:
TRANSCRIPT
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
top related