РИТ++ 2017, Frontend Сonf Зал Дели + Калькутта, 6 июля, 17:00 Тезисы: http://frontendconf.ru/2017/abstracts/2561 Компонентный подход принес много пользы, а вместе с тем и проблему переиспользования компонентов. В проекте появились сотни, тысячи компонентов, но со временем мы совсем забыли, где они живут, как их использовать и как они выглядят. Тут на помощь приходят различные инструменты и системы для работы с компонентами и их композициями. Такие решения призваны облегчить и оптимизировать работу фронтенд-разработки, а также улучшить взаимодействие с другими функциями, такими как дизайн и тестирование. Решений становится больше и это здорово, но часто оказывается, что большим компаниям и проектам готовые решения не подходят, и тогда создается собственное.

1. Component Platform
Alexander Lobashev, @limarc

3. Тогда

4. 4
2014

5. 2014
• 6 разработчиков фронтенда
• Простой код ($ + $.fn)
• Небольшое количество компонентов
• Простые инструменты тестирования (Chai + Mocha)
• Свежий код
5

6. Создание продукта
6
Product Design Engineering

7. Дизайн-система

8. 8
2016
2014

9. 2016
• 26 разработчиков фронтенда
• Формальные процессы в разработке
• Сложные задачи (react, basis, no jquery)
• SPA приложения и много компонентов (HOC, Composition)
• Сложные инструменты тестирования (Chai + Mocha + Karma)
• Со временем код устаревает
9

10. Создание продукта
10
Product Design Engineering
Нет уникального стиля
Нет базовых элементов
Дизайнеры + Разработчики = ⚔️
Нет UI компонентов
Сложно найти компонент
Нет просмотра
компонентов

11. 11

13. Много компонентов =
ниже ценность компонента
13

14. 14

15. 15

16. 16
Open + In Progress
Invalid
In ReviewПроблема переиспользования компонентов

17. Проблемы
• Отсутствие синхронизации (дизайнера и разработчика)
• Поиск нужного компонента
• Много разных версий компонента (какую использовать?)
• Сложное тестирование компонентов
• Изменения связанных компонентов (могут сломать продукты)
• Страдание нового разработчика (обучение)
17

18. Покажите,
где выход?
18

19. Потребности

20. 20
Разработчики
Знания о компонентах

21. 21

22. Потребности
• Максимальное переиспользование
• UI компоненты
• Каталог компонентов
• Состав компонента
• История компонента
• Документация
22

23. 23
Дизайнеры
Каталог компонентов

24. 24
«… х■■ найдешь актуальный макет»

25. Потребности
• Унификация стилей (стандартные гайдлайны)
• Актуальный каталог компонентов
• Возможность поиграться с компонентами
• Экспорт во внешние системы (Sketch, Figma)
• Прототипирование интерфейсов
• Дизайнеры + Разработчики = 😍
25

26. 26
Климат кода
React, Basis.js и нативный код

27. Сейчас
27

28. 28
▲
Component Platform

29. 29
Технологии и процессы
эффективного создания продуктов

30. 30
◉
Прозрачные процессы

31. Процессы
• Манифест создания приложений
• Манифест хранения данных приложений
• Мониторинг ключевых метрик
• Оптимизация старых процессов
• Проект “Инициативы”
31

32. 32
◉
Дизайн-система

33. 33
Способ коммуникации между
дизайнером и разработчиком

34. Зачем?
• Индустриализация разработки интерфейсов
• Много “продуктовых” команд (дорого изобретать с нуля)
• Согласованность разработки
• Повышение качества разработки
• “Дизайн-система” звучит круто
• Набор стандартных шаблонов
• Технологическая платформа компонентов
34

35. 35
Тренд

36. 36
Готовые решения

37. Carte Blanche /Playground/
https://github.com/carteb/carte-blanche
https://github.com/meteor/chromatic/
Meteor Chromatic /Showcase/
https://github.com/airbnb/react-sketchapp
React Sketchapp /Sync to Sketch/
37
https://reactstudio.com
React Studio /Visual Editor/

38. React Cosmos /Redux/
https://github.com/react-cosmos/react-cosmos
https://github.com/electrode-io/electrode-explorer
Electrode Explorer /Versions with npm/
https://github.com/storybooks/react-storybook
React Storybook /Logger + addons/
38
https://github.com/storybooks/react-storybook
React Styleguidist /Redactor/

39. Vue Play /Vue.js/
https://github.com/vue-play/vue-play
https://github.com/bhauman/devcards
Devcards /ClojureScript/
https://sourcejs.com
Source.js /JavaScript/
39
https://github.com/yandex/dpt
Yandex Depo /BEM-based/

40. Protein /Tool/
http://theprotein.io
http://compositor.io/
Build components /Tool/
https://www.figma.com
Figma, Atomic /Prototype/
40
https://atomic.io

41. React или 🤷♀️
41

42. Phakt
42

43. Инструмент для визуального
отображения кода
43

44. Ценности
44

45. Язык
коммуникации
45

46. Унификация
визуального стиля
46

47. Скорость
создания продукта
47

48. Гибкость
изменения продукта
48

49. Демо
49

50. 50

51. 51
Playground

52. 56
◉
Инструменты оценки качества

53. Видеть
изменения

54. Контролировать
изменения

55. Не бояться делать
изменения

57. 1. Платформа тестирования

58. Требования к платформе —
простота, скорость и юзерфрендли

59. TDD, BDD или test()
— как нравится вам

60. Git, Watch, Cache, Parallelizes test
— умное использование окружения

61. Messages, Interactive mode, Zero
Configuration, Instant Feedback
— дружелюбность

62. Jest

63. 2. Snapshot.js

64. Инструмент для
исследования компонента

65. Возможности
• Информация о структуре компонента
• Генерация дерева компонента (jest.snapshot)
• Генерация разных состояний компонента
• Поиск элементов в компоненте
• Поиск компонента в компоненте
• Эмуляция событий в компоненте
69

66. // Snapshot test
test('button', () => {
const snap = snapshot(<Button>Button</Button>);
expect(snap.snapshot).toMatchSnapshot();
});
Генерация структуры

67. События компонента
// Event test
test('button with onClick', () => {
const fn = jest.fn();
const snap = snapshot(<Button onClick={fn}>Button</Button>);
snap.find('button').simulate('click');
expect(snap.snapshot).toMatchSnapshot();
expect(fn).toHaveBeenCalled();
});

68. Поиск элемента
// Find test
test('alert with close', () => {
const snap = snapshot(<Alert hasClose={true}>Alert</Alert>);
const elementClose = snap.find(element => {
return element.props.className.includes('close');
});
expect(elementClose.type).toBe('button');
});

69. 3. Debug.js

70. Инструмент для
проверки компонента

71. Возможности
• Позволяет писать правила, по которым будет проверяться
компонент
• Проверка свойств компонента
• Проверка сложных зависимостей в компоненте
• Возможность задания кастомных правил для проверки
75

72. Нашли ошибки
после первого релиза

73. Компонент платформа
• Прозрачные процессы
• Технологическая платформа для промышленной разработки
• Инструменты оценки качества изменений
77

74. 78
Развивайте платформу
и делитесь опытом

75. Спасибо
@limarc

76. Image refs
• Fabricio Rosa Marques
https://dribbble.com/shots/2810191-Lego-Brick-Loader
• Kee Lee
https://dribbble.com/shots/3106656-10000-Layers-Of-Legos-2x
• Berin Catic
https://dribbble.com/shots/3274286-Microservices-illustration-for-magazine-4
• Clip Art Bunny Rabbits
http://olddesignshop.com/2017/02/free-vintage-clip-art-bunny-rabbits/
80