During the presentation, I was talking about ECMAScript 6 generators which appeared very useful for both Back-End and Front-End web applications.

2. ИСПОЛЬЗОВАНИЕ ES6 ГЕНЕРАТОРОВ
НА ПРИМЕРЕ KOA.JS
Александр Трищенко
Senior Front-end Developer, DataArt
14 августа 2016

3. Агенда
• Итераторы. Генераторы.
• Использование генераторов (Redux, Koa)
• Зачем нам использовать koa.js
• Будущее. Async Await и koa.js 2.x
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 3

4. ECMAScript 2015
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 4

5. Итераторы
Кратко
• Теперь все, что можно перебрать – итерируемый объект
(iterable)
• Все что не перебирается само по себе – можно заставить с
помощью своего Symbol.iterator
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 5

6. Итераторы
Итерирование
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 6

7. Итераторы
Создание итератора
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 7

8. Препосылки появления
генераторов
14 августа 2016 8
Динамика популярности Node.js за последние 5 лет
Динамика популярности запроса Callback Hell за 5 лет

9. СТРУКТУРНАЯ
ВИЗУАЛИЗАЦИЯ JS
КОДА БЕЗ
ГЕНЕРАТОРОВ
12 August 2016

10. Генераторы
Применение
• Написание синхронного кода
• Написание приостанавливаемых функций
• Написание комплексных итераторов
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 10

11. Генераторы
Основная идея
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 11
Реализация с использованием Promise
Реализация с использованием генераторов

12. Генераторы
Синтаксис
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 12

13. Генераторы
Метод next()
• Может принимать в качестве аргумента значение, что
будет проброшено в генератор
• Возвращаемое значение – объект с двумя ключами
– value – часть выражения получаемая из генератора
– done – булево состояние генератора
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 13

14. Генераторы
Производительность
14 августа 2016 14
0,3346
0,3242
0,2851
0,6628
0,777
0,6085
0 0,2 0,4 0,6 0,8 1
Generators
Promises
Callbacks
Firefox Chrome

15. 14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 15

16. redux-saga
Еще одна библиотека
• Это библиотека
• Это библиотека написанная на генераторах
• Это библиотека, которая прячет impure функции с глаз
долой
• Это библиотека, которая позволяет вам писать
синхронный код
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 16

17. redux-saga
На практике
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 17

18. redux-saga
На практике
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 18

19. redux-saga
Послесловие
• Саги (Sagas) не декларируются как обычные Actions,
их необходимо внедрять через sagaMiddleware
• Очевидно, что сам sagaMiddleware – ничто иное, как
middleware вашего store.
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 19

20. 14 августа 2016 20

21. koa.js
В двух словах
• node.js фреймворк для серверной разработки
• node.js фреймворк который использует ES6
генераторы, асинхронные функции ES2016.
• node.js фреймворк написанный командой express.js
• «Фреймворк нового поколения»
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 21

22. АРХИТЕКТУРНАЯ
ДИАГРАММА
РЕАЛИЗАЦИИ
MIDDLEWARE В KOA.JS
12 August 2016

23. koa.js
Middleware
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 23

24. koa.js
Преимущества
• Наличие огромного количества библиотек обернутых в
co.js
• Модульность и легковесность
• Возможность писать более понятный код
• Возможность писать меньше кода
• Высокая активность сообщества
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 24

25. koa.js
Преимущества
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 25
Middleware ядро Маршрутизация Шаблонизатор HTTP утилиты
Koa + - - -
Express + + + +
Connect + - - -

26. koa.js
Пара полезных пакетов для старта
• Koa-cors – разрешаем кроссдоменные запросы одной
строкой
• koa-route – полноценный роутинг
• koa-jwt – Серверная реализация авторизации с
использованием JWT токена.
• koa-bodyparse – парсер тела приходящих запросов
• koa-send – управление статикой
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 26

27. koa.js
Недостатки
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 27

28. koa.js 2
Фреймворк нового поколения?
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 28

29. Async functions
Обзор
• Async это Promise.
• Await это Promise.
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 29

30. Async functions
Cинтаксис
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 30

31. Async functions
Послесловие
• Асинхронные функции удобнее генераторов (меньше
кода, нет необходимости «оборачивать» промисы для
генераторов).
• Асинхронные функции пока еще не часть стандарта и
не ясно, будут ли вообще его частью.
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 31

32. Мораль
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 32

33. Список используемых ресурсов
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 33
Рисунки заимствовал тут
https://www.b17.ru/foto/uploaded/f3617e15cc29ca89af
0d7e37e790d1b9.jpg
http://drawi.ru/pict/158576
http://rus.tvnet.lv/showbiz/kultura/251662-
gjeroi_populjarnogo_multsjeriala_kot_ljeopold_jedut_
v_rigu
Сниппеты заимствовал тут
https://developer.mozilla.org/ru/

34. Спасибо
14 августа 2016 34
https://www.facebook.com/tryshchenko
ensaierwa@gmail.com