HighLoad++ 2017 Зал «Пекин + Шанхай», 8 ноября, 17:00 Тезисы: http://www.highload.ru/2017/abstracts/2991.html Нынче стало модно выделять UI-компоненты в отдельную библиотеку и использовать её в нескольких проектах. Мы в команде почты Mail.ru делаем так же, но столкнулись с проблемой: каждый разработчик, меняя библиотеку под свои нужды, обязательно ломает что-нибудь, что работало у других. Я расскажу о том, как мы решили эту проблему, и о том, какие инструменты для этого можно использовать. Storybook, BackstopJS, Jest, Webdriver.io, TypeScript - в их числе.

1. Как развивать
UI библиотеку
не ломая её
Артур Удалов (Mail.RU Group)

2. UI библиотека Почты Mail.RU
• 15+ разработчиков в почте
• Облако и другие проекты
• Каждый может сделать commit
2

3. 3

4. Микросервисы
• Отдельный URL
• Iframe или отдельная страница
• Свой репозиторий
4

5. 5

6. 6

7. 7

8. 8

9. 9

10. Проблемы
• Обновление требует много времени
• Скрытые баги
• Страшно вносить изменения
10

11. В чём причина?
Или кто виноват?
11

12. 12

13. Процесс разработки
13

14. Процесс разработки
14

15. Методологии разработки
15

16. Методологии разработки
• TDD – Test Driven Development
16

17. Методологии разработки
• TDD – Test Driven Development
• ПНХДД – Потом Напишем иХ Дривен Девелопмент
17

18. • TDD – Test Driven Development
• ПНХДД – Потом Напишем иХ Дривен Девелопмент
• ПДР – Пофиг Дривен Ревью
18
Методологии разработки

19. Из чего состоит UI библиотека?
62%
75%
61%
49%
38%
25%
39%
51%
SEMANTIC UI REACT TOOLBOX ANT DESIGN MAIL.RU TOOLKIT
JavaScript CSS
19

20. BEM в Почте Mail.RU
• BEM-схема именования классов
• BEM-файловая структура
• ENB сборщик
20

21. Отступления от BEM
• Переопределяем стили на уровне проекта
• Влияем одними блоками на другие
• Отступы и прочие «внешние» стили блоков
21

22. Недостатки процесса
• Разработка в рамках сервиса
• Огромные merge request
• Субъективные требования к тестам
• Нет тестов на CSS
• Неправильный BEM
22

23. Как тестировать CSS?
Тестирование скриншотами
23

24. BackstopJS
• Простейшая конфигурация
• Работает напрямую с Headless Chrome
• Легко запустить локально
• Визуальные отчёты
24

25. BackstopJS
25

26. Что скриншотить?
26

27. React Storybook
27

28. React Storybook
28

29. React Storybook
29

30. … /iframe.html? …
30

31. Генерация сценариев
31

32. React Storybook
• Разработка библиотеки отдельно от проектов
• Hot Module Replacement из коробки
• Огромное количество плагинов
• Генерация сценариев
32

33. Используйте Docker
• Одинаковые результаты в любом окружении
• Один образ в CI и локально
• Используйте наш образ:
33

34. Рекомендации к вёрстке компонентов
• CSS-модули или аналог
• className и style не пробрасываются внутрь
• Не задавайте отступы у компонентов
• Не меняйте св-во display у компонентов
34

35. Ревью скриншотов
35
• Изменение скриншотов при каждом изменении CSS
• Избегайте менять и удалять скриншоты
• Согласуйте скриншоты с дизайнерами
• Не верьте своим глазам
• Соблюдайте методологию

36. Как тестировать JavaScript?
Unit-тесты, Статический анализ
36

37. Средства для статического анализа
• Webpack
• ESLint
• TSLint
• Flow
• TypeScript
37

38. 38

39. Test Driven Development
Красный
ЗеленыйРефакторинг
39

40. test('Button', () => {
test('должен навешивать обработчик onClick', () => {
const onClick = jest.fn();
const result = shallow(
<Button
onClick={onClick}
/>,
);
result.find('button').simulate('click');
expect(onClick).toHaveBeenCalled();
});
});
40

41. describe('Button', () => {
test('должен навешивать обработчик onClick', () => {
const onClick = jest.fn();
const result = shallow(
<Button
onClick={onClick}
/>,
);
result.find('button').simulate('click');
expect(onClick).toHaveBeenCalled();
});
});
41

42. Coverage 100%
42

43. Ревью тестов
• Тесты на всё что не видно на скриншоте
• 100% coverage
43

44. Итог
44

45. Результат
• Комплексное тестирование для всего кода
• Разрабатываем библиотеку в Storybook
• Тратим минимум времени на тесты
• Пишем правильный CSS
• Знаем как всё это ревьювить
45

46. Нерешенные проблемы
• Устаревшие браузеры без Selenium не протестировать
• Масштабирование BackstopJS
• Внедрение подхода в сами микросервисы
46

47. Вопросы?
47

48. Контакты
• Артур Удалов
• Telegram: @audalov
• E-Mail: a.udalov@corp.mail.ru
48