javascript promise practical example - hiun › talks ›...

39
JavaScript Promise Practical Example 2014. 10. 08 @ <divtag> developer meetup Hiun Kim ( [email protected] )

Upload: others

Post on 06-Jul-2020

4 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

JavaScript Promise Practical Example2014. 10. 08 @ <divtag> developer meetup

Hiun Kim ( [email protected] )

Page 2: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3
Page 3: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

http://jsconf.eu/2009/assets_c/RDahl_sw.jpg

Page 4: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

evented I/O for v8 javascript building fast, scalable network applications

Page 5: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

event-drivennon-blocking I/O

Page 6: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

Usually..blocking I/O

Page 7: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

RAM - 1DISK -100

Page 8: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

RAM - 1DISK -100

Network - 5000

Page 9: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

var result = db.query('SELECT * FROM Users');

Page 10: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

User Server DBreq

res

req

time passed..

res

123456789

101112

Page 11: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

User Server DBreq

res

req

time passed..

res

123456789

101112

Page 12: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

http://www.ohmynews.com/NWS_Web/View/at_pg.aspx?CNTN_CD=A0001748826

Page 13: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

event loop

Page 14: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

event loop

Calculation

Querying DB

Network I/O

Disk I/O

Page 15: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

event loop

Calculation

Querying DB

Network I/O

Disk I/O

Page 16: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

User Server DBreq1

res1

123456789

101112

req2

req3

req1

req2

req3

res2res3

res1res2res3

Page 17: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

User Server DBreq1

res1

123456789

101112

req2

req3

req1

req2

req3

res2res3

res1res2res3

Page 18: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

Callback

Page 19: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

var result = db.query('SELECT * FROM Users');

result.addListener('err', function (err) { //use err as a local variable });

result.addListener('result', function (result) { //use result as a local variable });

Page 20: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

db.query('SELECT * FROM Users', function (err, result) { //use result as a local variable });

Page 21: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

Continous Passing Style

Page 22: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

var fs = require('fs'); var data = 'a.txt';

fs.readFile(data, 'utf8', function (data1) { fs.readFile(data1, 'utf8', function (data2) { fs.readFile(data2, 'utf8', function (data3) { fs.readFile(data3, 'utf8', function (data4) { fs.readFile(data4, 'utf8', function (data5) {

//do stuff with data5

}); }); }); }); });

Page 23: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

Real World ScenarioSign Up

Page 24: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

sign up requires..

- receive data- validate data*- manipulate data- insert data*

Page 25: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

var email = req.body.email; var password = req.body.email;

if (blanky(email, password) === true || validator.isEmail(email) === false || password.length < 8) { res.send(400).end(); } else {

db.query('SELECT Email FROM Users WHERE ?', email, function (err, result) { if (err) { res.send(500).end(); } else if (result === 0) { res.send(409).end(); } else {

db.query('INSERT INTO Users VALUES (?, ?)', [email, password], function (err, result) { if (err) { res.send(500).end(); } else { req.session.email = email; res.send(200).end(); } }); } }); }

receive data

validate data

insert data

manipulate & insert data

Page 26: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

var email = req.body.email; var password = req.body.email;

if (blanky(email, password) === true || validator.isEmail(email) === false || password.length < 8) { res.send(400).end(); } else {

db.query('SELECT Email FROM Users WHERE ?', email, function (err, result) { if (err) { res.send(500).end(); } else if (result === 0) { res.send(409).end(); } else {

db.query('INSERT INTO Users VALUES (?, ?)', [email, password], function (err, result) { if (err) { res.send(500).end(); } else { req.session.email = email; res.send(200).end(); } }); } }); }

receive data

validate data

insert data

manipulate & insert data

Page 27: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

var email = req.body.email; var password = req.body.email;

if (blanky(email, password) === true || validator.isEmail(email) === false || password.length < 8) { res.send(400).end(); } else {

db.query('SELECT Email FROM Users WHERE ?', email) .then(function (result) { if (result === 0) { res.send(409).end(); } else { return db.query('INSERT INTO Users VALUES (?, ?)', [email, algo(password)]); } }) .then(function () { req.session.email = email; res.send(200).end(); }) .catch(function () { res.send(500).end(); }) .done(); }

receive data

validate data

insert data

manipulate & insert data

Page 28: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

promise provides..

- managing code complexity horizontally

- maintainable code- error handling at once

Page 29: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

How promise works??

Page 30: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

promise is..- returns a promise, not a callback- almost every module in npm returns a callback ;-(- you have to promisify or denodeify module to use in promise chain

Page 31: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

Applied Examples

Page 32: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

var Promise = require('bluebird');

var fs = Promise.promisifyAll(require('fs'));

fs.readFileAsync('sejong.json') .then(JSON.parse) .then(console.log) .done();

{ "location": "seoul" }

//sejong.json

Page 33: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

var Promise = require('bluebird');

var fs = Promise.promisifyAll(require('fs'));

fs.readFileAsync('sejong.json') .then(JSON.parse) .then(console.log) .done();

{ "location": "seoul" }

//sejong.json

{ location: 'seoul' }

//will print

Page 34: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

var Promise = require('bluebird');

var fs = Promise.promisifyAll(require('fs'));

fs.readFileAsync('sejong.json') .then(JSON.parse) .then(function (data) { console.log(data.location); }) .done();

{ "location": "seoul" }

//sejong.json

Page 35: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

var Promise = require('bluebird');

var fs = Promise.promisifyAll(require('fs'));

fs.readFileAsync('sejong.json') .then(JSON.parse) .then(function (data) { console.log(data.location); }) .done();

{ "location": "seoul" }

//sejong.json

seoul

//will print

Page 36: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

var Promise = require('bluebird');

var fs = Promise.promisifyAll(require('fs'));

fs.readFileAsync('sejong.json') .then(JSON.parse) .then(function (data) { var location = data.location; return location; }) .then(function (location) { return db.query('SELECT * FROM University WHERE ?', location); }) .then(function (list) { return [makeHttpRequest(list), location]; }) .spread(function (result, location) { console.log('request ' + result + 'university' + 'which in' + location); }) .catch(function () { console.log('Unknown error has occured!'); }) .catch(SyntaxError, function () { console.log('JSON syntax is not valid!'); }) .finally(function () { console.log(‘Program은 성공하거나 실패하거나.. 둘중 하나야'); }) .done();

Page 37: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

//module.js module.exports = function (school) { return new Promise(function (reject, resolve) { db.query('SELECT Name FROM Users WHERE School = ?', school, function (err, result) { if (err) { reject(err); } else { resolve(result); } }); }); };

//app.js var module = require('module.js');

module('Sejong University') .then(console.log) .catch(console.log) .done();

Page 38: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

ECMAScript 6June 2015

Page 39: JavaScript Promise Practical Example - Hiun › talks › javascript-promise-practical-example.pdf · User Server DB req1 res1 1 2 3 4 5 6 7 8 9 10 11 12 req2 req3 req1 req2 req3

QnA