-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
executable file
·443 lines (438 loc) · 21.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Лекция</title>
<meta charset="utf-8">
<meta name="viewport" content="width=792, user-scalable=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="node_modules/shower-ribbon/styles/screen.css">
<link rel="stylesheet" href="./css/screen.css">
<link rel="stylesheet" href="./css/print.css" media="print">
<link rel="stylesheet" href="./css/idea.min.css">
<link rel="stylesheet" href="./css/user.css">
</head>
<body class="list">
<header class="caption">
<h1>Shower Presentation Engine</h1>
<p>Yours Truly, Famous Inc.</p>
</header>
<section class="slide cover"><div>
<img src="pictures/preview.jpg" alt="">
</div></section>
<section class="slide cover"><div>
<img src="pictures/nodejs.png" alt="">
<div class="hidden">
Nodejs это платформа для запуска javascript на сервере,
помогает создавать расширяемые приложения
Порог вхождения довольно низок - используется практически
такой же js что и на клиенте/в браузере
</div>
</div></section>
<section class="slide"><div>
<h2 class="top">История</h2>
<ul>
<li>2009 Ryan Dahl</li>
<li class="next">поддержка Joyent</li>
<li class="next">Событийный асинхронный I/O</li>
<li class="next">V8 от Google</li>
<li class="next">libUV - ядро.</li>
<li class="next">Кроссплатформенный</li>
<div class="hidden">
Создан Райаном Далом в 2009, поддерживается
крупной компанией joyent.
Поддерживает аснхроиный событийный ввод вывод(неблокирующий).
Приходит запрос - отправляем систему читать файл, а сами обрабатываем остальное
После чтения - кидает событие и обрабатывает файл.
На основе виртуальной машины v8.
выполняет быстро,
все совеременные возможности + можно включить будущие
ПРофилировать процессы, память
Есть и другие движки
Добавил возможность работы с сетью, файлами,
потоками ввода-вывода - libuv событийный ввод/вывод
-> в итоге веб-сервер
</div>
</ul>
<div class="hidden">
</div>
</div></section>
<section class="slide"><div>
<h2 class="top">Где применять?</h2>
<ol>
<li>Приложения реального времени</li>
<li>Прокси</li>
<li>Сервисы с большим количеством клиентов</li>
<li>Везде, где время IO большое</li>
</ol>
<div class="hidden">
Хорошо подойдет там, где много пользователей производит операции не нагружающие процессор. Если сесть считать на ноде число пи,
то очень скоро ей поплохеет. Везде где время ввода-вывода больше вычислений очень хорошо работает нода, в веб-чатах,
серверах игр итп, веб-сайты
</div>
</div></section>
<section class="slide"><div>
<h2 class="top">Установка</h2>
<ul>
<li><a href="http://nodejs.org/">http://nodejs.org/</a></li>
<li><a href="http://nodejs.org/download/">http://nodejs.org/download/</a></li>
</ul>
<div class="hidden">
Ставим ноду с официального сайта. С главной страницы или со страницы загрузки. Выбирайте подходящую вам версию, ставьте
</div>
</div></section>
<section class="slide"><div>
<img class="image-cover" src="pictures/REPL.png">
<div class="hidden">
и можете просто запустить ее написав node.
node -v позволяет увидеть версию ноды, ключ -e позволяет запустить код, переданный аргументом к программе
в интерактивную оболчку REPL можно попасть просто написав в терминале node
</div>
</div></section>
<section class="slide"><div>
<h2>REPL</h2>
<img class="image-cover" src="pictures/hellonode.png">
<div class="hidden">
Можно запустить файл, создаем файл с расширением js, запускаем node index.js
если запускать как папку - нода будет смотреть в магический файл package.json с кратким описанием вашего проекта в поле main,
потом будет искать index.js, потом index.json
</div>
</div></section>
<section class="slide cover"><div>
<img src="pictures/modules.jpg">
<h2 class="bottom">Модули в Node.js</h2>
<div class="hidden">
Любой файл - является модулем. Модули они полностью инкапсулируемы - и при подключении внутренности не пробросятся в глобалы
</div>
</div></section>
<section class="slide"><div>
<h2>Глобальные перменные модуля</h2>
<ul>
<li>module = { exports: } - объект, описывающий данный модуль</li>
<li>exports = { } - объект экспорта данного модуля</li>
<li>require(moduleName | path| filename | dirname ) - подключение модуля</li>
</ul>
<div class="hidden">
для подключения модулей используется идеалогия Commonjs
Commonjs ввел стандарт написания javascript модулей. В большинстве своем главная идея - это некий объект exports,
который содержит то, что модуль хочет сделать доступным извне и функция require, которая собствено подключает модуль
</div>
</div></section>
<section class="slide"><div>
<h2 class="top">module.js</h2>
<pre class="javascript">
<code>function helloWorld() {</code>
<code> return 'hello';</code>
<code>}</code>
<code>console.log(__filename);</code>
<code>exports.helloWorld = helloWorld;</code>
<code>//module.exports = helloWorld;</code>
</pre>
<div class="hidden">
Создадим файл с модулем и экспортируем функцию
Через module.exports можно экспортировать только что-то одно
</div>
</div></section>
<section class="slide"><div>
<h2>index.js</h2>
<pre class="javascript">
<code>var module = require('./module.js');</code>
<code>typeof module;</code>
<code>typeof module.helloWorld;</code>
<code> </code>
<code>require('./module.js');</code>
<code>console.log(module.helloWorld());</code>
</pre>
<div class="hidden">
Подключаем.
</div>
</div></section>
<section class="slide"><div>
<h2>index.js</h2>
<pre class="javascript">
<code>var module = require('./module.js');</code>
<code>typeof module; <mark> object</mark></code>
<code>typeof module.helloWorld; <mark> function</mark></code>
<code> </code>
<code>require('./module.js');</code>
<code>console.log(module.helloWorld());</code>
</pre>
<div class="hidden">
Подключаем
</div>
</div></section>
<section class="slide"><div>
<h2>Запуск файла с подключенным модулем</h2>
<img class="image-cover" src="pictures/hellomodule.png">
<div class="hidden">
Если изменить модуль - то при попытке подгрузить - вызовется старый - тк нода кэширует модули
и выполняет их код только один раз. поэтому при двойном подключении - только один раз путь напечатается
</div>
</div></section>
<section class="slide"><div>
<h2>Поиск модуля</h2>
<ol style="margin:0;">
<li>/home/user/programm/library/node_modules/antigravity</li>
<li class="next">/home/user/programm/node_modules/antigravity</li>
<li class="next">/home/user/node_modules/antigravity</li>
<li class="next">/home/node_modules/antigravity</li>
<li class="next">/node_modules/antigravity</li>
<li class="next">NODE_PATH=$HOME/.node_modules, $HOME/.node_libraries, $PREFIX/lib/node</li>
</ol>
</div></section>
<section class="slide"><div>
<h2>Глобальные переменые. global</h2>
<ul>
<li>console</li>
<ul class="second">
<li>вывод данных в STDOUT – log</li>
<li>dir</li>
</ul>
<li>process</li>
<ul class="second">
<li>информация о текущем процессе – время работы</li>
<li>затраты памяти</li>
<li>Информация о текущей ОС</li>
<li>текущая рабочая папка CWD - PID</li>
</ul>
<li>setTimeout, setInterval</li>
</ul>
<div class="hidden">
Нет window - есть global
Содержимое можете посомтреть сами
</div>
</div></section>
<section class="slide cover"><div>
<img src="pictures/npm.jpg">
<div class="hidden">
пакетный менеджер
идет вместе с установкой нодой
дает доступ к большой базе модулей
</div>
</div></section>
<section class="slide"><div>
<img src="pictures/modulecount.png" class="image-cover">
<div class="hidden">
База модулей недавно обогнала все остальные
</div>
</div></section>
<section class="slide"><div>
<h2>NPM</h2>
<ul>
<li>Устанавливает модули</li>
<li>Разрешает зависимости</li>
<li>Удаляет ненужные модули</li>
<li>Деплоит ваш модуль в репозиторий</li>
<li>...</li>
</ul>
<div class="hidden">
Что в конечном итоге он делает. Стандартная задача - поискать модуль и подключить
СОздаем папку, внутри package.json с информацией о пакете и зависимости.
ПОтом может паблишить наш модуль
</div>
</div></section>
<section class="slide"><div>
<h2>package.json</h2>
<img class="image-cover" src="pictures/package.png">
</pre>
<div class="hidden">
зависимости, версии, названии, автор, девдепенси, версия ноды
</div>
</div></section>
<section class="slide"><div>
<img class="image-cover" src="pictures/npminstall.png">
</pre>
<div class="hidden">
Скачиваем папку с приложением = git или просто скачиваем с сайта
Заходим в репозиторий и устанавливаем зависимости
silent - для того, чтобы не выводить шелуху, а только версии зависимостей
</div>
</div></section>
<section class="slide cover"><div>
<img src="pictures/lifegood.jpg">
<div class="hidden">
</div>
</div></section>
<section class="slide"><div style="top: 200px;">
<h2>Базовые модули</h2>
<a href="http://nodejs.org/api/" class="bottom">http://nodejs.org/api/</a>
<div class="hidden">
Все базовые модули - это те, которые встроены в ноду, например http - библиотека для создания простого вебсервера
fs - библиотека для работы с файловой системой, позволяет создавать/писать в файлы,
утилита для работы с текущим процессом - вы можете зайти на сайт с подробной документацией ноды и увидеть все
</div>
</div></section>
<section class="slide"><div>
<h2>Модуль для работы с файловой системой - fs</h2>
<ul>
<li>fs.readfile</li>
<li>fs.writefile</li>
<li>fs.realpath</li>
<li>fs.mkdir</li>
</ul>
<div class="hidden">
Все операции есть синхронные и асинхронные.
</div>
</div></section>
<section class="slide"><div>
<h2>Асинхронный запрос</h2>
<img class="image-cover" src="pictures/fs.png" style="width:100%;">
<div class="hidden">
Синхронные гарантированно последовательно выполняют две операции.
С синхронными гарантии нет. Такой код может попродить ошибку
</div>
</div></section>
<section class="slide"><div>
<h2>Асинхронный запрос</h2>
<img class="image-cover" src="pictures/fsresolve.png" style="width:100%;">
<div class="hidden">
Синхронные гарантированно последовательно выполняют две операции.
С синхронными гарантии нет. Такой код может попродить ошибку
</div>
</div></section>
<section class="slide"><div style="top: 200px;">
<h2 class="normal">Синхронный для CLI</h2>
<h2 class="normal">Асинхронный для сервера</h2>
<div class="hidden">
</div>
</div></section>
<section class="slide"><div>
<h2>http, https</h2>
<ul>
<li>Всевозможные функции работы с http</li>
<li>HTTP(S) сервер</li>
<li>Скачивание файлов по сети (аналоги jquery get, post)</li>
</ul>
<div class="hidden">
</div>
</div></section>
<section class="slide"><div>
<h2>http client</h2>
<img class="image-cover" src="pictures/httpclient.png">
<div class="hidden">
</div>
</div></section>
<section class="slide"><div>
<h2>http server</h2>
<img class="image-cover" src="pictures/httpserver.png">
<div class="hidden">
</div>
</div></section>
<section class="slide"><div>
<h2 style="margin-bottom: 20px;">Все API низкоуровневое</h2>
<ul>
<li>Объект req - Request</li>
<ul class="second">
<li>Содержит текущий запрос</li>
<li>Заголовки запроса</li>
<li>Тело запроса</li>
<li>Тип запроса GET, POST</li>
<li>URL запроса</li>
</ul>
<li>Объект res - Response</li>
<ul class="second">
<li>Содержит ответ на запрос</li>
<li>Заголовки ответа</li>
<li>Тело ответа</li>
<li>Статус ответа</li>
</ul>
</ul>
<div class="hidden">
</div>
</div></section>
<section class="slide"><div>
<h2>усложним http server</h2>
<img class="image-cover" src="pictures/httpserverhard.png">
<div class="hidden">
</div>
</div></section>
<section class="slide cover"><div>
<img src="pictures/bored.jpg">
<div class="hidden">
слишком много писать всякой обвязки. причем при создании сервера такое приходится делать каждый раз
</div>
</div></section>
<section class="slide"><div>
<h2>express - http фреймфорк</h2>
<img class="image-cover" src="pictures/express.png">
<div class="hidden">
</div>
</div></section>
<section class="slide"><div>
<h2>express - http фреймфорк</h2>
<img class="image-cover" src="pictures/expressweb.png">
<div class="hidden">
</div>
</div></section>
<section class="slide"><div>
<h2>express - middleware</h2>
<pre class="javascript">
<code>app.use(function(req, res, next){</code>
<code> console.log(req.query);</code>
<code> console.log('Got request from: ' + req.ip);</code>
<code> next();</code>
<code>});</code>
<code> </code>
<code class="comment">http://localhost:8080/</code>
</pre>
<div class="hidden">
</div>
</div></section>
<section class="slide"><div>
<h2>express - middleware</h2>
<pre class="javascript">
<code>app.get('/welcome', function(req, res, next){</code>
<code> console.log(req.query);</code>
<code> console.log('Got request from: ' + req.ip + 'on route welcome');</code>
<code> next();</code>
<code>});</code>
<code> </code>
<code class="comment">http://localhost:8080/welcome</code>
</pre>
<div class="hidden">
middleware - это функция, которая обрабатывает запрос на сервере
сможет иметь стек миддлеварин
ассоциированных с ним
Когда приходит запрос с сервера, он проходит через список миддлеварин
и следующая вызывается при помощи функции nextю
</div>
</div></section>
<section class="slide"><div>
<h2 class="top">Ссылки</h2>
<ul>
<li><a href="http://dailyjs.com/2012/05/03/windows-and-node-1/">Установка на Windows</a></li>
<li><a href="http://nodejs.org/api/">Документация</a></li>
<li><a href="http://www.youtube.com/watch?v=ILpS4Fq3lmw">Вводный курс по Node.js от Кантора</a></li>
<li><a href="https://tech.yandex.ru/education/shri/ekb-2013/talks/1502/">Лекция со Шри по Nodejs</a></li>
<li><a href="http://nodejs.org/api/modules.html">Модули</a></li>
<li><a href="http://nodejs.org/api/globals.html">Глобалы</a></li>
<li><a href="https://www.npmjs.org/doc/files/package.json.html">package.json</a></li>
</ul>
<div class="hidden">
</div>
</div></section>
<section class="slide"><div>
<h2 class="top">Ссылки</h2>
<ul>
<li><a href="http://expressjs.com/4x/api.html#application">Express</a></li>
<li><a href="http://jsman.ru/express/">Русскоязычная документация по Express</a></li>
<li><a href="http://expressjs.com/guide.html">Guide по Express</a></li>
<li><a href="http://stephensugden.com/middleware_guide/">Guide по Middleware</a></li>
<li><a href="http://nodeschool.io/">Nodeschool</a></li>
<li><a href="http://www.nodecloud.org/">Begginer nodejs</a></li>
</ul>
<div class="hidden">
</div>
</div></section>
<!--
To hide progress bar from entire presentation
just remove “progress” element.
-->
<div class="progress"><div></div></div>
<script src="./js/jquery.min.js"></script>
<script src="./js/highlight.min.js"></script>
<script src="./js/shower/shower.min.js"></script>
<script src="./js/index.js"></script>
<!-- Copyright © 2014 Yours Truly, Famous Inc. -->
<!-- Photos by John Carey, fiftyfootshadows.net -->
</body>
</html>