Master ¡Informa-que ¡-‑ ¡Université ¡Paris-‑Sud ¡ 2/7/15 ¡ Javascript ¡ • More ¡powerful ¡than ¡you ¡think ¡ Some ¡tools ¡for ¡building ¡ ¡ • Func-onal: ¡func-ons ¡are ¡first-‑class ¡objects ¡ § 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 ¡ • Object-‑oriented: ¡based ¡on ¡the ¡no-on ¡of ¡ • Func-onal: ¡func-ons ¡are ¡first-‑class ¡objects ¡ prototype ¡instead ¡of ¡the ¡no-on ¡of ¡class ¡ § func%on ¡currify(f, ¡x) ¡{ ¡ § var ¡p ¡= ¡{ ¡ ¡ ¡ ¡ ¡ ¡ return ¡ func%on (y) ¡{ ¡ ¡ ¡ ¡ ¡x: ¡10, ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ return ¡f(x, ¡y); ¡ ¡ ¡ ¡ ¡y: ¡25, ¡ ¡ ¡ ¡ ¡ ¡}; ¡ ¡ ¡ ¡ ¡moveBy: ¡ func%on (dx, ¡dy) ¡{ ¡ } ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡this.x ¡+= ¡dx; ¡this.y ¡+= ¡dy ¡ § func%on ¡add(a, ¡b) ¡{ ¡ return ¡a+b; ¡} ¡ ¡ ¡ ¡ ¡} ¡ } ¡ § var ¡add4 ¡= ¡currify(add, ¡4); ¡ § p.moveBy(5, ¡10); ¡ ¡// ¡p ¡= ¡{ ¡x: ¡15, ¡y: ¡35, ¡moveBy: ¡…} ¡ § ¡add4(2); ¡// ¡6 ¡ Michel ¡Beaudouin-‑Lafon ¡-‑ ¡CSCW ¡& ¡Groupware ¡ 1 ¡
Master ¡Informa-que ¡-‑ ¡Université ¡Paris-‑Sud ¡ 2/7/15 ¡ Javascript ¡ Javascript ¡ • Each ¡object ¡inherits ¡from ¡its ¡ prototype ¡ • We ¡can ¡re-‑create ¡a ¡class-‑based ¡system ¡ § var ¡protoPoint ¡= ¡{ ¡ § func%on ¡Point() ¡{ ¡ ¡ ¡ ¡ ¡// ¡this ¡is ¡a ¡constructor ¡func-on ¡ ¡ ¡ ¡x: ¡0, ¡y: ¡0, ¡ ¡ ¡ ¡this.x ¡= ¡0; ¡this.y ¡= ¡0 ¡ ¡ ¡ ¡moveBy: ¡ func%on (dx, ¡dy) ¡{ ¡ ¡ ¡ ¡ ¡// ¡also ¡assigns ¡this.prototype ¡ ¡ ¡this.x ¡+= ¡dx; ¡this.y ¡+= ¡dy; ¡ } ¡ ¡ ¡ ¡} ¡ } ¡ § var ¡p ¡= ¡ new ¡Point(); ¡// ¡calls ¡Point ¡with ¡a ¡new ¡object ¡ § var ¡p ¡= ¡{}; ¡p.prototype ¡= ¡protoPoint; ¡ § // ¡this ¡is ¡equivalent ¡to ¡a ¡“method” ¡of ¡“class” ¡Point ¡ // ¡note ¡: ¡the ¡above ¡does ¡NOT ¡work ¡– ¡see ¡next ¡slide ¡ Point.prototype.moveBy ¡= ¡ func%on (dx, ¡dy) ¡{ ¡ // ¡(a ¡constructor ¡is ¡the ¡only ¡way ¡to ¡define ¡a ¡prototype) ¡ ¡this.x ¡+= ¡dx; ¡this.y ¡+= ¡dy; ¡ § p.x; ¡ ¡ ¡ ¡// ¡0 ¡(from ¡the ¡prototype) ¡ } ¡ ¡ p.x ¡= ¡10; ¡ ¡// ¡x ¡is ¡now ¡a ¡property ¡of ¡p ¡ § p.moveBy(5, ¡10); ¡ ¡ ¡// ¡p ¡= ¡{x:5, ¡y:10}; ¡ p.moveBy(5, ¡10); ¡ ¡// ¡p ¡= ¡{x: ¡15, ¡y: ¡10} ¡ Typescript ¡ Node.js ¡ • Use ¡javascript ¡to ¡program ¡web ¡app ¡servers ¡ • Javascript ¡with ¡types ¡ • Module ¡system ¡ – func-on ¡fib(n: ¡number): ¡number ¡{ ¡… ¡} ¡ – Modules ¡are ¡installed ¡with ¡npm, ¡ ¡ • Classes ¡ the ¡Node ¡Package ¡Manager: ¡npm ¡install ¡<package> ¡ – ¡class ¡A ¡extends ¡Object ¡{ ¡ – Packages ¡can ¡be ¡local ¡or ¡global ¡(npm ¡–g) ¡ ¡ ¡ ¡ ¡ ¡constructor() ¡{ ¡… ¡} ¡ – A ¡package ¡is ¡imported ¡with ¡require: ¡ ¡ ¡ ¡ ¡ ¡doSomething(n:number) ¡{ ¡… ¡} ¡ ¡ ¡ ¡ ¡ var ¡fs ¡= ¡require('fs'); ¡ ¡} ¡ ¡ ¡ ¡ ¡fs.fileExists(…) ¡ • Translates ¡to ¡plain ¡Javascript ¡ – Node ¡has ¡built-‑in ¡modules ¡to ¡access ¡the ¡OS: ¡ ¡file ¡system, ¡processes, ¡HTTP ¡protocol, ¡… ¡ • Requires ¡descrip-on ¡files ¡for ¡external ¡libraries ¡ – DefinitelyTypes ¡web ¡site ¡ Michel ¡Beaudouin-‑Lafon ¡-‑ ¡CSCW ¡& ¡Groupware ¡ 2 ¡
Master ¡Informa-que ¡-‑ ¡Université ¡Paris-‑Sud ¡ 2/7/15 ¡ Node.js ¡ Node.js ¡ • Node ¡implements ¡a ¡reac-ve ¡programming ¡ ¡ • Using ¡con-nua-ons ¡(or ¡callbacks) ¡ ¡ model ¡based ¡on ¡events ¡and ¡event ¡handlers ¡ to ¡program ¡in ¡an ¡asynchronous ¡world ¡ • Asynchronous ¡event ¡handling ¡ – Many ¡node ¡modules ¡use ¡callbacks, ¡which ¡are ¡called ¡ § var ¡Emirer ¡= ¡require('events').EventEmirer; ¡ when ¡the ¡task ¡is ¡actually ¡performed: ¡ var ¡chatRoom ¡= ¡new ¡Emirer(), ¡par-cipants ¡= ¡[]; ¡ § var ¡fs ¡= ¡require('fs'); ¡ § chatRoom.on('hello', ¡ func%on (name) ¡{ ¡ ¡ ¡ ¡ ¡console.log(name, ¡'says ¡Hi!'); ¡ ¡ var ¡fd ¡= ¡fs.open('myFile', ¡'w'); ¡ }); ¡ if ¡(fd) ¡fs.write(fd, ¡'Hello'); ¡// ¡wrong: ¡file ¡not ¡opened! ¡ § chatRoom.on('hello', ¡ func%on (name) ¡{ ¡ § fs.open('myFile', ¡'w', ¡ func%on ¡(err, ¡fd) ¡{ ¡ ¡ ¡ ¡ ¡par-cipants.push(name); ¡ ¡ ¡ ¡ ¡ if ¡(! ¡err) ¡fs.write(fd, ¡'Hello', ¡ func%on (err) ¡{ ¡…}); ¡ }); ¡ }); ¡ § chatRoom.emit('hello', ¡'Alice'); ¡ Promises ¡ Promises ¡ • Facilitate ¡asynchronous ¡programming ¡ • Instead ¡of ¡being ¡nested ¡like ¡callbacks, ¡ Promises ¡are ¡chained ¡ • Available ¡as ¡library ¡ (Q, ¡bluebird, ¡promised-‑io, ¡…) ¡ • fs.open(path, ¡‘w’) ¡ • An ¡asynchronous ¡call ¡returns ¡a ¡Promise ¡object ¡ ¡ ¡ ¡ ¡ ¡.then(func-on(file) ¡{ ¡ instead ¡of ¡taking ¡a ¡callback ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡return ¡file.write(‘hello ¡world’); ¡ • The ¡then ¡func-on ¡of ¡the ¡promise ¡is ¡used ¡to ¡ ¡ ¡ ¡ ¡}).then(func-on(file) ¡{ ¡ specify ¡what ¡to ¡do ¡when ¡the ¡call ¡succeeds: ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡return ¡file.close(); ¡ – var ¡fs ¡= ¡require(‘promised-‑io/fs’); ¡ ¡ ¡ ¡ ¡}).catch(func-on(err) ¡{ ¡ fs.readdir(path).then(func-on(files) ¡{ ¡ ¡ ¡console.log(‘could ¡not ¡open’, ¡path); ¡ ¡ ¡console.log(files.join(‘\n’)) ¡ ¡ ¡ ¡ ¡}) ¡ }); ¡ Michel ¡Beaudouin-‑Lafon ¡-‑ ¡CSCW ¡& ¡Groupware ¡ 3 ¡
Master ¡Informa-que ¡-‑ ¡Université ¡Paris-‑Sud ¡ 2/7/15 ¡ Node.js ¡– ¡Express ¡HTTP ¡server ¡ Node.js ¡– ¡socket.io ¡ • Basis ¡of ¡many ¡web ¡applica-ons ¡ • Communica-on ¡between ¡web ¡page ¡and ¡server ¡ § % ¡npm ¡install ¡express ¡ • Server ¡: ¡ § var ¡express ¡= ¡require('express'), ¡ – % ¡npm ¡install ¡socket.io ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡app ¡= ¡express(); ¡ – var ¡io ¡= ¡require('socket.io').listen(hrp); ¡ app.get('/', ¡ func%on (request, ¡response) ¡{ ¡ io.on('connec-on', ¡ func%on ¡(client) ¡{ ¡ ¡ ¡ ¡ ¡response.send('Hello ¡World'); ¡ ¡ ¡ ¡ ¡client.on('msg', ¡ func%on ¡(data) ¡{ ¡ }); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡// ¡send ¡to ¡all ¡other ¡clients ¡ app.listen(8080); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡client.broadcast.emit('msg', ¡data); ¡ § // ¡serve ¡sta-c ¡files ¡ ¡ ¡ ¡ ¡}); ¡ app.use(express.sta-c(__dirname ¡+ ¡'/public')); ¡ }); ¡ Node.js ¡– ¡socket.io ¡ Node.js ¡-‑ ¡sharejs ¡ • Client ¡(web ¡page) ¡ • Shared ¡text ¡strings ¡and ¡objects ¡synchronized ¡ – <script ¡src="/socket.io/socket.io.js"></script> ¡ through ¡opera-onal ¡transforma-on ¡ (experimental) ¡ <script> ¡ § var ¡client ¡= ¡require('share').client; ¡ var ¡client ¡= ¡io ¡(); ¡ client.open('myDoc', ¡'text', ¡url, ¡ func%on (err, ¡doc) ¡{ ¡ client.on('connect', ¡ func%on ¡() ¡{ ¡ ¡ ¡ ¡ ¡doc.insert('Hello ¡world', ¡0); ¡ ¡ ¡client.emit('msg', ¡'Hello'); ¡ ¡ ¡ ¡ ¡doc.on('change', ¡ func%on (op) ¡{ ¡ }); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡console.log(doc.snapshot); ¡ client.on('msg', ¡ func%on (data) ¡{ ¡ ¡ ¡ ¡ ¡$('#chat').append(data); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡}); ¡ }); ¡ }); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ </script> ¡ Michel ¡Beaudouin-‑Lafon ¡-‑ ¡CSCW ¡& ¡Groupware ¡ 4 ¡
Recommend
More recommend
