![Page 1: Денис Чистяков — JavaScript на фронте и в тылу](https://reader034.vdocuments.net/reader034/viewer/2022052412/557ee82fd8b42ad17d8b45a0/html5/thumbnails/1.jpg)
Фронтенд разработчик
JavaScriptна фронтеи в тылуЧистяков Денис
Я.Субботник, Екатеринбург, 6 июля2013
![Page 2: Денис Чистяков — JavaScript на фронте и в тылу](https://reader034.vdocuments.net/reader034/viewer/2022052412/557ee82fd8b42ad17d8b45a0/html5/thumbnails/2.jpg)
Кто занимается веб-разработкой?
2
![Page 3: Денис Чистяков — JavaScript на фронте и в тылу](https://reader034.vdocuments.net/reader034/viewer/2022052412/557ee82fd8b42ad17d8b45a0/html5/thumbnails/3.jpg)
На каких языках?PHP, Python, JavaScript, Node.js?
3
![Page 4: Денис Чистяков — JavaScript на фронте и в тылу](https://reader034.vdocuments.net/reader034/viewer/2022052412/557ee82fd8b42ad17d8b45a0/html5/thumbnails/4.jpg)
Бэкенд
![Page 5: Денис Чистяков — JavaScript на фронте и в тылу](https://reader034.vdocuments.net/reader034/viewer/2022052412/557ee82fd8b42ad17d8b45a0/html5/thumbnails/5.jpg)
Киоск с шавермой против ресторана
5
![Page 6: Денис Чистяков — JavaScript на фронте и в тылу](https://reader034.vdocuments.net/reader034/viewer/2022052412/557ee82fd8b42ad17d8b45a0/html5/thumbnails/6.jpg)
Киоск с шавермой против ресторана
6
![Page 7: Денис Чистяков — JavaScript на фронте и в тылу](https://reader034.vdocuments.net/reader034/viewer/2022052412/557ee82fd8b42ad17d8b45a0/html5/thumbnails/7.jpg)
![Page 8: Денис Чистяков — JavaScript на фронте и в тылу](https://reader034.vdocuments.net/reader034/viewer/2022052412/557ee82fd8b42ad17d8b45a0/html5/thumbnails/8.jpg)
Цели Node.JS
Разработать быстрый и легкий фреймворк:• ориентированный на работу с сетью• событийный• способный исполнять JavaScript внутри себя
8
![Page 9: Денис Чистяков — JavaScript на фронте и в тылу](https://reader034.vdocuments.net/reader034/viewer/2022052412/557ee82fd8b42ad17d8b45a0/html5/thumbnails/9.jpg)
All You Need Is… File
• libUV• epoll• kqueue• /dev/poll• select• …• ???????• PROFIT!
9
![Page 10: Денис Чистяков — JavaScript на фронте и в тылу](https://reader034.vdocuments.net/reader034/viewer/2022052412/557ee82fd8b42ad17d8b45a0/html5/thumbnails/10.jpg)
Event Loop
10
![Page 11: Денис Чистяков — JavaScript на фронте и в тылу](https://reader034.vdocuments.net/reader034/viewer/2022052412/557ee82fd8b42ad17d8b45a0/html5/thumbnails/11.jpg)
Схема работы
11
![Page 12: Денис Чистяков — JavaScript на фронте и в тылу](https://reader034.vdocuments.net/reader034/viewer/2022052412/557ee82fd8b42ad17d8b45a0/html5/thumbnails/12.jpg)
Почему Node.js?
• Быстрый• JavaScript — самый популярный язык
программирования *• Клиентский JS-программист может быстро
пересесть на серверный JS• Удобный интерфейс для написания C/C++ –
биндингов
12
* 21% — по данным статистики github.com/languages
![Page 13: Денис Чистяков — JavaScript на фронте и в тылу](https://reader034.vdocuments.net/reader034/viewer/2022052412/557ee82fd8b42ad17d8b45a0/html5/thumbnails/13.jpg)
Архитектура
13
GETNginx
ProxyPassNode.js
Worker
Worker
Worker
…
Worker
Node-Cluster
HTMLHTML
Роутинг
![Page 14: Денис Чистяков — JavaScript на фронте и в тылу](https://reader034.vdocuments.net/reader034/viewer/2022052412/557ee82fd8b42ad17d8b45a0/html5/thumbnails/14.jpg)
Intel Xeon E5-26602×8 ядер8×8 Gb16 рабочих процессов Node.js150 rps на процесс
Сервера и нагрузка
14
![Page 15: Денис Чистяков — JavaScript на фронте и в тылу](https://reader034.vdocuments.net/reader034/viewer/2022052412/557ee82fd8b42ad17d8b45a0/html5/thumbnails/15.jpg)
Для сравнения, посещаемость Е1 — 10 000 000 * просмотров, т.е. ≈ 115 rps
15
* по данным статистики LiveInternet
![Page 16: Денис Чистяков — JavaScript на фронте и в тылу](https://reader034.vdocuments.net/reader034/viewer/2022052412/557ee82fd8b42ad17d8b45a0/html5/thumbnails/16.jpg)
Фронтенд
![Page 17: Денис Чистяков — JavaScript на фронте и в тылу](https://reader034.vdocuments.net/reader034/viewer/2022052412/557ee82fd8b42ad17d8b45a0/html5/thumbnails/17.jpg)
![Page 18: Денис Чистяков — JavaScript на фронте и в тылу](https://reader034.vdocuments.net/reader034/viewer/2022052412/557ee82fd8b42ad17d8b45a0/html5/thumbnails/18.jpg)
18
Браузер Сервер
1
2
1Node.js
JSON3 4 2
3
4
![Page 19: Денис Чистяков — JavaScript на фронте и в тылу](https://reader034.vdocuments.net/reader034/viewer/2022052412/557ee82fd8b42ad17d8b45a0/html5/thumbnails/19.jpg)
Различия
19
Бэкенд Фронтенд
File system Ajax
ECMAScript 5 i-ecma
controller.js —
![Page 20: Денис Чистяков — JavaScript на фронте и в тылу](https://reader034.vdocuments.net/reader034/viewer/2022052412/557ee82fd8b42ad17d8b45a0/html5/thumbnails/20.jpg)
Различия
20
Бэкенд Фронтенд
File system Ajax
ECMAScript 5 i-ecma
controller.js —
![Page 21: Денис Чистяков — JavaScript на фронте и в тылу](https://reader034.vdocuments.net/reader034/viewer/2022052412/557ee82fd8b42ad17d8b45a0/html5/thumbnails/21.jpg)
Различия
21
Бэкенд Фронтенд
File system Ajax
ECMAScript 5 i-ecma
controller.js —
![Page 22: Денис Чистяков — JavaScript на фронте и в тылу](https://reader034.vdocuments.net/reader034/viewer/2022052412/557ee82fd8b42ad17d8b45a0/html5/thumbnails/22.jpg)
НЕЛЬЗЯ ПРОСТО ВЗЯТЬ
И ПОЛОЖИТЬКОНТРОЛЛЕР НА КЛИЕНТ
![Page 23: Денис Чистяков — JavaScript на фронте и в тылу](https://reader034.vdocuments.net/reader034/viewer/2022052412/557ee82fd8b42ad17d8b45a0/html5/thumbnails/23.jpg)
23
Браузер Node.js
controller #1 controller #2
![Page 24: Денис Чистяков — JavaScript на фронте и в тылу](https://reader034.vdocuments.net/reader034/viewer/2022052412/557ee82fd8b42ad17d8b45a0/html5/thumbnails/24.jpg)
Что получили в итоге?
• Быстроотвечающий, отказоустойчивый сервис• Максимальное реиспользование кода на клиенте и
сервере• Гибкую настройку
24