ИСПОЛЬЗОВАНИЕ 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/

Спасибо

14 августа 2016 34

https://www.facebook.com/tryshchenko

ensaierwa@gmail.com