-
12 |
13 |
-
98 |
- 99 | 100 | 101 |
-
107 |
- 108 | 1 109 | 110 |
- 111 | 2 112 | 113 |
- 114 | 3 115 | 116 |
Hello,
122 | Foobar
125 | ```
126 |
127 |
128 | ```javascript
129 | let root = document.querySelector('#foo').createShadowRoot();
130 | let clone = document.importNode(document.querySelector('#greeting').content, true);
131 | root.appendChild(clone);
132 | ```
133 |
134 | ---
135 |
136 | # Template елемента
137 |
138 | Позволява да добавим markup в документа без той да бъде обработван от браузъра.
139 |
140 | Не е нужно да използваме `` тагове за добавяне на темплейти онлайн (както се случваше с Backbone и Handlebars).
141 |
142 | ---
143 |
144 | # Content елемента
145 |
146 | Позволява да правим "content projection". В случая чрез този елемент, можем да проектираме съдържание от light DOM в shadow DOM.
147 |
148 | ---
149 |
150 | # Асинхронна обработка на код в браузъра
151 |
152 | - `addEventListener` - Добавяне на код обслужващ събития
153 | - `removeEventListener` - Изтриване на код обслужващ събития
154 | - `setTimeout` - Добавяне на код, който да бъде изпълнен след определен интервал
155 | - `clearTimeout`
156 | - `setInterval` - Добавяне на код, който да бъде изпълняван на регулярни интервали от време
157 | - `clearInterval`
158 | - `XMLHttpRequest`
159 | - `fetch`
160 | - `Promise`
161 | - `requestAnimationFrame`
162 | - `WebSocket`
163 | - `WebWorkers`
164 | - и други
165 |
166 | ---
167 |
168 | # DOM събития
169 |
170 | Обработката на събития в DOM ни помага да реагираме при настъпването на определени "условия".
171 | ---
172 | # Примери за събития
173 |
174 | * _mouseenter_ - курсорът на мишката бива преместен върху даден DOM елемент
175 | * _click_ - натискане на левия бутон на мишката при преместен курсор върху даден DOM елемент
176 | * _keydown_ - натискане на бутон на клавиатурата при фокус на даден елемент
177 | * _load_ - при зареждане на даден елемент (изображение, iframe, и други)
178 | * и други...
179 | ---
180 | # Обработка на събития
181 |
182 | W3C стандартизира метода `addEventListener` на Node (`Node.prototype.addEventListener`),
183 | който се използва за добавяне на функции, които обработват събития от определен (зададен) тип, към даден елемент.
184 |
185 | (заб: тук под Node нямаме предвид Node.JS, а класът Node в DOM)
186 |
187 | ---
188 | # addEventListener
189 |
190 | `element.addEventListener(EVENT_NAME, HANDLER, CAPTURING)`
191 |
192 | - `EVENT_NAME` - задава име на събитие, което искаме да обработваме с
193 | - `HANDLER` - callback, който е отговорен за обработката на събитието
194 | - `CAPTURING` - задава начина на "propagation" на събитията
195 |
196 | ---
197 |
198 | # addEventListener
199 |
200 | `addEventListener` ни позволява да добавяме няколко callback-а за едно
201 | и също събитие към даден елемент.
202 |
203 | ---
204 |
205 | # addEventListener
206 |
207 | Пример:
208 |
209 | ```javascript
210 | document.body.addEventListener('click', function (e) {
211 | console.log('The user just clicked onto the body');
212 | }, false);
213 | ```
214 | ---
215 |
216 | # event oбекта
217 |
218 | Всеки callback получава като аргумент event обект. Някои от полетата на този event обект са:
219 |
220 | * offsetY - Задава или връща y-координатата на курсора на мишката спрямо горния-ляв ъгъл на
221 | позициониран родителски елемент (ancestor).
222 | * offsetY - Задава или връща x-координатата на курсора на мишката спрямо горния-ляв ъгъл на
223 | позициониран родителски елемент (ancestor).
224 | * metaKey - Булева стойност индикираща дали meta бутонът на клавиатурата е натистнат
225 | * altKey - Булева стойност индикираща дали alt бутонът на клавиатурата е натистнат
226 | * shiftKey - Булева стойност индикираща дали shift бутонът на клавиатурата е натистнат
227 | * ctrlKey - Булева стойност индикираща дали ctrl бутонът на клавиатурата е натистнат
228 |
229 | ---
230 |
231 | * clientY - Връща y позицията на курсора по време на събитието спрямо горния десен ъгъл на window.
232 | * clientX - Връща x позицията на курсора по време на събитието спрямо горния десен ъгъл на window.
233 | * pageY - Връща y позицията на курсора по време на събитието спрямо document.
234 | * pageX - Връща x позицията на курсора по време на събитието спрямо document.
235 | * which - Връща unicode символ или номер на бутона на мишката, който е довел до събитието.
236 | * keyCode - Връща идентификатор на бутона на клавиатурата, който е натистнат.
237 | * cancelBubble - Задава дали искаме да прекратим bubbling на събитието.
238 | * currentTarget - Връща текущия елемент, за който даденият еvent handler е извикан.
239 | * target - Връща елемента, който е довел до задействане на събитието (източника).
240 | * type - Връща типа на събитието (click, mousedown...).
241 | ---
242 |
243 | # Bubbling & Capturing
244 |
245 | 
246 |
247 | ---
248 |
249 | # Bubbling
250 |
251 | Стандартният начин за "propagation" на събитията е bottom-up - от child елемент към parent елемент:
252 |
253 | ```html
254 |
255 |
256 |
257 | ```
258 |
259 | ```javascript
260 | document.getElementById('parent').addEventListener('click', function () {
261 | console.log('parent');
262 | });
263 | document.getElementById('child').addEventListener('click', function () {
264 | console.log('child');
265 | });
266 | ```
267 |
268 | ---
269 |
270 | # Capturing
271 |
272 | Алтернативен начин за обработка на събития е т.нар. capturing, където обработката се извършва в обратен ред:
273 |
274 | ```html
275 |
276 |
277 |
278 | ```
279 |
280 | ```javascript
281 | document.getElementById('parent').addEventListener('click', function () {
282 | console.log('parent');
283 | }, true);
284 | document.getElementById('child').addEventListener('click', function () {
285 | console.log('child');
286 | }, true);
287 | ```
288 | ---
289 |
290 | # on\*
291 |
292 | Друг начин за добавяне на събития е чрез полетата на елементите `onEVENT_NAME`:
293 |
294 | ```
295 | document.body.onclick = function (e) {
296 | console.log('Click on the body');
297 | };
298 |
299 | ```
300 |
301 | Недостатък
302 |
303 | При него може да се добавя само еднин event handler, който евентуално да делегира изпълнението на
304 | други методи.
305 |
306 | Предимство
307 |
308 | Като възможно *предимство* може да се отбележи факта, че имаме директен достъп до event handler без предварително да сме запазили референция към него.
309 |
310 | По-добре не използвайте този начин за добавяне на event handlers.
311 |
312 | ---
313 |
314 | # Премахване на събития
315 |
316 | Премахването на събития се осъществява с метода: `removeEventListener`.
317 | Той приема като аргумент име на събитие и callback, който да бъде премахнат.
318 |
319 | **Метода трябва да бъде извикан с двата параметъра**, в противен случай
320 | handler(s) няма да бъдат премахнат(и).
321 |
322 | ```javascript
323 |
324 | var handler = function (e) {
325 | //...
326 | };
327 | el.addEventListener('click', handler);
328 |
329 | //...
330 |
331 | el.removeEventListener('click', handler);
332 | ```
333 |
334 | ---
335 |
336 | # Премахване на събития
337 |
338 | В случая, в който добавяме event handler от вида `onEVENT_NAME` премахването на даден handler може да се
339 | осъществи като:
340 |
341 | ```javasctipt
342 | document.body.onclick = function () {};
343 | //...
344 | document.body.onclick = undefined;
345 | ```
346 |
347 | ---
348 |
349 | # Memory leaks
350 |
351 | Много честа причина за memory leaks в JavaScript са именно забравени еvent handlers.
352 |
353 | Заради създадения closure променливите от външните scope-ове на event handlers не могат да бъдат
354 | премахнати, което води до невъзможност паметта да бъде освободена.
355 |
356 |
--------------------------------------------------------------------------------
/lectures/05-02-promises-and-generators-short.markdown:
--------------------------------------------------------------------------------
1 | ### Continuation Passing
2 |
3 | ```javascript
4 | fs.readFile(inputFile, function(err, data) {
5 | if (err) return res.status(500).send(err);
6 | process1(data, function(err, data) {
7 | if (err) return res.status(500).send(err);
8 | process2(data, function(err, data) {
9 | if (err) return res.status(500).send(err);
10 | process3(data, function(err, data) {
11 | if (err) return res.status(500).send(err);
12 | fs.writeFile(outputFile, data, function(err) {
13 | if (err) return res.status(500).send(err);
14 | res.status(200).send('processed successfully using callback hell');
15 | });
16 | });
17 | });
18 | });
19 | });
20 | ```
21 | ---
22 | ###Named Continuation Passing
23 |
24 | ```javascript
25 | fs.readFile(inputFile, onReadFile);
26 |
27 | function onReadFile(err, data) {
28 | if (err) return res.status(500).send(err)
29 | process1(data, onProcess1)
30 | }
31 |
32 | function onProcess1(err, data) {
33 | if (err) return res.status(500).send(err)
34 | process2(data, onProcess2)
35 | }
36 |
37 | function onProcess2(err, data) {
38 | if (err) return res.status(500).send(err)
39 | process3(data, onProcess3)
40 | }
41 |
42 | function onProcess3(err, data) {
43 | if (err) return res.status(500).send(err)
44 | fs.writeFile(outputFile, data, onWriteFile)
45 | }
46 |
47 | function onWriteFile(err) {
48 | if (err) return res.status(500).send(err)
49 | res.status(200).send('processed successfully using callback hell')
50 | }
51 | ```
52 | ---
53 |
54 | #Promises ES2015 (ES6)
55 |
56 | ---
57 | ###Какво са promises?
58 | Promise е обект който се използва за отлагане.
59 |
60 | Той представлява операция, която все още не е завършила, но се очаква да завърши.
61 |
62 | ```javascript
63 | new Promise(executor);
64 | new Promise(function(resolve, reject) { ... });
65 | ```
66 |
67 | Този конструктор взима като аргумент функция с два аргумента: resolve, reject.
68 |
69 | Тези два аргумента са функции като едната се използва когато искаме да си изпълним обешанието, а другата когато искаме да го отхвърлим.
70 |
71 | Като използваме обещания постигаме синхронност на асинхронните операции.
72 |
73 | ---
74 |
75 | ###States
76 |
77 | Всяко обещание има 3 състояния:
78 |
79 | - pending (initial state)
80 | - fulfilled
81 | - rejected
82 | 
83 | ---
84 | ###Example
85 |
86 | ```javascript
87 | function httpGet(url) {
88 | return new Promise(
89 | function (resolve, reject) {
90 | var request = new XMLHttpRequest();
91 | request.onreadystatechange = function () {
92 | if (this.status === 200) {
93 | // Success
94 | resolve(this.response);
95 | } else {
96 | // Something went wrong (404 etc.)
97 | reject(new Error(this.statusText));
98 | }
99 | }
100 | request.onerror = function () {
101 | reject(new Error(
102 | 'XMLHttpRequest Error: '+this.statusText));
103 | };
104 | request.open('GET', url);
105 | request.send();
106 | });
107 | }
108 |
109 | ```
110 |
111 | ---
112 |
113 | ###Example
114 | ```javascript
115 | httpGet('http://example.com/file.txt')
116 | .then(
117 | function (value) {
118 | console.log('Contents: ' + value);
119 | },
120 | function (reason) {
121 | console.error('Something went wrong', reason);
122 | });
123 | ```
124 | ---
125 | ###Chaining (using then)
126 |
127 | ```javascript
128 |
129 | asyncFunc()
130 | .then(function (value1) {
131 | return 123;
132 | })
133 | .then(function (value2) {
134 | console.log(value2); // 123
135 | });
136 | ```
137 | ---
138 |
139 | ### Error handling
140 |
141 | ```javascript
142 |
143 | asyncFunc1()
144 | .then(asyncFunc2)
145 | .then(asyncFunc3)
146 | .catch(function (reason) {
147 | // Something went wrong above
148 | });
149 | ```
150 | ---
151 | ###Composition (map via Promise.all)
152 |
153 | ```javascript
154 | var fileUrls = [
155 | 'http://example.com/file1.txt',
156 | 'http://example.com/file2.txt'
157 | ];
158 | var promisedTexts = fileUrls.map(httpGet);
159 |
160 | Promise.all(promisedTexts)
161 | .then(function (texts) {
162 | texts.forEach(function (text) {
163 | console.log(text);
164 | });
165 | })
166 | .catch(function (reason) {
167 | // Receives first rejection among the promises
168 | });
169 | ```
170 | ---
171 | ###Workflow
172 | 
173 | ---
174 |
175 | #Итериране на обекти
176 |
177 | В ES5 нямаме много възможности да използваме някакви операции върху обекти и за това използвахме
178 | библиотеки като lodash и underscore.
179 |
180 | За радост в ES2015 това не е така. Вече имаме Iterators.
181 |
182 | ---
183 |
184 | #Какво е Iterator?
185 |
186 | ---
187 |
188 | Iterator е design pattern, който ни дава начин да достъпваме последователно елементи на някакъв контейнер (обект).
189 |
190 | Това значи, че можем да използваме един и същ интерфейс за итериране независимо от репрезентацията на обекта.
191 | 192 |
193 |
194 |
195 | В езици като C#, Java за да можем за инерираме по обект трябва да наследяваме някакъв интерфейс или да extend-нем някакъв клас, но в JS не е така. 196 | 197 | В JS за да бъдеш итератор трябва да изглеждаш като такъв! Това означава, че можем да използваме итератори 198 | върху всеки един обект. 199 | 200 | --- 201 | ###Какво трябва да направим за да можем да итерираме по даден обект? 202 | 203 | За да можем да итерираме по обект, той или някой от обектите от прототипната му верига трябва да има свойството Symbol.iterator 204 | 205 | [Symbol.iterator] е функция без аргументи, която връща обект, който има имплементиран метод - next 206 | 207 | next трябва да е функция, която не взима аргументи и връща обект с две свойства: done(boolean) и value 208 | 209 |
210 | Обекти които имат [Symbol.iterator] 211 | 212 |
213 | ---
214 | ###Пример
215 |
216 | ```javascript
217 | var someString = "hi";
218 |
219 | var iterator = someString[Symbol.iterator]();
220 |
221 | iterator.next(); // { value: "h", done: false }
222 | iterator.next(); // { value: "i", done: false }
223 | iterator.next(); // { value: undefined, done: true }
224 |
225 | var arr = ['a', 'b', 'c'];
226 | iterator = arr[Symbol.iterator]();
227 | iter.next() //{ value: 'a', done: false }
228 | iter.next() //{ value: 'b', done: false }
229 | iter.next() //{ value: 'c', done: false }
230 | iter.next() //{ value: undefined, done: true }
231 |
232 | ```
233 | ---
234 | ###Как да си пишем custom iterables
235 |
236 | ```javascript
237 | let iterable = {
238 | [Symbol.iterator]() {
239 | let step = 0;
240 | let iterator = {
241 | next() {
242 | if (step <= 2) {
243 | step++;
244 | }
245 | switch (step) {
246 | case 1:
247 | return { value: 'hello', done: false };
248 | case 2:
249 | return { value: 'world', done: false };
250 | default:
251 | return { value: undefined, done: true };
252 | }
253 | }
254 | };
255 | return iterator;
256 | }
257 | };
258 |
259 | for (let x of iterable) {
260 | console.log(x);
261 | }
262 | // Output:
263 | // hello
264 | // world
265 | ```
266 | ---
267 |
268 | for ... of е от ES2015 и работи с Iterator-и
269 | ```javascript
270 | for (variable of object) {
271 | statement
272 | }
273 | ```
274 |
275 | Някои вътрешни конструкции като spread оператора използват итератори
276 | ```javascript
277 | [...someString] // ["h", "i"]
278 | ```
279 | ---
280 |
281 | #Generators
282 |
283 | ---
284 |
285 | ###Какво са генераторите
286 |
287 | Генераторите са функциии с множество крайни точки.
288 |
289 | Чрез ключовата дума yield ние можем да замразим изпълнението на нашата генератор функция след което можем да продължим изпълнението и.
290 |
291 | ```javascript
292 | function* fibonacci() {
293 | var a = 0, b = 1, c = 0;
294 |
295 | while(true){
296 | yield a; //<-- suspend the generator function
297 | c = a, a = b, b = c + b;
298 | }
299 | }
300 |
301 |
302 | var seq = fibonacci(); //<--- call the generator function and to get an iterator object
303 |
304 | //След извикване на next получаваме обект { value: 0, done: false };
305 | console.log(seq.next().value); // 0
306 | console.log(seq.next().value); // 1
307 | console.log(seq.next().value); // 1
308 | console.log(seq.next().value); // 2
309 | console.log(seq.next().value); // 3
310 | console.log(seq.next().value); // 5
311 | ```
312 | ---
313 | 314 |
315 |
316 |
Това ли е всичко? ... Ко? Не!
337 |
338 |
339 |
Можем ли да използваме генератори за работа с асинхронните си функции?
53 |
54 | ---
55 | ### Какво ще стане тук?
56 | ```javascript
57 | var p1 = {
58 | x: 2,
59 | y: 5
60 | };
61 |
62 | var p2 = {
63 | x: 2,
64 | y: 5
65 | };
66 |
67 | var p3 = {
68 | y: 5,
69 | x: 7
70 | }
71 | ```
72 | ---
73 | ### Arrays
74 | * Скритите класове на масивите следят типовете на елементите
75 | * Ако един масив е пълен с doubles той се upgrade-ва (unboxed) към fast double
76 | * Невнимателно манипулиране на масивите може да причини оптимизационни проблеми (unboxing - boxing)
77 |
78 | ```javascript
79 | var a = new Array();
80 | a[0] = 77; // Allocates
81 | a[1] = 88;
82 | a[2] = 0.5; // Allocates, converts
83 | a[3] = true; // Allocates, converts
84 |
85 | var a = [77, 88, 0.5, true]; //Is better
86 | ```
87 | ---
88 | ### Arrays
89 |
90 | * Не пре-алокирайте големи масиви (>=100K елементи).
91 |
92 | * Ако знаем колко елемента ще се съдържат в масива е хубаво да пре-алокираме.
93 |
94 | * Не е хубаво да трием елементи. (Отнася се и за обекти).
95 |
96 | * За масиви с различни типове трябва да използваме Array literal.
97 | ---
98 | class: middle, center
99 |
100 | ##### Обектните литерали, които имат една и съща структура също използват едни и същи скрити класове.
101 |
102 | * За това е хубаво когато правим нови обекти да слагаме в тях всички property-та, които те ще съдържат.
103 | ---
104 | ###Какво прави v8?
105 |
106 | * v8 компилира Javascript директно до машинни инструкции (unoptimized native code) преди изпълнението му.
107 | (Няма никакво интерпретиране и bytecode)
108 |
109 | * Функциите не се компилират докато не бъдат извикани, което е хубаво защото виртуалната машина не губи време за големи библиотеки
110 |
111 | * След компилирането се пуска profiler, който избира "hot" функции, които да бъдат оптимизирани от Crankshaft (optimization compiler)
112 |
113 | ---
114 | class: middle, centeri
115 | ###Какво е NodeJS?
116 | ---
117 | class: middle, center
118 | ####Open-source, cross-platform runtime environment for developing 
121 |
122 | * libuv - high performance, cross-platform evented I/O library
123 |
124 | * js/c++ - Node екосистемата npm (node package manager) е най-голямата open-source екосистема от библиотеки в света.
125 |
126 | ---
127 | ###Малко история
128 | * Node e създаден 2009 от Ryan Dahl и други програмисти от Joyent.
129 |
130 | * 2011 година излиза npm
131 |
132 | * 2012 Ryan Dahl се оттегля от проекта
133 |
134 | * 2014 поради вътрешен конфликт излиза форк на node с името io.js
135 |
136 | * 2015 node and io.js merge
137 |
138 | ---
139 | ###Runtime
140 |
141 | * v8 event loop се грижи за javascript и C++ модулите, които работят в main thread-а.
142 |
143 | * Ако нещо работи извън main thread-а libev и libuv го обработват в thread pool. libuv прави връзката с main thread-а.
144 |
145 | 
146 | ---
147 | ###Конвенции
148 |
149 | ```javascript
150 |
151 | var callback = function(err, data) {
152 | //DO STUFF
153 | };
154 |
155 | saveData(myData, callback);
156 |
157 | ```
158 |
159 | * callback функцията е винаги последният аргумент, който се подава на асинхронната функция.
160 |
161 | * Първата стойност, която се подава на callback функцията е винаги error.
162 | ---
163 | ###Modules
164 |
165 | ```javascript
166 |
167 | var fs = require('fs'); //default module
168 | var myModule = require('../app_modules/myModule'); //custom module
169 |
170 | myModule.foo(); // > this is foo!
171 | ```
172 | Някои други default модули са:
173 |
174 | * http
175 | * crypto
176 | * os
177 | * path
178 |
179 | Тук може да откриете всички: https://nodejs.org/api/
180 |
181 | ---
182 | ###Как да пишем собствени модули:
183 |
184 | ```javascript
185 |
186 | module.exports = {
187 | foo: function() {
188 | return 'this is foo!';
189 | },
190 | bar: function() {
191 | return 'this is bar';
192 | }
193 | };
194 |
195 | ```
196 |
197 | ```javascript
198 |
199 | module.exports.foo = function() {
200 | return 'this is foo!';
201 | };
202 |
203 | module.exports.bar = function() {
204 | return 'this is bar!';
205 | };
206 | ```
207 | ---
208 | ###NPM
209 |
210 | * Когато започнем да правим нов проект започваме с npm init за да си създадем package.json, който съдържа полезна информация за проекта ни.
211 |
212 | ```javascript
213 | npm install module_name
214 | ```
215 |
216 | * При добавяне на нов модул към проекта е хубаво да използвамe npm install module_name --save за да запишем този модул към dependencies в package.json.
217 |
218 | * Свалените модули се запазват в папка node_modules, която трябва да добавям в .gitignore за да не я commit-ваме към source control-а.
219 |
220 | * При сваляне на приложението от github посто трябва да напишем npm install или накратко npm i за да се свалят всички dependency-та от package.json.
221 |
222 | * Понякога искаме модулите да се свалят глобално, за да можем да ги използваме навсякъде. Тогава използваме npm install module_name -g.
223 |
224 | ---
225 | ###Events
226 |
227 | * Събитията ни дават друг начин, по който можем да пишем асинхронни операции.
228 |
229 | ```javascript
230 | //Callback example
231 | getUserData(param1, function(err, results) {
232 | //Do stuff
233 | });
234 |
235 |
236 |
237 | //Event example
238 | var userData = getUserData(param1);
239 |
240 | //Subscribe to the data event
241 | userData.on('data', function(data) {
242 | //Do stuff
243 | });
244 |
245 | //Subscribe to the item event
246 | userData.on('item', function(item) {
247 | //Do stuff
248 | });
249 | ```
250 | Тук казваме, че всеки път когато възникне евент с име data, трябва да се изпълни тази функция. Ако искаме да се изпълни само веднъж, използваме once.
251 |
252 | ---
253 | ###Custom Event Emitters (1)
254 |
255 | ```javascript
256 | var EventEmitter = require('events').EventEmitter;
257 |
258 | var emitter = new EventEmitter();
259 |
260 | module.exports.getUserData = function() {
261 | setTimeout(function(){
262 | //Publish the item event after at least 5sec
263 | emitter.emit('item', { id: 123, name: 'ivan' });
264 | }, 5000);
265 | return emitter;
266 | };
267 | ```
268 |
269 | ---
270 | ###Custom Event Emitters (2)
271 | ```javascript
272 | var EventEmitter = require('events').EventEmitter;
273 | var util = require('util');
274 |
275 | function CustomEmitter() {
276 | EventEmitter.call(this);
277 | };
278 |
279 | CustomEmitter.prototype.connect = function() {
280 | var self = this;
281 | setTimeout(function(){
282 | self.emit('connected', { name: 'ivan', age: 19 });
283 | }, 5000);
284 | };
285 |
286 | util.inherits(CustomEmitter, EventEmitter);
287 | module.exports = CustomEmitter;
288 | ```
289 | ```javascript
290 | var CustomEmitter = require('./CustomEmitter');
291 |
292 | var cm = new CustomEmitter();
293 |
294 | cm.on('connected', function(data) {
295 | console.log(data);
296 | });
297 |
298 | cm.connect();
299 | ```
300 | ---
301 | ###Streams
302 |
303 | * Потоците разширяват EventEmitter.
304 |
305 | * Те представляват абстракция за менажиране на data flow. (Network traffic, File I/O ...)
306 |
307 | * Може да правим 3 типа потоци: Readable, Writable, Transform (Readable and Writable)
308 |
309 | * Можем да pipe-ваме Readable потоците към Writable (подобно на unix command pipeing)
310 | ---
311 | ###Readable Streams
312 |
313 | -
314 |
- event 'readable' (a chunk of data can be read) 315 |
- event 'data' (get chunk of data asap) 316 |
- event 'end' (no more data to read) 317 |
- event 'error' 318 |
- event 'close' (when all resources are closed) 319 |
- read([size]) (pull data from internal buffer) 320 |
- setEncoding(encoding) 321 |
- pause() 322 |
- isPaused() 323 |
- pipe(WritableStream) 324 |
- unpipe() 325 |
- unshift() (unshift onto read queue) 326 |
331 |
344 | ---
345 | ###Example (1)
346 | ```javascript
347 | var request = require('request');
348 | var arr = [];
349 |
350 | var rs = request('http://www.google.com/');
351 | rs.on('data', function(chunk) {
352 | arr.push(chunk);
353 | });
354 |
355 | rs.on('end', function() {
356 | var result = arr.toString();
357 | result = result.replace(/div/g,'span');
358 | var newBuffer = new Buffer(result);
359 |
360 | //Send new buffer somewhere ...
361 |
362 | console.log(result);
363 | });
364 | ```
365 | ---
366 | ###Example (2)
367 |
368 | ```javascript
369 | var fs = require('fs');
370 | var file = [];
371 |
372 | var readStream = fs.createReadStream('path/to/file');
373 |
374 | readStream.on('data', function(chunk) {
375 | file.push(chunk); //chunk is a buffer
376 | });
377 |
378 | readStream.on('end', function() {
379 | console.log(file.toString());
380 | });
381 |
382 | var writeStream = fs.createWriteStream('path/to/otherfile');
383 |
384 | readStream.pipe(writeStream);
385 | ```
386 | ---
387 | ### Example (3)
388 |
389 | ```javascript
390 | var fs = require('fs');
391 |
392 | var writeStream = fs.createWriteStream('./test.txt');
393 |
394 | writeStream.on('finish', function() {
395 | console.log('all done ...');
396 | });
397 |
398 | writeStream.write('Hello');
399 | writeStream.write(' ');
400 | writeStream.write('World!');
401 |
402 | writeStream.end();
403 | ```
404 | ---
405 |
406 | ### Example (4)
407 | ```javascript
408 | var fs = require('fs');
409 | var zlib = require('zlib');
410 | var request = require('request');
411 |
412 | var writeStream = fs.createWriteStream('path/to/file');
413 | //zlib.createGzip() is a Transform stream
414 | request('http://google.com/').pipe(zlib.createGzip()).pipe(writeStream);
415 | ```
416 | ---
417 | ### Custom Streams
418 |
419 | ```javascript
420 | var stream = require('stream');
421 | var util = require('util');
422 |
423 | function EchoStream () {
424 | stream.Writable.call(this);
425 | };
426 |
427 | util.inherits(EchoStream, stream.Writable);
428 |
429 | EchoStream.prototype._write = function (chunk, encoding, done) {
430 | console.log(chunk.toString());
431 | done();
432 | }
433 |
434 | var myStream = new EchoStream();
435 | process.stdin.pipe(myStream);
436 | ```
437 | * Потоците обикновенно работят с buffers.
438 | * ObjectMode: true ни позволява да работим с JS обекти, вместо с буфери.
439 | * Ако ни трябва Readable или Transform stream трябва съответно да реализираме _read или _transform методи вместо _write
440 |
441 | ---
442 | ##### Transform Stream Example
443 | ```javascript
444 | var stream = require('stream');
445 | var fs = require('fs');
446 | var liner = new stream.Transform( { objectMode: true } );
447 |
448 | liner._transform = function (chunk, encoding, done) {
449 | var data = chunk.toString();
450 | if (this._lastLineData) data = this._lastLineData + data;
451 |
452 | var lines = data.split('\n');
453 | this._lastLineData = lines.pop();
454 |
455 | lines.forEach(this.push.bind(this));
456 | done();
457 | };
458 |
459 | liner._flush = function (done) {
460 | if (this._lastLineData) this.push(this._lastLineData);
461 | this._lastLineData = null;
462 | done();
463 | };
464 |
465 | var source = fs.createReadStream('path/to/file');
466 | source.pipe(liner);
467 |
468 | liner.on('readable', function () {
469 | var line = null;
470 | while((line = liner.read())){
471 | console.log(line);
472 | }
473 | });
474 | ```
475 | ---
476 | ### Readable Stream Example
477 |
478 | ```javascript
479 | var util = require('util');
480 | var Readable = require('stream').Readable;
481 |
482 | var MyStream = function(options) {
483 | Readable.call(this, options); // pass through the options to the Readable constructor
484 | this.counter = 1000;
485 | };
486 |
487 | util.inherits(MyStream, Readable); // inherit the prototype methods
488 |
489 | MyStream.prototype._read = function(n) {
490 | this.push('foobar');
491 | if (this.counter-- === 0) { // stop the stream
492 | this.push(null);
493 | }
494 | };
495 |
496 | var mystream = new MyStream();
497 | mystream.pipe(process.stdout);
498 | ```
499 |
500 | ---
501 | class: middle, center
502 | [More about Streams](https://github.com/substack/stream-handbook)
503 | ---
504 | ### Buffers
505 | Когато четем от файлове или работим с мрежата ние получаваме сурова (raw) памет, която е извън v8 heap-а. Buffer-ът представлява mapping (handle) между тази памет и JS Array.
506 | v8 няма контрол върху тази памет, за това този mapping, който се създава, позволява на libuv да деалокира суровата памет след като Garbage Collector-а (GC) премахне нашия buffer.
507 |
508 | Buffer-ите могат да бъдат гадни!
509 |
510 | Нека си представим, че pre-alloc-ираме голямо парче памет (fs.readFile без encoding) и след това разбием тази памет на малки парчета към конкретни JS обекти. Какво ще се случи с нашата памет, ако без да искаме оставим референции към някои от тези обекти?
511 |
512 | Използването на slice в Node върху буфери не е добра идея, защото може да доведе до memory leaks. Slice не прави копие на array, а създава пойнтъри към паметта, която държи array-я.
513 | За това е по-добре е да си създадем изцяло нов Buffer.
514 |
515 | Да разгледаме също какво се случва в Stream Example(1).
516 | ---
517 | ### Process
518 |
519 | * process обектът е достъпен навсякъде в нашето node приложение и разширява Event Emitter.
520 |
521 | * има полезни референции към:
522 | - process.stdin, process.stdout, process.stderr (Streams)
523 |
524 | - process.argv, process.pid, process.title, process.cwd() и др (Attrbutes)
525 |
526 | - process.abort(), process.kill(pid) (methods)
527 |
528 | - 'exit', 'error' + POSIX signal events (events)
529 |
530 | ---
531 | ### Using Node as a client
532 |
533 | Вече разгледахме request, а сега нека видим http
534 | ```javascript
535 | var http = request('http');
536 | var options = {
537 | host: 'www.google.com',
538 | port: 80,
539 | path: '/',
540 | method: 'GET'
541 | };
542 |
543 | var req = http.request(options, function(resp){
544 | console.log(resp.statusCode);
545 | resp.pipe(process.stdout);
546 | });
547 | //req is a WritableStream
548 | //resp is a ReadableStream
549 |
550 | req.end(); //close the writable stream
551 |
552 | //We can use get instead
553 | http.get('www.google.com', function(res){
554 | res.pipe(process.stdout);
555 | });
556 | ```
557 |
558 | ---
559 | ### Using Node as web server Example(1)
560 |
561 | ```javascript
562 | var http = require('http');
563 | var server = http.createServer(function(req, res){
564 | //req and res are streams
565 | //process request
566 | });
567 |
568 | server.listen(8081, function() {
569 | console.log('Server is listening on 8081 ...');
570 | });
571 | ```
572 | ---
573 | ```javascript
574 | var http = require("http"),
575 | url = require("url"),
576 | path = require("path"),
577 | fs = require("fs"),
578 | port = process.argv[2] || 8888;
579 |
580 | http.createServer(function(request, response) {
581 | var uri = url.parse(request.url).pathname
582 | , filename = path.join(process.cwd(), uri);
583 |
584 | fs.exists(filename, function(exists) {
585 | if(!exists) {
586 | response.writeHead(404, {"Content-Type": "text/plain"});
587 | response.write("404 Not Found\n");
588 | response.end();
589 | return;
590 | }
591 | if (fs.statSync(filename).isDirectory()) filename += '/index.html';
592 | fs.readFile(filename, "binary", function(err, file) {
593 | if(err) {
594 | response.writeHead(500, {"Content-Type": "text/plain"});
595 | response.write(err + "\n");
596 | response.end();
597 | return;
598 | }
599 | response.writeHead(200);
600 | response.write(file, "binary");
601 | response.end();
602 | });
603 | });
604 | }).listen(parseInt(port, 10));
605 | ```
--------------------------------------------------------------------------------
/lectures/03-functional.markdown:
--------------------------------------------------------------------------------
1 | class:center,middle
2 | # Функционално програмиране
3 |
4 | --
5 |
6 | 
7 |
8 | ---
9 | # Функционално програмиране
10 |
11 | * > Functional programming is like describing your problem to a mathematician.
12 |
13 | * > Imperative programming is like giving instructions to an idiot.
14 |
15 | ---
16 | # Забележка
17 |
18 | Съвременните компютри са много *изпълнителни*. Без значение от сложността на подадените инструкции, стига да са коректни, изпълнението ми е гарантирано.
19 |
20 | От друга страна математиците обикновено имат добре развито *асоциативно* мислене и относително лесно осмислят сложни концепции.
21 |
22 | ---
23 | # Забележка
24 |
25 | Лесно за един процесор е да изпраща правилното напрежение по правилната пътечка, така че една по-висока абстракция да отчете увеличаване на стойността на променлива с 1. Може да го прави буквално милиарди пъти в секунда.
26 |
27 | --
28 | -
332 |
- event 'finish' 333 |
- event 'drain' (begin writing more data after read returned false) 334 |
- event 'error' 335 |
- event 'pipe' 336 |
- event 'unpipe' 337 |
- write(chunk) 338 |
- cork() (force buffering of all writes) 339 |
- uncork() (flush all buffered data since cork call) 340 |
- end() (call this when we don't need more data) 341 |
- setDefaultEncoding(encoding) 342 |
29 | 30 | Лесно за един математик е да интегрира по части. 31 | 32 | --- 33 | # Функционално програмиране 34 | 35 | * Всяко изчисление е *оценка на чиста функция* 36 | * Всяка „хубава“ функция е чиста функция 37 | * Всяка „нечиста“ функция трябва много добре да оправдае съществуването си 38 | * Всяка математическа функция е чиста 39 | 40 | --- 41 | # Функционално програмиране 42 | 43 | ## Чиста функция 44 | 45 | * Връща предвидим добре дефиниран резултат 46 | * Връща същия резултат при повторно извикване със същия аргумент 47 | * ...(т.е. е изображение в математическия смисъл) 48 | * Не предизвиква странични ефекти!! 49 | * Промяна стойността на глобална променлива 50 | * Писане във файл(включително stdout) 51 | * Не зависи от информация недостъпна чрез подадените ѝ аргументи 52 | * Четене от файл 53 | * Четене от глобални променливи 54 | * Четене от мрежата 55 | 56 | --- 57 | class:center,middle 58 | ## Чиста функция 59 |  60 | 61 | --- 62 | ## Чиста функция 63 | ```javascript 64 | function intersection(array1, array2) { 65 | return array1.filter(function (element) { 66 | return array2.indexOf(element) > -1; 67 | }); 68 | } 69 | ``` 70 | -- 71 | 72 | * Няма никакви странични ефекти. 73 | -- 74 | 75 | * Аргументите ѝ не се променят в следствие на извикването ѝ. 76 | -- 77 | 78 | * Никакво „глобално състояние“ не се променя в следствие на извикване ѝ. 79 | 80 | --- 81 | # Чисти функции 82 | 83 | Извикванията на чисти функции са референтно прозрачни(referentially transparent) 84 | -- 85 | 86 | ```javascript 87 | var belowTen = [1, 2, 3, 4, 5, 6, 7, 8, 9], 88 | betweenFiveAndFifteen = [5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]; 89 | 90 | console.log(intersection(belowTwenty, betweenFiveAndFifteen)); 91 | ``` 92 | -- 93 | 94 | ```javascript 95 | var belowTen = [1, 2, 3, 4, 5, 6, 7, 8, 9], 96 | betweenFiveAndFifteen = [5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]; 97 | 98 | console.log([5, 6, 7, 8, 9]); 99 | ``` 100 | 101 | --- 102 | class:center,middle 103 | ## Нечиста функция 104 | 105 |  106 | 107 | --- 108 | ## Нечиста функция 109 | ```javascript 110 | function intersection(array1, array2) { 111 | return array1.filter(function (element) { 112 | console.log(element); 113 | return array2.indexOf(element) > -1; 114 | }); 115 | } 116 | ``` 117 | -- 118 | 119 | * I/O операциите са промяна на състоянието (state change). 120 | 121 | --- 122 | ## (Малко по-смислена) нечиста функция 123 | ```javascript 124 | function reverse(array) { 125 | array.forEach(function (element, index) { 126 | var symmetricalIndex = array.length - 1 - index; 127 | 128 | if (index > symmetricalIndex) { 129 | return; 130 | } 131 | 132 | array[index] = array[symmetricalIndex]; 133 | array[symmetricalIndex] = element; 134 | }); 135 | } 136 | ``` 137 | 138 | * Ако извикаме два пъти `reverse` с еднакви аргументи резултатите ще са различни. 139 | * `array` преди и след извикването на `reverse` се променя. 140 | 141 | --- 142 | class:center,middle 143 |  144 | 145 | --- 146 | # В живия живот 147 | 148 | Чистите функции не могат да свършат всичко, което искаме от една машина. 149 | 150 | Комуникацията с потребител се извършва винаги с „нечисти“ функции, тъй като е необходима смяна на някакво глобално състояние(писане във файл, визуализация по екрана, пращане на неща по мрежата и т.н.) 151 | 152 | Но всичко под този слой може да бъде организирано изцяло в pure functions. 153 | 154 | Това е подход, който не се среща често извън изконно функционални езици(lisp, haskell), но стремежа към него в други езици рядко вреди. 155 | 156 | --- 157 | # В javascript 158 | 159 | Очевидно javascript не е чисто функционален език. Имаме глобален state. За всяка функция има косвен (implicit) `this`. В javascript за `this` можем да си мислим като за вграден в езика механизъм за запазване на state. 160 | 161 | `this` е **runtime** контекста, в който се изпълнява функцията ни. 162 | 163 | --- 164 | # `this` 165 | 166 | ```javascript 167 | function constructGreeting() { 168 | return "Hello, I am " + this.name; 169 | } 170 | 171 | function setAge(age) { 172 | this.age = age; 173 | } 174 | 175 | var pesho = { 176 | name: 'Pesho', 177 | constructGreeting: constructGreeting, 178 | setAge: setAge, 179 | }; 180 | 181 | var gosho = { 182 | name: 'Gosho', 183 | constructGreeting: constructGreeting, 184 | setAge: setAge, 185 | } 186 | ``` 187 | 188 | * При задаване на атрибут `setAge` нямаме 'копиране' на обекта функция setAge 189 | 190 | --- 191 | # `this` 192 | 193 | ```javascript 194 | > pesho.constructGreeting() 195 | 'Hello, I am Pesho' 196 | > gosho.constructGreeting() 197 | 'Hello, I am Gosho' 198 | ``` 199 | 200 | -- 201 | 202 | ```javascript 203 | > pesho.setAge(23) 204 | > pesho.age 205 | 23 206 | > gosho.setAge(42) 207 | > gosho.age 208 | 42 209 | ``` 210 | 211 | -- 212 | 213 | ```javascript 214 | > pesho.constructGreeting === gosho.constructGreeting 215 | true 216 | > pesho.setAge === gosho.setAge 217 | ``` 218 | 219 | **Една и съща** функция се извиква в два различни контекста. 220 | 221 | --- 222 | 223 | # `call` & `apply` 224 | 225 | Помощни функции за промяна на контекста 226 | 227 | ```javascript 228 | function constructGreeting() { 229 | return "Hello, I am " + this.name; 230 | } 231 | 232 | function setAge(age) { 233 | this.age = age; 234 | } 235 | 236 | var pesho = { 237 | name: 'Pesho', 238 | }; 239 | 240 | var gosho = { 241 | name: 'Gosho', 242 | } 243 | ``` 244 | 245 | --- 246 | # `call` 247 | 248 | ```javascript 249 | > constructGreeting.call(pesho) 250 | 'Hello, I am Pesho' 251 | > constructGreeting.call(gosho) 252 | 'Hello, I am Gosho' 253 | ``` 254 | 255 | ```javascript 256 | > setAge.call(pesho, 23) 257 | 'Hello, I am Pesho' 258 | > setAge.call(gosho, 42) 259 | 'Hello, I am Gosho' 260 | ``` 261 | 262 | * Първият аргумент на 'call' е 'this' обекта 263 | * Всички останали аргументи се предават като аргументи на функцията 264 | 265 | --- 266 | # `apply` 267 | 268 | * Аналогично на 'call', но очаква Array като втори аргумент 269 | 270 | ```javascript 271 | > constructGreeting.apply(pesho) 272 | 'Hello, I am Pesho' 273 | > constructGreeting.apply(gosho) 274 | 'Hello, I am Gosho' 275 | > { name: 'Stamat', constructGreeting : constructGreeting }.constructGreeting(); 276 | 'Hello, I am Stamat' 277 | ``` 278 | 279 | ```javascript 280 | > setAge.apply(pesho, [23]) 281 | 'Hello, I am Pesho' 282 | > setAge.apply(gosho, [42]) 283 | 'Hello, I am Gosho' 284 | ``` 285 | 286 | --- 287 | # `call` vs. `apply` 288 | 289 | * `call` и `apply` очакват като първи аргумент обекта, в чиито контекст да изпълнят функцията, т.е. стойността на `this`. 290 | * `call` очаква като следващи аргументи, аргументите, които да се подадат на функцията. 291 | * `apply` очаква като втори аргумент `Array`(почти), с аргументите, които да се подадат на функцията. 292 | 293 | --- 294 | # `arguments` 295 | 296 | Някои функции приемат променлив (без горна граница) брой аргументи, или пък дефинират някои от аргументите си като опционални. 297 | 298 | ```javascript 299 | function howManyThings() { 300 | return arguments.length; 301 | } 302 | ``` 303 | -- 304 | 305 | ```javascript 306 | > howManyThings(1, 2, 3, 4); 307 | 4 308 | > howManyThings(0, 12, 'бахур', 5, {}); 309 | 5 310 | > howManyThings(undefined, undefined, undefined); 311 | 3 312 | ``` 313 | 314 | --- 315 | # `apply` `arguments` 316 | 317 | Казахме, че `apply` очаква списък, който да подаде като аргументи на функцията. 318 | 319 | ```javascript 320 | var args = []; 321 | args[0] = 42; 322 | args[1] = 73; 323 | 324 | function pokeAroundArguments() { 325 | console.log(arguments[0]); 326 | console.log(arguments[1]) 327 | console.log(arguments.length); 328 | } 329 | ``` 330 | 331 | ```javascript 332 | > pokeAroundArguments.apply(null, args); 333 | 42 334 | 73 335 | 2 336 | ``` 337 | 338 | --- 339 | # `apply` `arguments` 340 | 341 | Всъщност е почти така. `apply` очаква обект който има `length` атрибут, според който определя как да конструира `arguments` обекта за функцията. 342 | 343 | ```javascript 344 | var args = {}; 345 | args[0] = 42; 346 | args[1] = 73; 347 | args.length = 2; 348 | 349 | function pokeAroundArguments() { 350 | console.log(arguments); 351 | console.log(arguments.length); 352 | } 353 | ``` 354 | 355 | ```javascript 356 | > pokeAroundArguments.apply(null, args) 357 | { '0': 42, '1': 73 } 358 | 2 359 | ``` 360 | 361 | ??? 362 | 363 | Пример с max(1, 2, 3, 16, 5, 3, 14) чрез Math.max.apply 364 | array() >> Array() 365 | 366 | --- 367 | # `arguments` НЕ Е `Array` 368 | 369 | ```javascript 370 | function doubleAll() { 371 | return arguments.map(function (item) { 372 | return item + item; 373 | }); 374 | } 375 | ``` 376 | 377 | ```javascript 378 | > doubleAll(1, 2, 3, 4) 379 | TypeError: Object #