Тяжёлое бремя времени:
типичные ошибки при работе со временем

О себе

Я работал в трёх продуктовых компаниях, видел много кода в проектах на разных языках и фреймворках

Что я увидел

1. В разных проектах — похожие задачи по работе с датой/временем
2. Также возникают похожие задачи вызова асинхронных/удалённых частей кода (AJAX, запросы в БД и т.п.)
3. Разные люди решают эти задачи почти одинаково, независимо от языка
4. И допускают одинаковые ошибки

О чём хочу рассказать

• О повторяющихся паттернах при работе с датой/временем/асинхронным кодом
• Об ошибках, которые легко сделать
• И как их не допускать

1.1 Время не стоит на месте

Пример: запрос в базу за вчера

const startDate = new Date();
startDate.setDate(startDate.getDate() - 1); // вчера

const endDate = new Date();

queryDatabase(startDate, endDate);
// запрос за дату date >= вчера && date < сегодня
        

Пример: запрос в базу за вчера?

const startDate = new Date();               // 2019-05-22
startDate.setDate(startDate.getDate() - 1); // 2019-05-21

const endDate = new Date();                 // 2019-05-23

queryDatabase(startDate, endDate);
// запрос за дату date >= 2019-05-21 && date < 2019-05-23
        

Проблемы, тимлид?

Мораль

• Date.now() !== Date.now()
• Один метод — один Date.now() или new Date()
• Связанные по смыслу переменные должны вычисляться из одной даты

1.2 Измерение интервалов и логирование событий

Логируем транзакции

const start = Date.now();
transaction();
const finish = Date.now();
log(`Транзакция длилась ${finish - start}мс`);
        

Логируем транзакции

const start = Date.now();                      // 1550000000000
transaction();
const finish = Date.now();                     // 1549999999000
log(`Транзакция длилась ${finish - start}мс`); // Транзакция длилась -1000мс
        

Мораль

• Date.now() — неравномерный
• Date.now() — немонотонный
• NTP daemon может замедлять и отматывать назад время
• Пользователь может сам менять время
• Используем performance.now()

Бэкэнд

• Аналогичная проблема, гуглить "consistent monotonic clock"
• В Java есть System.nanoTime()

Распределённая система

Вектор времени или счётчики событий

Фронт + бэк = распределённая система

2.1 AJAX и коллбэки

Пример: suggest

Последовательные запросы

ajax(query1, callback);
        

Последовательные запросы

ajax(query1, callback);
ajax(query2, callback);
        

Последовательность коллбэков не гарантирована!

Плохой suggest

Варианты выполнения

Часто встречается на UI

• вывод подсказок autocomplete, suggest
• переключение вкладок в tabbed UI
• drag&drop однотипных элементов (товары в корзину)
• drag&drop одного и того же элемента (карточка на канбан-доске)

Мораль

Если есть источник однотипных запросов:

• при поступлении следующего запроса прерываем все незавершённые
• при обработке ответов игнорируем старые

В RxJS это уже решено

var keyups = Rx.Observable.fromEvent($('#input'), 'keyup')
    .pluck('target', 'value')
    .filter(text => text.length > 2)
    .debounce(500 /* миллисекунд */)
    .distinctUntilChanged();

var suggestions = keyups.flatMapLatest(ajax); // игнорируем старые ответы
        

2.2 О жизни React-компонентов

Что не так в этом коде?

class MapControls extends React.PureComponent {
    // ...
    onLocationError() {
        // Показываем плашку ошибки
        this.setState({ locationFailed: true });

        // Убираем плашку ошибки через 3 секунды
        setTimeout(() => {
            this.setState({ locationFailed: false });
        }, 3000);
    }
}
        

Что не так в этом коде?

class MapControls extends React.PureComponent {
    // ...
    onLocationError() {
        // Показываем плашку ошибки
        this.setState({ locationFailed: true });

        // Убираем плашку ошибки через 3 секунды
        setTimeout(() => {
            this.setState({ locationFailed: false });
        }, 3000);
    }
}
        

Не забываем про unmount

class MapControls extends React.PureComponent {
    onLocationError() {
        // Показываем плашку ошибки
        this.setState({ locationFailed: true });
        // Убираем плашку ошибки через 3 секунды
        this.timer = setTimeout(() => {
            this.setState({ locationFailed: false });
        }, 3000);
    }
    componentWillUnmount() {
        window.clearTimeout(this.timer);
    }
}
        

Методы могут вызваться с задержкой:

• из _.throttle(), _.debounce()
• из setTimeout(), setInterval()
• из requestAnimationFrame(), requestIdleCallback()
• из незавершённых запросов AJAX/fetch

Мораль

Причина проблем — несовпадение времени жизни объектов

• утечки памяти (живой объект держит ссылку)
• вызов кода мёртвого объекта

3.1 Promise

Что в этом коде можно ускорить?

prepare()
    .then(() => query1())
    .then(() => query2())
    .then(() => {
        // обработка ответов
    });
        

Что в этом коде можно ускорить?

prepare()
    .then(() => query1())
    .then(() => query2())
    .then(() => {
        // обработка ответов
    });
        

Независимые then можно распараллелить

Управляем асинхронным кодом

Promise API

• Promise.all()
• Promise.race()
• Маловато будет!
  

• async.parallel()
• async.series()
• async.waterfall()
• map reduce each filter для асинхронных итераторов

bluebird

• Promise.any()
• Promise.map(input, mapper, {concurrency})
• mapSeries reduce each filter

Распараллелим независимые запросы

Promise.all([query1(), query2()])
    .then(() => {
        // обработка ответов
    });
        

• выполняются параллельно
• при ошибках быстрее упадём

3.2 Await

Используя await, главное — не перестараться

const url = await browser.getUrl();
const href = await browser.getAttribute(selector, 'href');
        

Используя await, главное — не перестараться

const url = await browser.getUrl();                        // ждём выполнения
const href = await browser.getAttribute(selector, 'href');
        

Используя await, главное — не перестараться

const url = await browser.getUrl();                        // ждём выполнения
const href = await browser.getAttribute(selector, 'href'); // ждём выполнения
        

browser.getUrl()
    .then(result => url = result)
    .then(() => browser.getAttribute(selector, 'href'))
    .then(result => href = result);
        

Распараллелим независимые запросы

const [url, href] = await Promise.all(
    [browser.getUrl(), browser.getAttribute(selector, 'href')]
);
        

Мораль

• Проще написать await, чем .then().then()
• Проще внести незапланированную синхронизацию
• Следите за кодом — возможно, ваши awaitможно распараллелить!

• Описание Promise.all на MDN
• Async
• Bluebird
• RxJS 4 , RxJS 5+
• Про debouncing и throttling на английском и на русском языке
• Monotonic Clocks in Windows and POSIX
• How ntpd operates
• Из-за коррекции времени ntpd упал кластер Hadoop
• Из-за немонотонности и високосной секунды упал Cloudflare DNS
• Баг ВК с кукой авторизации на час

• Изучайте качественный open-source (Lodash, RxJS и т.п.)
• Избегайте типичных ошибок
• Не изобретайте велосипед