Javascript More powerful than you think Some tools for - PowerPoint PPT Presentation

Master ¡Informa-que ¡-­‑ ¡Université ¡Paris-­‑Sud ¡ 1/11/13 ¡ Javascript ¡ • More ¡powerful ¡than ¡you ¡think ¡ Some ¡tools ¡for ¡building ¡ ¡ • Func-onal ¡+ ¡Object-­‑oriented ¡ – func-on ¡map(a, ¡f) ¡{ ¡ web-­‑based ¡groupware ¡ ¡ ¡ ¡ ¡ ¡var ¡sum ¡= ¡0; ¡ ¡ ¡ ¡ ¡ ¡for ¡(var ¡i ¡= ¡0; ¡i ¡< ¡a.length; ¡i++) ¡ Michel ¡Beaudouin-­‑Lafon ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡sum ¡+= ¡f(a[i]); ¡ mbl@lri.fr ¡ ¡ ¡ ¡ ¡ ¡return ¡sum; ¡ } ¡ map([1, ¡2, ¡3], ¡func-on(x) ¡{ ¡return ¡x*x ¡}); ¡// ¡14 ¡ Javascript ¡ Javascript ¡ – var ¡p ¡= ¡{ ¡ – func-on ¡PointConstructor() ¡{ ¡ ¡ ¡ ¡ ¡x: ¡10, ¡y: ¡25, ¡ ¡ ¡ ¡this.x ¡= ¡0; ¡this.y ¡= ¡0 ¡ ¡ ¡ ¡ ¡moveBy: ¡func-on(dx, ¡dy) ¡{ ¡ } ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡this.x ¡+= ¡dx; ¡this.y ¡+= ¡dy ¡ PointConstructor.prototype.moveBy ¡= ¡ ¡ ¡ ¡ ¡} ¡ func-on(dx, ¡dy) ¡{ ¡ } ¡ ¡this.x ¡+= ¡dx; ¡this.y ¡+= ¡dy; ¡ } ¡ – var ¡p ¡= ¡new ¡PointConstructor(); ¡ – p.moveBy(5, ¡10); ¡ ¡// ¡p ¡= ¡{ ¡x: ¡15, ¡y: ¡35, ¡moveBy: ¡…} ¡ p.moveBy(5, ¡10); ¡ Michel ¡Beaudouin-­‑Lafon ¡-­‑ ¡CSCW ¡& ¡Groupware ¡ 1 ¡

Master ¡Informa-que ¡-­‑ ¡Université ¡Paris-­‑Sud ¡ 1/11/13 ¡ Node.js ¡ Node.js ¡– ¡Express ¡HTTP ¡server ¡ • Use ¡javascript ¡to ¡program ¡web ¡app ¡servers ¡ • Basis ¡of ¡many ¡web ¡applica-ons ¡ – var ¡express ¡= ¡require('express'), ¡ • Asynchronous ¡event ¡handling ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡app ¡= ¡express.createServer(); ¡ – var ¡Emifer ¡= ¡require('events').EventEmifer; ¡ app.get('/', ¡func-on(req, ¡res) ¡{ ¡ emifer ¡= ¡new ¡Emifer(); ¡ ¡ ¡ ¡ ¡res.send('Hello ¡World'); ¡ emifer.on(‘hello’, ¡func-on(name) ¡{ ¡ }); ¡ ¡ ¡ ¡ ¡console.log(‘Hello ¡‘, ¡name); ¡ app.listen(8080); ¡ }); ¡ – // ¡serve ¡sta-c ¡files ¡ emifer.emit(‘hello’, ¡‘Alice’); ¡ app.use(express.sta-c(__dirname ¡+ ¡'/public')); ¡ • Streams: ¡general ¡event-­‑driven ¡streams ¡ Node.js ¡– ¡socket.io ¡ Node.js ¡– ¡socket.io ¡ • Communica-on ¡between ¡web ¡page ¡and ¡server ¡ • Client ¡(web ¡page) ¡ • Server ¡: ¡ – <script> ¡ var ¡server ¡= ¡io.connect(); ¡ – var ¡io ¡= ¡require('socket.io').listen(80); ¡ server.on('connect', ¡func-on ¡() ¡{ ¡ io.sockets.on('connec-on', ¡func-on ¡(client) ¡{ ¡ ¡ ¡server.emit('msg', ¡'Hello'); ¡ ¡ ¡ ¡ ¡client.on('msg', ¡func-on ¡(data) ¡{ ¡ }); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡// ¡send ¡to ¡all ¡other ¡clients ¡ server.on('msg', ¡func-on(data) ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡client.broadcast.emit('msg', ¡data); ¡ ¡ ¡ ¡ ¡$('#chat').append(data); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡}); ¡ }); ¡ }); ¡ </script> ¡ Michel ¡Beaudouin-­‑Lafon ¡-­‑ ¡CSCW ¡& ¡Groupware ¡ 2 ¡

Master ¡Informa-que ¡-­‑ ¡Université ¡Paris-­‑Sud ¡ 1/11/13 ¡ Node.js ¡-­‑ ¡sharejs ¡ Node-­‑webkit ¡ • Shared ¡text ¡strings ¡and ¡objects ¡synchronized ¡ • Combines ¡a ¡node.js ¡server ¡and ¡a ¡web ¡browser ¡ through ¡opera-onal ¡transforma-on ¡ • Access ¡to ¡desktop: ¡files, ¡menus, ¡… ¡ – sharejs.open('blag', ¡'text', ¡func-on(error, ¡doc) ¡{ ¡ • Desktop-­‑based ¡web ¡applica-ons ¡ ¡ ¡ ¡ ¡var ¡elem ¡= ¡document.getElementById('pad'); ¡ • Avoids ¡web ¡protocol ¡issues ¡(same-­‑origin, ¡…) ¡ ¡ ¡ ¡ ¡doc.afach_textarea(elem); ¡ }); ¡ • Global ¡namespace ¡shared ¡between ¡ ¡ node ¡server ¡and ¡every ¡web ¡window ¡ dnode ¡ dnode ¡ • Client ¡ • Remote ¡func-on ¡call ¡for ¡node.js ¡and ¡browser ¡ – var ¡dnode ¡ = ¡require('dnode'); ¡ • Server: ¡ var ¡d ¡ = ¡dnode.connect(5004); ¡ – var ¡dnode ¡ = ¡require('dnode'); ¡ d.on('remote', ¡ func*on ¡(remote) ¡{ ¡ var ¡server ¡ = ¡dnode({ ¡ ¡ ¡ ¡ ¡remote.transform('beep', ¡ func*on ¡(s) ¡{ ¡ ¡ ¡ ¡ ¡transform ¡ : ¡ func*on ¡(s, ¡cb) ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡console.log('beep ¡=> ¡' ¡ + ¡s); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡d.end(); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡cb(s.replace(/[aeiou]{2,}/,'oo').toUpperCase()) ¡ ¡ ¡ ¡ ¡ ¡}); ¡ ¡ ¡ ¡} ¡ }); ¡ }); ¡ – $ ¡node ¡server.js ¡& ¡ server.listen(5004); ¡ $ ¡node ¡client.js ¡ beep ¡=> ¡BOOP ¡ Michel ¡Beaudouin-­‑Lafon ¡-­‑ ¡CSCW ¡& ¡Groupware ¡ 3 ¡

Master ¡Informa-que ¡-­‑ ¡Université ¡Paris-­‑Sud ¡ 1/11/13 ¡ Debugging ¡ Debugging ¡ • In ¡the ¡browser: ¡web ¡inspector ¡ • Node.js ¡ – Built-­‑in ¡debugger: ¡ ¡ • % ¡node ¡debug ¡myscript.js ¡ – Remote ¡debugging ¡with ¡web ¡inspector ¡ • Node-­‑inspector ¡package ¡ • % ¡node ¡–debug-­‑brk ¡myscript.js ¡ • % ¡node-­‑inspector ¡& ¡ • Browse ¡to ¡hfp://localhost:8080/debug?port=5858 ¡ Project ¡ideas ¡ • Shared ¡drawing ¡tool ¡(doodling) ¡ • Shared ¡browsing ¡ • Shared ¡annota-on ¡of ¡any ¡web ¡page ¡ • Mul--­‑room ¡chat ¡ • … ¡ Michel ¡Beaudouin-­‑Lafon ¡-­‑ ¡CSCW ¡& ¡Groupware ¡ 4 ¡