Компонентный веб. Проникновение в дизайн. theprotein.io

1. Компонентный веб
Проникновение в дизайн
Антон Виноградов, Альфа-Лаборатория
FrontendConf 2015, 21-22 мая
1

2. Антон Виноградов
Разработчик интерфейсов
Альфа-Лаборатория
- более 3 лет занимаюсь фронтендом
- евангелист и БЭМ-контрибьютор
- автор OpenSource решений
@awinogradov
2

3. 3

4. 4

5. 5

6. 6

7. 7

8. Везде одно и тоже…
8

9. Везде одно и тоже
9

10. Везде одно и тоже
• не те подходы
9

11. Везде одно и тоже
• не те подходы
• не те методологии
9

12. Везде одно и тоже
• не те подходы
• не те методологии
• и инструменты не те
9

13. Везде одно и тоже ;-)

14. Оживляем UI Kit
11

15. Оживляем UI Kit
• дизайнер в фотошопе
12

16. Оживляем UI Kit
• дизайнер в фотошопе
• разрабы во фреймворках
13

17. Оживляем UI Kit
• дизайнер в фотошопе
• разрабы во фреймворках
• компонентный веб
14

18. Оживляем UI Kit
• дизайнер в фотошопе
• разрабы во фреймворках
• компонентный веб
• генераторы гайдов
15

19. Оживляем UI Kit
• дизайнер в фотошопе
• разрабы во фреймворках
• компонентный веб
• генераторы гайдов
• дизайн в браузере
16

20. Оживляем UI Kit
• дизайнер в фотошопе
• разрабы во фреймворках
• компонентный веб
• генераторы гайдов
• дизайн в браузере
• учимся верстать
17

21. Все это про разработку…

22. Это не решает проблем взаимодействия
дизайнера и разработчика

23. Проблемы
20

24. Проблемы
• нет синхронизации
20

25. Проблемы
• нет синхронизации
• разная методология
20

26. Проблемы
• нет синхронизации
• разная методология
• 2 набора компонент
20

27. Проблемы
• нет синхронизации
• разная методология
• 2 набора компонент
• изменения в одну сторону
20

28. Проблемы
• нет синхронизации
• разная методология
• 2 набора компонент
• изменения в одну сторону
• визуальное наследование
20

29. Проблемы
• нет синхронизации
• разная методология
• 2 набора компонент
• изменения в одну сторону
• визуальное наследование
• верстка умерла
20

31. Дизайн в депрессии…

32. Решения
23

33. Решения
• одна методология на всех
23

34. Решения
• одна методология на всех
• один набор компонент
23

35. Решения
• одна методология на всех
• один набор компонент
• один принцип организации
23

36. Решения
• одна методология на всех
• один набор компонент
• один принцип организации
• версионность везде
23

37. Решения
• одна методология на всех
• один набор компонент
• один принцип организации
• версионность везде
• живые компоненты первичны
23

38. Решения
• одна методология на всех
• один набор компонент
• один принцип организации
• версионность везде
• живые компоненты первичны
• наследование на уровне
реализации компонент
23

39. Решения
• одна методология на всех
• один набор компонент
• один принцип организации
• версионность везде
• живые компоненты первичны
• наследование на уровне
реализации компонент
• максимум повторного
использования
23

40. Компонентный дизайн
24

42. Дать живые компоненты
дизайнерам

45. core

46. corebase

47. corebasecompany

48. corebasecompanyservice

50. 30

51. 31

52. 32

54. BEMHTML

55. BEMHTML
bit.ly/bemhtml-tmpl

56. Кнопка
35

57. BEMHTML
36

58. ReactJS
37

59. JSON
38

60. HTML
39

61. common common
Схема наложения уровней кода
40

62. common
desktop
common
touch
Схема наложения уровней кода
40

65. BEMHTML
43

66. ReactJS
44

67. JSON
45

68. SVG
46

69. common
desktop
common
touch
Новая схема наложения уровней кода
47

70. common
desktop
common
touch
Новая схема наложения уровней кода
sketch sketch
47

72. Структура
49

73. CSS
50
common.blocks/button/button.css common.blocks/button/__text/button__text.css

74. CSSTOATTRS
51

75. 52

76. PROFIT!!!
53

77. IT WORK!
54

78. IT WORK!
54
bit.ly/svg-xmpl

79. Нет предела совершенству

80. ENB
bit.ly/enb-techs

83. the
Protein
Toolkit

84. the

85. save
the

86. save watcher
the

87. save watcher parse
the

88. save watcher parse commit
the

89. save watcher parse commit push
the

90. save watcher parse commit push PR
the

91. the

92. PR
the

93. hookPR
the

94. hook watcherPR
the

95. hook watcher pullPR
the

96. the
hook watcher rebuildpullPR

97. the
hook watcher rebuild reloadpullPR

98. the
Protein
Front end development workflow

99. the
Protein

100. Проблемы???

101. Проблемы
77

102. Проблемы
• разбор составных CSS свойств
78

103. Проблемы
• разбор составных CSS свойств
• размерность компонентов
79
sketch.blocks/button/button.css

104. Проблемы
• разбор составных CSS свойств
• размерность компонентов
• позиционирование
80
sketch.blocks/button/__text/button__text.css

105. Проблемы
• разбор составных CSS свойств
• размерность компонентов
• позиционирование
• именования
81

106. Проблемы
• разбор составных CSS свойств
• размерность компонентов
• позиционирование
• именования
• разбор состояний
82

107. Проблемы
• разбор составных CSS свойств
• размерность компонентов
• позиционирование
• именования
• разбор состояний
• программная специфика:
атрибуты, символы,
ограничения
83

108. Результат
84

109. Результат
• одна библиотека компонент
84

110. Результат
• одна библиотека компонент
• нет кучи дизайнерских версий
84

111. Результат
• одна библиотека компонент
• нет кучи дизайнерских версий
• всё под контролем
84

112. Результат
• одна библиотека компонент
• нет кучи дизайнерских версий
• всё под контролем
• все в теме
84

113. Результат
• одна библиотека компонент
• нет кучи дизайнерских версий
• всё под контролем
• все в теме
• один язык общения
84

114. Результат
• одна библиотека компонент
• нет кучи дизайнерских версий
• всё под контролем
• все в теме
• один язык общения
• нет дублирования работы
84

116. Спасибо!
theprotein.io
github.com/theprotein/svg-example
bem.info
@awinogradov