ИСПОЛЬЗОВАНИЕ ES6 ГЕНЕРАТОРОВНА ПРИМЕРЕ KOA.JS
Александр Трищенко
Senior Front-end Developer, DataArt
14 августа 2016
Агенда
• Итераторы. Генераторы.
• Использование генераторов (Redux, Koa)
• Зачем нам использовать koa.js
• Будущее. Async Await и koa.js 2.x
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 3
ECMAScript 2015
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 4
Итераторы Кратко
• Теперь все, что можно перебрать – итерируемый объект
(iterable)
• Все что не перебирается само по себе – можно заставить с
помощью своего Symbol.iterator
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 5
ИтераторыИтерирование
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 6
ИтераторыСоздание итератора
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 7
Препосылки появления генераторов
14 августа 2016 8
Динамика популярности Node.js за последние 5 лет
Динамика популярности запроса Callback Hell за 5 лет
СТРУКТУРНАЯ
ВИЗУАЛИЗАЦИЯ JS
КОДА БЕЗ
ГЕНЕРАТОРОВ
12 August 2016
ГенераторыПрименение
• Написание синхронного кода
• Написание приостанавливаемых функций
• Написание комплексных итераторов
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 10
ГенераторыОсновная идея
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 11
Реализация с использованием Promise
Реализация с использованием генераторов
ГенераторыСинтаксис
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 12
ГенераторыМетод next()
• Может принимать в качестве аргумента значение, что
будет проброшено в генератор
• Возвращаемое значение – объект с двумя ключами
– value – часть выражения получаемая из генератора
– done – булево состояние генератора
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 13
ГенераторыПроизводительность
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
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 15
redux-sagaЕще одна библиотека
• Это библиотека
• Это библиотека написанная на генераторах
• Это библиотека, которая прячет impure функции с глаз
долой
• Это библиотека, которая позволяет вам писать
синхронный код
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 16
redux-sagaНа практике
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 17
redux-sagaНа практике
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 18
redux-sagaПослесловие
• Саги (Sagas) не декларируются как обычные Actions,
их необходимо внедрять через sagaMiddleware
• Очевидно, что сам sagaMiddleware – ничто иное, как
middleware вашего store.
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 19
14 августа 2016 20
koa.jsВ двух словах
• node.js фреймворк для серверной разработки
• node.js фреймворк который использует ES6
генераторы, асинхронные функции ES2016.
• node.js фреймворк написанный командой express.js
• «Фреймворк нового поколения»
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 21
АРХИТЕКТУРНАЯ
ДИАГРАММА
РЕАЛИЗАЦИИ
MIDDLEWARE В KOA.JS
12 August 2016
koa.jsMiddleware
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 23
koa.jsПреимущества
• Наличие огромного количества библиотек обернутых в
co.js
• Модульность и легковесность
• Возможность писать более понятный код
• Возможность писать меньше кода
• Высокая активность сообщества
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 24
koa.jsПреимущества
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 25
Middleware ядро Маршрутизация Шаблонизатор HTTP утилиты
Koa + - - -
Express + + + +
Connect + - - -
koa.js Пара полезных пакетов для старта
• Koa-cors – разрешаем кроссдоменные запросы одной
строкой
• koa-route – полноценный роутинг
• koa-jwt – Серверная реализация авторизации с
использованием JWT токена.
• koa-bodyparse – парсер тела приходящих запросов
• koa-send – управление статикой
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 26
koa.js Недостатки
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 27
koa.js 2
Фреймворк нового поколения?
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 28
Async functionsОбзор
• Async это Promise.
• Await это Promise.
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 29
Async functionsCинтаксис
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 30
Async functionsПослесловие
• Асинхронные функции удобнее генераторов (меньше
кода, нет необходимости «оборачивать» промисы для
генераторов).
• Асинхронные функции пока еще не часть стандарта и
не ясно, будут ли вообще его частью.
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 31
Мораль
14 августа 2016 И С П О Л Ь З О В А Н И Е E S 6 Г Е Н Е Р А Т О Р О В Н А П Р И М Е Р Е K O A . J S 32
Список используемых ресурсов
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/
Recommended
