Стабы для фронтенда - Никита Мостовой (HeadHunter)

1. Стабы для фронтенда
Мостовой Никита, HeadHunter
1

2. Привет
• Frontend at HeadHunter
• Работаю в "стартапе" внутри
компании
• Twitter: @xnimorz
• xnim.ru
2

3. https://test.hh.ru
3

4. Стек
Фронтенд
• React
• Babel
• Redux
Бекенд
• Java
• PostgreSQL
• Jersey
4

5. Проблема
• Фронтенд делает задачи в одно время или ранее бекенда
• Нужны ответы от сервера для тестирования и дебага
• Быстрая подмена данных, для проверки поведения в случае,
например, инвалидных данных
5

6. Решения?
• Настроить процесс на ноде.
• Стаб в джаве
• Решаем задачу на фронтенде
6

7. Отдельный процесс на ноде
Недостатки
• Лишний сервис
• Лишние запросы
• Лишняя прослойка
между java и node.js
Преимущества
• Простая конфигурация
• Не имеет шанса попасть
на прод
7

8. Перед задачей пишем стабы прямо в java
Недостатки
• Есть шанс отправить на прод стаб
• У фронтенд разработчиков один конфиг, у
java другой
• Фронтенд разработчикам нужно писать java
код
• Необходимо при изменении пересобирать java
Преимущества
• Код ответов в одном
месте
8

9. Решаем задачу на фронте
Недостатки
• Нет "реального запроса"
• Стабим только JSON общение
Преимущества
• Легко конфигурировать
• Бандл со стабами не попадает на
прод
• Включается вместе с dev сборкой
• Можем предусмотреть разные
развития событий
9

10. Структура общения
• Первый запрос — HTML ответ
• Последующие запросы — только JSON общение
• В dev режиме после первого запроса получаем
стаб запрашиваемого урла
10

11. Как это работает? Простой случай
{
regexp: /ats/vacancy/new/,
action: createResponse({
receive: () => {
return require('./get.ats.vacancy.new.json');
},
})
},
Записываем в конфиг:
Создаем файл .json с json ответа
11

12. Как это работает? Конфигурируемый
GET запрос:
{
regexp: /ats/vacancy/([0-9]+)/edit/,
action: createResponse({
receive: (matches) => {
const jsonStub = require('./get.ats.vacancy.edit.json')
// some code ...
return jsonStub;
},
})
},
12

13. POST
{
regexp: /ats/vacancy/([0-9]+)/save/,
method: 'POST',
action: createResponse({
receive: (matchers, params) => {
// processing
}
}),
},
13

14. Встраиваем стабы в код:
• Создаем объект для фетчинга данных (объект инкапсулирует axios)
• Если собираем в DEV режиме, реквайрим стабы
• Определяем методы для всех типов запросов (GET, POST и т.д.) свои
методы-декораторы над методами axios. Эти же методы могут
возвращать результат стабов.
14

15. Встраиваем стабы в код
• Для корректных ответов от клиента конструируем
ответ с помощью window.Response
• Также ответ стабов может использовать java
приложение для юнит тестов ресурсных методов
15

16. Спасибо за внимание!
• Twitter: @xnimorz
• xnim.ru
16