-
Gehören Sie zu den Ersten, denen das gefällt!
Nächste SlideShare
Компонентный веб. Проникновение в дизайн / Антон Виноградов (АО "Альфа-Банк", Альфа-Лаборатория)
- 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. Везде одно и тоже ;-)
- 11. Оживляем UI Kit 11
- 12. Оживляем UI Kit • дизайнер в фотошопе 12
- 13. Оживляем UI Kit • дизайнер в фотошопе • разрабы во фреймворках 13
- 14. Оживляем UI Kit • дизайнер в фотошопе • разрабы во фреймворках • компонентный веб 14
- 15. Оживляем UI Kit • дизайнер в фотошопе • разрабы во фреймворках • компонентный веб • генераторы гайдов 15
- 16. Оживляем UI Kit • дизайнер в фотошопе • разрабы во фреймворках • компонентный веб • генераторы гайдов • дизайн в браузере 16
- 17. Оживляем UI Kit • дизайнер в фотошопе • разрабы во фреймворках • компонентный веб • генераторы гайдов • дизайн в браузере • учимся верстать 17
- 18. Все это про разработку…
- 19. Это не решает проблем взаимодействия дизайнера и разработчика
- 20. Проблемы • нет синхронизации • разная методология • 2 набора компонент • изменения в одну сторону • визуальное наследование • верстка умерла 20
- 21. Дизайн в депрессии…
- 22. Решения • одна методология на всех • один набор компонент • один принцип организации • версионность везде • живые компоненты первичны • наследование на уровне реализации компонент • максимум повторного использования 23
- 23. Компонентный дизайн 24
- 24. Дать живые компоненты дизайнерам
- 25. corebasecompanyservice
- 26. 30
- 27. 31
- 28. 32
- 29. BEMHTML bit.ly/bemhtml-tmpl
- 30. Кнопка 35
- 31. BEMHTML 36
- 32. ReactJS 37
- 33. JSON 38
- 34. HTML 39
- 35. common desktop common touch Схема наложения уровней кода 40
- 36. BEMHTML 43
- 37. ReactJS 44
- 38. JSON 45
- 39. SVG 46
- 40. common desktop common touch Новая схема наложения уровней кода sketch sketch 47
- 41. Структура 49
- 42. CSS 50 common.blocks/button/button.css common.blocks/button/__text/button__text.css
- 43. CSSTOATTRS 51
- 44. 52
- 45. PROFIT!!! 53
- 46. IT WORK! 54 bit.ly/svg-xmpl
- 47. Нет предела совершенству
- 48. ENB bit.ly/enb-techs
- 49. the Protein Toolkit
- 50. the
- 51. save the
- 52. save watcher the
- 53. save watcher parse the
- 54. save watcher parse commit the
- 55. save watcher parse commit push the
- 56. save watcher parse commit push PR the
- 57. the
- 58. PR the
- 59. hookPR the
- 60. hook watcherPR the
- 61. hook watcher pullPR the
- 62. the hook watcher rebuildpullPR
- 63. the hook watcher rebuild reloadpullPR
- 64. the Protein Front end development workflow
- 65. the Protein
- 66. Проблемы???
- 67. Проблемы 77
- 68. Проблемы • разбор составных CSS свойств 78
- 69. Проблемы • разбор составных CSS свойств • размерность компонентов 79 sketch.blocks/button/button.css
- 70. Проблемы • разбор составных CSS свойств • размерность компонентов • позиционирование 80 sketch.blocks/button/__text/button__text.css
- 71. Проблемы • разбор составных CSS свойств • размерность компонентов • позиционирование • именования 81
- 72. Проблемы • разбор составных CSS свойств • размерность компонентов • позиционирование • именования • разбор состояний 82
- 73. Проблемы • разбор составных CSS свойств • размерность компонентов • позиционирование • именования • разбор состояний • программная специфика: атрибуты, символы, ограничения 83
- 74. Результат • одна библиотека компонент • нет кучи дизайнерских версий • всё под контролем • все в теме • один язык общения • нет дублирования работы 84
- 75. Спасибо! theprotein.io github.com/theprotein/svg-example bem.info bit.ly/fconf-comp-design @awinogradov
Loggen Sie sich ein, um Kommentare anzuzeigen.