Компонентный подход принес много пользы, а вместе с тем и проблему переиспользования компонентов. В проекте появились сотни, тысячи компонентов, но со временем мы совсем забыли где они живут, как их использовать и как они выглядят. А что если дизайнер нарисовал интерфейс с новой кнопкой? Использовать текущий компонент или сделать новую кнопку для маленького интерфейса? Я расскажу, как мы сделали пряничный домик для дизайнеров, а также наладили коммуникацию и коллаборацию между дизайнерами, разработчиками и менеджерами.

1. Design Pla+orm

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

3. F E D
C
BA
3
Product
Quality
Design System
TTM

4. F E D
C
BA
Product
Quality
TTM
4
Design System

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

6. Проблемы
6

7. 7
<Button />
Сomponent

8. 8
<Component />
Service A Service B Service {N}
<Collection />
App {N}
A
A
A

9. Много компонентов —
много связей
9

10. Components count Create interface Jme
Ценность компонента со временем

11. • Существует ли такой компонент?
• Где используется компонент?
• Разные версии компонентов
• Компонентов нет в дизайне (но есть на сайте)
• Я новичок, какой компонент использовать?
• ….
11
Ещё вопросы

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

13. Разработчики —
знание обо всех компонентах
13

14. 14

15. Дизайнеры —
поиграться в песочнице
15

16. Менеджеры —
возможность экспериментировать
16

17. Поддержка —
React, Basis.js и Web Components
17

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

19. Carte Blanche
https://github.com/carteb/carte-blanche
19

20. 20

21. Meteor Chroma]c
https://github.com/meteor/chromatic/
21

22. Build BeauJful Interfaces Faster
hbps://www.youtube.com/watch?v=dlMe7u02m50
22

23. Build Components
http://compositor.io/
23

24. 24

25. 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/
25
https://github.com/storybooks/react-storybook
React Styleguidist /Redactor/

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

27. Protein /Tool/
http://theprotein.io
http://rene.jon.gold
Declara@ve design tool /Tool/
https://www.figma.com
Firgma, Atomic /Prototype/
27
https://reactstudio.com
React Studio /Visual Editor/
https://atomic.io

28. Выходит
React или 🤷
28

29. Решение проблемы?

30. 30
Свой решатель проблем

31. Что общего?
Компонентный подход
31

32. Формула компонента
fn(x) → y
32

33. Не важно
фреймворк или библиотека
33

34. Phakt
34

35. Phakt
Звезда третьей звёздной величины и ярчайшая
звезда созвездия Голубя
https://en.wikipedia.org/wiki/Alpha_Columbae
35

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

37. Ценности
37

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

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

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

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

42. Демо
42

43. 43
Playground

44. 44
Немного технической
части

45. 45
$ npm run platform
Service Manager
Find *.platform.js
+ watch Mode
Search Service
Service AnalyzeService Viewer
Update data
hot reloading

46. 46
React
Angular
Basis.js
Web Component
PlatformFile Interface {
group
stage
tags
component()
storyboard()
}
.platform.js
API Interface {
create()
clone()
example()
toString()
}
API Adapter
Import
Service ViewerService Analyze
AST
Resources
Errors
Performance
Plugin API

47. Скоро в
github.com/avito-tech
47

48. Спасибо
@limarc

49. Image refs
• https://dribbble.com/shots/2810191-Lego-Brick-Loader
• https://dribbble.com/shots/365048-I-Will-Never-Lego
• https://dribbble.com/shots/3106656-10000-Layers-Of-Legos-2x
• https://dribbble.com/shots/2727268-Lego
• https://dribbble.com/shots/3274271-Microservices-illustration-for-magazine-1
• https://dribbble.com/shots/3274286-Microservices-illustration-for-magazine-4
49