Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
10/02/2017, 12(27CSP in Javascript
Page 1 of 31http://localhost:3000/#/?export&_k=kuk2r7
CSP IN JAVASCRIPT
10/02/2017, 12(27CSP in Javascript
Page 2 of 31http://localhost:3000/#/?export&_k=kuk2r7
VINCENZOCHIANESE
https://github.com/XVincentX@D3DVincenthttps://vncz.js.org
BUGS INTRODUCER AT APIARY
10/02/2017, 12(27CSP in Javascript
Page 3 of 31http://localhost:3000/#/?export&_k=kuk2r7
COMMUNICATINGSEQUENTIALPROCESSES
10/02/2017, 12(27CSP in Javascript
Page 4 of 31http://localhost:3000/#/?export&_k=kuk2r7
Hard to reproduceHard to debugHard to test
SHARING THEMEMORY
Non determinismRace conditionsDeadlocks
THE PROBLEM:
10/02/2017, 12(27CSP in Javascript
Page 5 of 31http://localhost:3000/#/?export&_k=kuk2r7
Complexity and overheadLeakyHard to compose
MutexesSemaphoresAtomic operations...and a lot more
SOLUTIONS
10/02/2017, 12(27CSP in Javascript
Page 6 of 31http://localhost:3000/#/?export&_k=kuk2r7
Wait a moment...!!
10/02/2017, 12(27CSP in Javascript
Page 7 of 31http://localhost:3000/#/?export&_k=kuk2r7
We're using Javascript!Problem solved.
- Any of you, now
10/02/2017, 12(27CSP in Javascript
Page 8 of 31http://localhost:3000/#/?export&_k=kuk2r7
Ajax request - 1, 2, 3, 4Rendering - 1, 2
1234 done!12 done!"
1122 done!34 done!#
HIGH LEVEL TASKS EXAMPLE
10/02/2017, 12(27CSP in Javascript
Page 9 of 31http://localhost:3000/#/?export&_k=kuk2r7
COORDINATIONOF CONCURRENCY
10/02/2017, 12(27CSP in Javascript
Page 10 of 31http://localhost:3000/#/?export&_k=kuk2r7
Callbacksfunction publish() { getProduct('F010', function (err, product) { if (err) handleError(err); else getProductSales(product, function (err, sales) { if (err) handleError(err); else publishSales(sales, function (err, res) { if (err) handleError(err); else { // Do finally something useful } }); }); });}
10/02/2017, 12(27CSP in Javascript
Page 11 of 31http://localhost:3000/#/?export&_k=kuk2r7
http://slideslive.com/38894521/from-callbacks-to-promises
10/02/2017, 12(27CSP in Javascript
Page 12 of 31http://localhost:3000/#/?export&_k=kuk2r7
Promisesfunction publish() { return getProduct('F010') .then(getSales) .then(publisSales) .then(undefined, handleError);}
10/02/2017, 12(27CSP in Javascript
Page 13 of 31http://localhost:3000/#/?export&_k=kuk2r7
Generatorsco(function* publish() { try { const product = yield getProduct('F010'); const sales = yield getSales(product); yield publishSales(sales); } catch (e) { handleError(e); }});
10/02/2017, 12(27CSP in Javascript
Page 14 of 31http://localhost:3000/#/?export&_k=kuk2r7
Asyncasync function publish() { try { const product = await getProduct('F010'); const sales = await getSales(product); await publishSales(sales); } catch (e) { handleError(e); }}
10/02/2017, 12(27CSP in Javascript
Page 15 of 31http://localhost:3000/#/?export&_k=kuk2r7
PROMISES STILL HAVE SOME LIMITATIONS
10/02/2017, 12(27CSP in Javascript
Page 16 of 31http://localhost:3000/#/?export&_k=kuk2r7
Promises and eventsconst p1 = new Promise((resolve, reject) => { $('#btn').on('click', (evt) => { const className = evt.target.className; if (className === "tinapacchetella") { resolve(className); } else { reject(); } });});
p1.then((className) => alert(className));
Demo
10/02/2017, 12(27CSP in Javascript
Page 17 of 31http://localhost:3000/#/?export&_k=kuk2r7
Promises and events$('#btn2').on('click', (evt) => { const p1 = new Promise((resolve, reject) => { const className = evt.target.className; if (className === "tinapacchetella") { resolve(className); } else { reject(); }; });
p1.then((className) => alert(className));});
Demo
10/02/2017, 12(27CSP in Javascript
Page 18 of 31http://localhost:3000/#/?export&_k=kuk2r7
High order patternObservable (RxJs)Communicating Sequential Processes
10/02/2017, 12(27CSP in Javascript
Page 19 of 31http://localhost:3000/#/?export&_k=kuk2r7
PipesThey are simple cat file | grep searchThey are composableThey are parallelIt does not leak
10/02/2017, 12(27CSP in Javascript
Page 20 of 31http://localhost:3000/#/?export&_k=kuk2r7
C.S.P.<command> :.--- <simple command>l<structured command><simple command> :.--- <null command>l<assignment command>I<input command>l<output command><structured command> :.--- <alternative command>I<repetitive command>l<parallel command><null command> :.--- skip<command list> :.--- {<declaration>; I<command>;} <command>
Original paper 1978
COMMUNICATING SEQUENTIAL PROCESSES
10/02/2017, 12(27CSP in Javascript
Page 21 of 31http://localhost:3000/#/?export&_k=kuk2r7
No OS processesThey do not share memory
PROCESSES
10/02/2017, 12(27CSP in Javascript
Page 22 of 31http://localhost:3000/#/?export&_k=kuk2r7
Pass data structuresInstrinsic configurable blocking mechanism
CHANNELS
10/02/2017, 12(27CSP in Javascript
Page 23 of 31http://localhost:3000/#/?export&_k=kuk2r7
ONE TO ONE
10/02/2017, 12(27CSP in Javascript
Page 24 of 31http://localhost:3000/#/?export&_k=kuk2r7
ONE TO MANY
10/02/2017, 12(27CSP in Javascript
Page 25 of 31http://localhost:3000/#/?export&_k=kuk2r7
MANY TO ONE
10/02/2017, 12(27CSP in Javascript
Page 26 of 31http://localhost:3000/#/?export&_k=kuk2r7
MANY TO MANY
10/02/2017, 12(27CSP in Javascript
Page 27 of 31http://localhost:3000/#/?export&_k=kuk2r7
Time to code!Basic home made exampleCSP to coordinate callbacksCSP to handle DOM events
10/02/2017, 12(27CSP in Javascript
Page 28 of 31http://localhost:3000/#/?export&_k=kuk2r7
Transducer supportHighest order patternUsed in production (CircleCI)
Solid theory concepts (it works)Simple imperative API compared to RxJsBuilt in backpressure
CSP RECAP
10/02/2017, 12(27CSP in Javascript
Page 29 of 31http://localhost:3000/#/?export&_k=kuk2r7
Idea from futureDifferent, opinionated implementationsLack of integrations
CSP CAVEATS
10/02/2017, 12(27CSP in Javascript
Page 30 of 31http://localhost:3000/#/?export&_k=kuk2r7
10/02/2017, 12(27CSP in Javascript
Page 31 of 31http://localhost:3000/#/?export&_k=kuk2r7
THANKS!