Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Компонентный веб. Проникновение в дизайн / Антон Виноградов (АО "Альфа-Банк", Альфа-Лаборатория)

687 views

Published on

По-моему, всем давно надоело, что дизайнеры и разработчики интерфейсов дублируют работу друг друга, причем постоянно. У каждого свой набор компонентов для сборки интерфейса, свои понятия о принципах его построения, и компоненты каждый делает, как знает, лишь бы выглядели хорошо.

Компонентный веб, современные методологии, такие как БЭМ, и инструменты, такие как Sketch и AI, вкупе с передовыми фреймворками, такими как React и Angular, а также шагающий по миру стандарт ES6, могут решить насущные проблемы создания интерфейсов.

Я покажу, как дизайнер может использовать компоненты в Sketch, сделанные разработчиком. Редактировать и изменять их. А также расскажу, насколько сильно это упрощает жизнь в команде, создающей невероятные продукты каждый день ;)

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Компонентный веб. Проникновение в дизайн / Антон Виноградов (АО "Альфа-Банк", Альфа-Лаборатория)

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

×