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.

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

40,901 views

Published on

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

Published in: Technology

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

  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. Везде одно и тоже • не те подходы 9
  11. 11. Везде одно и тоже • не те подходы • не те методологии 9
  12. 12. Везде одно и тоже • не те подходы • не те методологии • и инструменты не те 9
  13. 13. Везде одно и тоже ;-)
  14. 14. Оживляем UI Kit 11
  15. 15. Оживляем UI Kit • дизайнер в фотошопе 12
  16. 16. Оживляем UI Kit • дизайнер в фотошопе • разрабы во фреймворках 13
  17. 17. Оживляем UI Kit • дизайнер в фотошопе • разрабы во фреймворках • компонентный веб 14
  18. 18. Оживляем UI Kit • дизайнер в фотошопе • разрабы во фреймворках • компонентный веб • генераторы гайдов 15
  19. 19. Оживляем UI Kit • дизайнер в фотошопе • разрабы во фреймворках • компонентный веб • генераторы гайдов • дизайн в браузере 16
  20. 20. Оживляем UI Kit • дизайнер в фотошопе • разрабы во фреймворках • компонентный веб • генераторы гайдов • дизайн в браузере • учимся верстать 17
  21. 21. Все это про разработку…
  22. 22. Это не решает проблем взаимодействия дизайнера и разработчика
  23. 23. Проблемы 20
  24. 24. Проблемы • нет синхронизации 20
  25. 25. Проблемы • нет синхронизации • разная методология 20
  26. 26. Проблемы • нет синхронизации • разная методология • 2 набора компонент 20
  27. 27. Проблемы • нет синхронизации • разная методология • 2 набора компонент • изменения в одну сторону 20
  28. 28. Проблемы • нет синхронизации • разная методология • 2 набора компонент • изменения в одну сторону • визуальное наследование 20
  29. 29. Проблемы • нет синхронизации • разная методология • 2 набора компонент • изменения в одну сторону • визуальное наследование • верстка умерла 20
  30. 30. Дизайн в депрессии…
  31. 31. Решения 23
  32. 32. Решения • одна методология на всех 23
  33. 33. Решения • одна методология на всех • один набор компонент 23
  34. 34. Решения • одна методология на всех • один набор компонент • один принцип организации 23
  35. 35. Решения • одна методология на всех • один набор компонент • один принцип организации • версионность везде 23
  36. 36. Решения • одна методология на всех • один набор компонент • один принцип организации • версионность везде • живые компоненты первичны 23
  37. 37. Решения • одна методология на всех • один набор компонент • один принцип организации • версионность везде • живые компоненты первичны • наследование на уровне
 реализации компонент 23
  38. 38. Решения • одна методология на всех • один набор компонент • один принцип организации • версионность везде • живые компоненты первичны • наследование на уровне
 реализации компонент • максимум повторного 
 использования 23
  39. 39. Компонентный дизайн 24
  40. 40. Дать живые компоненты дизайнерам
  41. 41. core
  42. 42. corebase
  43. 43. corebasecompany
  44. 44. corebasecompanyservice
  45. 45. 30
  46. 46. 31
  47. 47. 32
  48. 48. BEMHTML
  49. 49. BEMHTML bit.ly/bemhtml-tmpl
  50. 50. Кнопка 35
  51. 51. BEMHTML 36
  52. 52. ReactJS 37
  53. 53. JSON 38
  54. 54. HTML 39
  55. 55. common common Схема наложения уровней кода 40
  56. 56. common desktop common touch Схема наложения уровней кода 40
  57. 57. BEMHTML 43
  58. 58. ReactJS 44
  59. 59. JSON 45
  60. 60. SVG 46
  61. 61. common desktop common touch Новая схема наложения уровней кода 47
  62. 62. common desktop common touch Новая схема наложения уровней кода sketch sketch 47
  63. 63. Структура 49
  64. 64. CSS 50 common.blocks/button/button.css common.blocks/button/__text/button__text.css
  65. 65. CSSTOATTRS 51
  66. 66. 52
  67. 67. PROFIT!!! 53
  68. 68. IT WORK! 54
  69. 69. IT WORK! 54 bit.ly/svg-xmpl
  70. 70. Нет предела совершенству
  71. 71. ENB bit.ly/enb-techs
  72. 72. the Protein Toolkit
  73. 73. the
  74. 74. save the
  75. 75. save watcher the
  76. 76. save watcher parse the
  77. 77. save watcher parse commit the
  78. 78. save watcher parse commit push the
  79. 79. save watcher parse commit push PR the
  80. 80. the
  81. 81. PR the
  82. 82. hookPR the
  83. 83. hook watcherPR the
  84. 84. hook watcher pullPR the
  85. 85. the hook watcher rebuildpullPR
  86. 86. the hook watcher rebuild reloadpullPR
  87. 87. the Protein Front end development workflow
  88. 88. the Protein
  89. 89. Проблемы???
  90. 90. Проблемы 77
  91. 91. Проблемы • разбор составных CSS свойств 78
  92. 92. Проблемы • разбор составных CSS свойств • размерность компонентов 79 sketch.blocks/button/button.css
  93. 93. Проблемы • разбор составных CSS свойств • размерность компонентов • позиционирование 80 sketch.blocks/button/__text/button__text.css
  94. 94. Проблемы • разбор составных CSS свойств • размерность компонентов • позиционирование • именования 81
  95. 95. Проблемы • разбор составных CSS свойств • размерность компонентов • позиционирование • именования • разбор состояний 82
  96. 96. Проблемы • разбор составных CSS свойств • размерность компонентов • позиционирование • именования • разбор состояний • программная специфика: 
 атрибуты, символы, 
 ограничения 83
  97. 97. Результат 84
  98. 98. Результат • одна библиотека компонент 84
  99. 99. Результат • одна библиотека компонент • нет кучи дизайнерских версий 84
  100. 100. Результат • одна библиотека компонент • нет кучи дизайнерских версий • всё под контролем 84
  101. 101. Результат • одна библиотека компонент • нет кучи дизайнерских версий • всё под контролем • все в теме 84
  102. 102. Результат • одна библиотека компонент • нет кучи дизайнерских версий • всё под контролем • все в теме • один язык общения 84
  103. 103. Результат • одна библиотека компонент • нет кучи дизайнерских версий • всё под контролем • все в теме • один язык общения • нет дублирования работы 84
  104. 104. Спасибо! theprotein.io github.com/theprotein/svg-example bem.info @awinogradov

×