Компонентный веб. Проникновение в дизайн.
30 likes41,777 views
Доклад Антона Виноградова на фронтенд-конференции 2015 года обсуждает проблемы взаимодействия между дизайнерами и разработчиками в контексте компонентного веб-дизайна. Он предлагает решения, включая единообразие методологий, создание единого набора компонентов и оптимизацию процессов разработки. Основная цель - улучшение синхронизации и уменьшение дублирования работы в командах.
Компонентный веб. Проникновение в дизайн.
- 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. Везде одно и тоже ;-)
- 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
- 25. Проблемы • нет синхронизации • разная методология 20
- 26. Проблемы • нет синхронизации • разная методология • 2 набора компонент 20
- 27. Проблемы • нет синхронизации • разная методология • 2 набора компонент • изменения в одну сторону 20
- 28. Проблемы • нет синхронизации • разная методология • 2 набора компонент • изменения в одну сторону • визуальное наследование 20
- 29. Проблемы • нет синхронизации • разная методология • 2 набора компонент • изменения в одну сторону • визуальное наследование • верстка умерла 20
- 32. Решения 23
- 33. Решения • одна методология на всех 23
- 34. Решения • одна методология на всех • один набор компонент 23
- 35. Решения • одна методология на всех • один набор компонент • один принцип организации 23
- 36. Решения • одна методология на всех • один набор компонент • один принцип организации • версионность везде 23
- 37. Решения • одна методология на всех • один набор компонент • один принцип организации • версионность везде • живые компоненты первичны 23
- 38. Решения • одна методология на всех • один набор компонент • один принцип организации • версионность везде • живые компоненты первичны • наследование на уровне реализации компонент 23
- 39. Решения • одна методология на всех • один набор компонент • один принцип организации • версионность везде • живые компоненты первичны • наследование на уровне реализации компонент • максимум повторного использования 23
- 45. core
- 46. corebase
- 47. corebasecompany
- 50. 30
- 51. 31
- 52. 32
- 54. BEMHTML
- 56. Кнопка 35
- 57. BEMHTML 36
- 58. ReactJS 37
- 59. JSON 38
- 60. HTML 39
- 61. common common Схема наложения уровней кода 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
- 74. CSSTOATTRS 51
- 75. 52
- 76. PROFIT!!! 53
- 77. IT WORK! 54
- 84. the
- 85. save the
- 86. save watcher 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
- 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