Download to read offline
Uploaded byOntico
Как развивать библиотеку компонентов, не ломая ее / Артур Удалов (Mail.Ru Group)
Документ обсуждает разработку библиотеки пользовательского интерфейса в Mail.ru, включая проблемы и методологии, такие как TDD и BEM. Рассматриваются инструменты тестирования, такие как BackstopJS и React Storybook, а также рекомендации для эффективного проектирования компонентов. Также упоминаются нерешенные проблемы, связанные с тестированием в устаревших браузерах и масштабированием тестового инструмента.
More Related Content
Similar to Как развивать библиотеку компонентов, не ломая ее / Артур Удалов (Mail.Ru Group)
Как развивать библиотеку компонентов, не ломая ее / Артур Удалов (Mail.Ru Group)
- 1. Как развивать UI библиотеку неломая её Артур Удалов (Mail.RU Group)
- 2. UI библиотека ПочтыMail.RU • 15+ разработчиков в почте • Облако и другие проекты • Каждый может сделать commit 2
- 3.
- 4. Микросервисы • Отдельный URL •Iframe или отдельная страница • Свой репозиторий 4
- 5.
- 6.
- 7.
- 8.
- 9.
- 10. Проблемы • Обновление требуетмного времени • Скрытые баги • Страшно вносить изменения 10
- 11. В чём причина? Иликто виноват? 11
- 12.
- 13.
- 14.
- 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.
- 26.
- 27.
- 28.
- 29.
- 30.
- 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.
- 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.
- 43. Ревью тестов • Тестына всё что не видно на скриншоте • 100% coverage 43
- 44.
- 45. Результат • Комплексное тестированиедля всего кода • Разрабатываем библиотеку в Storybook • Тратим минимум времени на тесты • Пишем правильный CSS • Знаем как всё это ревьювить 45
- 46. Нерешенные проблемы • Устаревшиебраузеры без Selenium не протестировать • Масштабирование BackstopJS • Внедрение подхода в сами микросервисы 46
- 47.
- 48. Контакты • Артур Удалов •Telegram: @audalov • E-Mail: a.udalov@corp.mail.ru 48