As presented at DevDuck #1 - JavaScript meetup for developers (www.devduck.pl) Prezentacja z #1 spotkania DevDuck'a w Gliwicach (www.devduck.pl), spotkania mającego na celu poszerzanie wiedzy i wymianę doświadczeń z zakresu szeroko pojętego JS'a, a w szczególności Node.js/React.js i im pochodnych kończących się na ".js" :). Wykorzystane narzędzia: - https://github.com/FormidableLabs/spectacle - https://github.com/ajaxorg/ace ---- Spotkanie odbyło się w Gliwicach w siedzibie Brainhub (www.brainhub.eu)

1. CALLBACKS,
PROMISES,
GENERATORS

2. Adam Gołąb
Full Stack Developer at

3. In computer programming, a callback is a piece of executable code
that is passed as an argument to other code, which is expected to
call back (execute) the argument at some convenient time.
Callbacks

4. Good Practice
Run ►
function validate(email, cb) {
if (email.match(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+(.[a-zA-Z0-9]+)+$/)) {
return cb(null, email);
}
return cb(new Error('incorrect email address'));
}
validate('email@example.com', (err, email) => {
if (err) {
return console.log(err);
}
console.log('Successfully validated:', email);
});
Successfully validated: email@example.com
1
2
3
4
5
6
7
8
9
10
11
12
13

5. For a function to be asynchronous it needs to perform an
asynchronous operation. It needs to incorporate the argument
callback in handling the results of this asynchronous operation.
Only this way the function becomes asynchronous.
Asynchronous

6. Async Callback
Run ►
function callAsync(fn) {
setTimeout(fn, 0);
}
callAsync(() => console.log('callback function'));
console.log('after');
after
callback function
1
2
3
4
5
6

7. AJAX request
Run ►
const request = require('request');
request('http://localhost:3000/api', (err, res, body) => console.log(body));
Response from server
1
2
3

8. IO operation
Run ►
const fs = require('fs');
fs.readFile('./file.txt', 'utf-8', (err, data) => {
if(!err) {
console.log(data);
}
});
Hello from file
1
2
3
4
5
6
7

9. Pyramid from hell
Run ►
const request = require('request');
const fs = require('fs');
request('http://localhost:3000/api', (err, res, body) => {
if (!err) {
fs.readFile('./file.txt', 'utf-8', (err, data) => {
if (!err) {
[data, body].map((text, index) => {
console.log(index, text);
});
}
});
}
});
0 'Hello from filen'
1 'Response from server'
1
2
3
4
5
6
7
8
9
10
11
12
13
14

10. PromisesThe Promise object is used for asynchronous computations. A
Promise represents a value which may be available now, or in the
future, or never.
new Promise( function(resolve, reject) { ... } );

11. Promises
Run ►
const a = 4;
const b = 2;
const p = new Promise((resolve, reject) => {
if (b === 0) {
reject(new Error('Do not divide by zero'));
}
resolve(a / b);
});
p.then(value => console.log(value)).catch(err => console.error(err));
2
1
2
3
4
5
6
7
8
9
10

12. AJAX Fetch
Run ►
const fetch = require('node-fetch'); // there is no window.fetch on node.js
fetch('http://localhost:3000/api')
.then(res => res.text())
.then(body => console.log(body));
Response from server
1
2
3
4
5

13. Run ►
No more callback hellconst fetch = require('node-fetch');
const fs = require('fs');
function readFilePromised(file) {
const p = new Promise((resolve, reject) => {
fs.readFile(file, 'utf-8', (err, data) => {
if (err) {
reject(err);
}
resolve(data);
});
});
return p;
}
Promise.all([
readFilePromised('./file.txt'),
fetch('http://localhost:3000/api').then(r => r.text())
])
.then((responses) => responses.map((text, index) => {
console.log(index, text);
}));
0 'Hello from filen'
1 'Response from server'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

14. Generators
is a special routine that can be used to control the iteration
behaviour of a loop. In fact, all generators are iterators
Pausable functions

15. Run ►
Natural numbers generator
function *naturalNumbers() {
let x = 0;
while (true) {
x = x + 1;
yield x;
}
}
const generator = naturalNumbers();
console.log(generator.next());
console.log(generator.next());
console.log(generator.next());
{ value: 1, done: false }
{ value: 2, done: false }
{ value: 3, done: false }
1
2
3
4
5
6
7
8
9
10
11
12

16. Async generator
Run ►
const fetch = require('node-fetch');
const co = require('co');
co(function *() {
const uri = 'http://localhost:3000/api';
const response = yield fetch(uri);
const body = yield response.text();
console.log(body);
});
Response from server
1
2
3
4
5
6
7
8
9

17. Run ►
Co function implementation
const fetch = require('node-fetch');
function co(generator) {
const iterator = generator();
const iteration = iterator.next();
function iterate(iteration) {
if (iteration.done) {
return iteration.value;
}
const promise = iteration.value;
return promise.then(x => iterate(iterator.next(x)));
}
return iterate(iteration);
}
co(function *() {
const uri = 'http://localhost:3000/api';
const response = yield fetch(uri);
const body = yield response.text();
console.log(body);
});
Response from server
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

18. Questions?