Принципы разработки гибкихи поддерживаемых интерфейсовВася Аксёнов@outring
Разработка VS. Интерфейсы
3РазработкаРеализация — абстрактные сущности
4ИнтерфейсыРеализация — визуальное представление
5В чём разница?Явность правил взаимодействияПредопределённость сценариев взаимодействияи сущностей
Гибкость и поддерживаемость
7ГибкостьВозможность создания новых частей интерфейсабез необходимости внесения изменений в ранеесозданные части
8ПоддерживаемостьВозможность безопасного изменения интерфейса
1 SRPПринцип единственной ответственности
10Принцип единственной ответственностиКаждая сущность имеет только одну обязанностьСущность должна иметь только однупричин...
11Скачать
12Кнопка.download-button {! padding: 0 20px;}
13Размеры.download-button {! width: 230px;! padding: 0 20px;}
Позиционирование.download-button {! position: absolute;! left: 50%;! top: 50%;! width: 230px;! margin-top: -65px;! margin-...
−padding.download-button {! position: absolute;! left: 50%;! top: 50%;! width: 230px;! margin-top: -65px;! margin-left: -1...
16Скачать
Скачать17
МинусыНеобходимость изменения дляпереиспользованияСложность понимания ответственностиНебезопасность изменений18
19РешениеРаспределение ответственности по разнымэлементамИли классам
20Скачать
21Функциональное разделениепо элементамТолько одна причинаизменения сущности
2 Предсказуемые раскладки
Системы позиционированияС высокой степенью самоорганизацииС низкой23
Низкая степень самоорганизации<div style="position: absolute;"></div><div style="position: absolute;">! <div style="positi...
25
26Низкая степень самоорганизации+ Стабильность − Трудоёмкость
27Высокая степень самоорганизации<div>! <div style="float: right;"></div>! <span>...</span>! <div>! ! <span>...</span>! </...
28
29Высокая степень самоорганизации+ Простота использования+ Большие возможности− Сложность поддержки− Непредсказуемость
Потоковаясистема позиционирования
31Создать Изменить Удалить Навсегда
Панель<div class="panel">! <button>Создать</button>! <button>Изменить</button>! <button>Удалить</button>! <input type="che...
33Входящие▼ Переместить
34Компонент<div class="mover">! <select>! ! <option>Входящие</option>! ! <option>Исходящие</option>! ! ...! </select>! <bu...
35Создать Изменить Удалить НавсегдаВходящие▼ Переместить
36Интеграция<div class="panel">! ...! <button>Изменить</button>! <div class="mover">! ...! </div>! <button>Удалить</button...
37Создать ИзменитьУдалить НавсегдаВходящие▼ Переместить
38Субъекты контекста являются объектамитого же контекста и наоборот
Субъект создаёт контекстОбъект находится в контексте39
40Создать Изменить Удалить НавсегдаВходящие▼ Переместить
41Создать ИзменитьУдалить НавсегдаВходящие▼ Переместить
42Создать ИзменитьУдалить НавсегдаВходящие▼ Переместить
РешениеРазделение субъекта и объекта контекста43
CSS3 Flexible Box Layout
Включение Flexbox.panel {! display: flex;}45
46Создать Изменить Удалить НавсегдаВходящие▼ Переместить
Направление.panel {! display: flex;! flex-direction: column; /** @default row */}47
48СоздатьИзменитьУдалитьНавсегдаВходящие▼ Переместить
49Родитель контролирует поведениесвоих детей
Поддержка браузерами 70%50caniuse.com
.horizontal-box > * {! float: left;}.vertical-box > * {! display: block;! width: auto;}51Альтернатива
Панель<div class="panel horizontal-box">! ...! <button>Изменить</button>! <div class="mover horizontal-box">! ...! </div>!...
Сетки
54CSS сетки<div class="container-12">! <div class="grid-3"></div>! <div class="grid-3"></div>! <div class="grid-3"></div>!...
55grid-3 grid-3 grid-3 grid-3
56−модуль<div class="container-12">! <div class="grid-3"></div>! <div class="grid-3"></div>! <div class="grid-3"></div>! <...
57grid-3 grid-3 grid-3
58РешениеНезависимость модулей
CSS3 Grid Layout
60news content activity
HTML<div class="layout">! <div class="news"></div>! <div class="content"></div>! <div class="activity"></div></div>61
CSS.layout {! display: grid;! grid-columns: (80px)[12];}.news {! grid-column: 1;! grid-column-span: 3;}.content {! grid-co...
–news<div class="layout">! <div class="news"></div>! <div class="content"></div>! <div class="activity"></div></div>63
64content activity
65Поддержка браузерами?
<div class="g-12">! <div class="g-col-1 g-span-3 news"></div>! <div class="g-col-3 g-span-6 content"></div>! <div class="g...
Родитель контролирует поведениесвоих детейЭлементы должны быть независимыдруг от друга67
3 Явное наложение
69
70z-index: 1
71z-index: 1
72z-index: 1z-index: 1 z-index: 1z-index: 1
Расслоение z-index по назначению0...128...256 74Решение?}}контентдиалоги и попапы
Контекст наложенияКорневой элементСпозиционированный элемент c z-index ≠ autoЭлементы с opacity < 175
z-index локален для каждогоконтекста наложения76
77z-index: 128z-index: 1 z-index: 1z-index: 1
Явные слои и отказ от z-index78Решение
Явные слои<body>! <div class="layer" id="background-layer"></div>! <div class="layer" id="content-layer"></div>! <div clas...
.layer {! position: relative;! z-index: 1;}80Слой
Минимальный наборКонтентДиалогиПопапы81
Явное наложение элементов слоёвОтказ от z-index как средствафункционального наложения82
4 Абстрактная реализация
Абстракция84Абстракция определяет семантику сущности ипозволяет работать с ней без знания деталейреализации
Олдскул кнопкаНикаких градиентовНикаких радиусовНикаких псевдоэлементовТолько картинки85
Минимальная реализация<span class="button download-button">! Скачать! <span class="button-side"></span></span>86
Минимальная реализация.button {! position: relative;!! display: inline-block;! padding-left: 20px;}.button-side {! positio...
88Скачать
89Скачать Без SMS
Без SMS90Скачать
91Решение?.button {! position: relative;!! display: inline-block;!! margin-right: 20px;! padding-left: 20px;}.button-side ...
92Скачать Без SMS
93Скачать Без SMS50px
94Решение?/** @note К любому margin-right надо прибавить 20! */.button {! position: relative;!! display: inline-block;!! m...
Развитие реализации<span class="button download-button">! <span class="button-content">Скачать</span>! <span class="button...
Развитие реализации.button {! display: inline-block;}.button-content {! display: inline-block;!! padding-left: 20px;}.butt...
97Скачать
98Скачать50px50px
Избавление от отступов.button {! display: inline-block;}.button-content {! display: inline-block;! padding-left: 20px;}.bu...
100Скачать50px50px
101Решение<span class="button">! <span class="button-left"></span>! <span class="button-right"></span>! <span class="butto...
Решение.button {! position: relative;!! display: inline-block;}.button-content {! position: relative;}.button-left {! posi...
103Скачать50px50px
104Соответствие семантики и реализацииРеализация по подобиюстандартных реализаций
Принципы разработки гибкихи поддерживаемых интерфейсовВася Аксёнов@outring
DUMP-2013 Frontend - Принципы разработки поддерживаемых и гибких интерфейсов - Аксенов Василий
DUMP-2013 Frontend - Принципы разработки поддерживаемых и гибких интерфейсов - Аксенов Василий
DUMP-2013 Frontend - Принципы разработки поддерживаемых и гибких интерфейсов - Аксенов Василий
Upcoming SlideShare
Loading in …5
×

DUMP-2013 Frontend - Принципы разработки поддерживаемых и гибких интерфейсов - Аксенов Василий

2,718 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,718
On SlideShare
0
From Embeds
0
Number of Embeds
2,170
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

DUMP-2013 Frontend - Принципы разработки поддерживаемых и гибких интерфейсов - Аксенов Василий

  1. 1. Принципы разработки гибкихи поддерживаемых интерфейсовВася Аксёнов@outring
  2. 2. Разработка VS. Интерфейсы
  3. 3. 3РазработкаРеализация — абстрактные сущности
  4. 4. 4ИнтерфейсыРеализация — визуальное представление
  5. 5. 5В чём разница?Явность правил взаимодействияПредопределённость сценариев взаимодействияи сущностей
  6. 6. Гибкость и поддерживаемость
  7. 7. 7ГибкостьВозможность создания новых частей интерфейсабез необходимости внесения изменений в ранеесозданные части
  8. 8. 8ПоддерживаемостьВозможность безопасного изменения интерфейса
  9. 9. 1 SRPПринцип единственной ответственности
  10. 10. 10Принцип единственной ответственностиКаждая сущность имеет только одну обязанностьСущность должна иметь только однупричину измениться
  11. 11. 11Скачать
  12. 12. 12Кнопка.download-button {! padding: 0 20px;}
  13. 13. 13Размеры.download-button {! width: 230px;! padding: 0 20px;}
  14. 14. Позиционирование.download-button {! position: absolute;! left: 50%;! top: 50%;! width: 230px;! margin-top: -65px;! margin-left: -135px;! padding: 0 20px;}14
  15. 15. −padding.download-button {! position: absolute;! left: 50%;! top: 50%;! width: 230px;! margin-top: -65px;! margin-left: -135px;! padding: 0 20px;}15
  16. 16. 16Скачать
  17. 17. Скачать17
  18. 18. МинусыНеобходимость изменения дляпереиспользованияСложность понимания ответственностиНебезопасность изменений18
  19. 19. 19РешениеРаспределение ответственности по разнымэлементамИли классам
  20. 20. 20Скачать
  21. 21. 21Функциональное разделениепо элементамТолько одна причинаизменения сущности
  22. 22. 2 Предсказуемые раскладки
  23. 23. Системы позиционированияС высокой степенью самоорганизацииС низкой23
  24. 24. Низкая степень самоорганизации<div style="position: absolute;"></div><div style="position: absolute;">! <div style="position: absolute;"></div></div>24
  25. 25. 25
  26. 26. 26Низкая степень самоорганизации+ Стабильность − Трудоёмкость
  27. 27. 27Высокая степень самоорганизации<div>! <div style="float: right;"></div>! <span>...</span>! <div>! ! <span>...</span>! </div></div><div>! <span>...</span><span>...</span></div>
  28. 28. 28
  29. 29. 29Высокая степень самоорганизации+ Простота использования+ Большие возможности− Сложность поддержки− Непредсказуемость
  30. 30. Потоковаясистема позиционирования
  31. 31. 31Создать Изменить Удалить Навсегда
  32. 32. Панель<div class="panel">! <button>Создать</button>! <button>Изменить</button>! <button>Удалить</button>! <input type="checkbox">! <label>Навсегда</label></div>32
  33. 33. 33Входящие▼ Переместить
  34. 34. 34Компонент<div class="mover">! <select>! ! <option>Входящие</option>! ! <option>Исходящие</option>! ! ...! </select>! <button>Переместить</button></div>
  35. 35. 35Создать Изменить Удалить НавсегдаВходящие▼ Переместить
  36. 36. 36Интеграция<div class="panel">! ...! <button>Изменить</button>! <div class="mover">! ...! </div>! <button>Удалить</button>! ...</div>
  37. 37. 37Создать ИзменитьУдалить НавсегдаВходящие▼ Переместить
  38. 38. 38Субъекты контекста являются объектамитого же контекста и наоборот
  39. 39. Субъект создаёт контекстОбъект находится в контексте39
  40. 40. 40Создать Изменить Удалить НавсегдаВходящие▼ Переместить
  41. 41. 41Создать ИзменитьУдалить НавсегдаВходящие▼ Переместить
  42. 42. 42Создать ИзменитьУдалить НавсегдаВходящие▼ Переместить
  43. 43. РешениеРазделение субъекта и объекта контекста43
  44. 44. CSS3 Flexible Box Layout
  45. 45. Включение Flexbox.panel {! display: flex;}45
  46. 46. 46Создать Изменить Удалить НавсегдаВходящие▼ Переместить
  47. 47. Направление.panel {! display: flex;! flex-direction: column; /** @default row */}47
  48. 48. 48СоздатьИзменитьУдалитьНавсегдаВходящие▼ Переместить
  49. 49. 49Родитель контролирует поведениесвоих детей
  50. 50. Поддержка браузерами 70%50caniuse.com
  51. 51. .horizontal-box > * {! float: left;}.vertical-box > * {! display: block;! width: auto;}51Альтернатива
  52. 52. Панель<div class="panel horizontal-box">! ...! <button>Изменить</button>! <div class="mover horizontal-box">! ...! </div>! <button>Удалить</button>! ...</div>52
  53. 53. Сетки
  54. 54. 54CSS сетки<div class="container-12">! <div class="grid-3"></div>! <div class="grid-3"></div>! <div class="grid-3"></div>! <div class="grid-3"></div></div>
  55. 55. 55grid-3 grid-3 grid-3 grid-3
  56. 56. 56−модуль<div class="container-12">! <div class="grid-3"></div>! <div class="grid-3"></div>! <div class="grid-3"></div>! <div class="grid-3"></div></div>
  57. 57. 57grid-3 grid-3 grid-3
  58. 58. 58РешениеНезависимость модулей
  59. 59. CSS3 Grid Layout
  60. 60. 60news content activity
  61. 61. HTML<div class="layout">! <div class="news"></div>! <div class="content"></div>! <div class="activity"></div></div>61
  62. 62. CSS.layout {! display: grid;! grid-columns: (80px)[12];}.news {! grid-column: 1;! grid-column-span: 3;}.content {! grid-column: 4;! grid-column-span: 6;}.activity {! grid-column: 10;! grid-column-span: 3;}62
  63. 63. –news<div class="layout">! <div class="news"></div>! <div class="content"></div>! <div class="activity"></div></div>63
  64. 64. 64content activity
  65. 65. 65Поддержка браузерами?
  66. 66. <div class="g-12">! <div class="g-col-1 g-span-3 news"></div>! <div class="g-col-3 g-span-6 content"></div>! <div class="g-col-10 g-span-3 activity"></div></div>66Альтернативаanygrid.net
  67. 67. Родитель контролирует поведениесвоих детейЭлементы должны быть независимыдруг от друга67
  68. 68. 3 Явное наложение
  69. 69. 69
  70. 70. 70z-index: 1
  71. 71. 71z-index: 1
  72. 72. 72z-index: 1z-index: 1 z-index: 1z-index: 1
  73. 73. Расслоение z-index по назначению0...128...256 74Решение?}}контентдиалоги и попапы
  74. 74. Контекст наложенияКорневой элементСпозиционированный элемент c z-index ≠ autoЭлементы с opacity < 175
  75. 75. z-index локален для каждогоконтекста наложения76
  76. 76. 77z-index: 128z-index: 1 z-index: 1z-index: 1
  77. 77. Явные слои и отказ от z-index78Решение
  78. 78. Явные слои<body>! <div class="layer" id="background-layer"></div>! <div class="layer" id="content-layer"></div>! <div class="layer" id="overlay-layer"></div>! <div class="layer" id="dialogs-layer"></div>! <div class="layer" id="popups-layer"></div></body>79
  79. 79. .layer {! position: relative;! z-index: 1;}80Слой
  80. 80. Минимальный наборКонтентДиалогиПопапы81
  81. 81. Явное наложение элементов слоёвОтказ от z-index как средствафункционального наложения82
  82. 82. 4 Абстрактная реализация
  83. 83. Абстракция84Абстракция определяет семантику сущности ипозволяет работать с ней без знания деталейреализации
  84. 84. Олдскул кнопкаНикаких градиентовНикаких радиусовНикаких псевдоэлементовТолько картинки85
  85. 85. Минимальная реализация<span class="button download-button">! Скачать! <span class="button-side"></span></span>86
  86. 86. Минимальная реализация.button {! position: relative;!! display: inline-block;! padding-left: 20px;}.button-side {! position: absolute;! left: 100%;!! width: 20px;}87
  87. 87. 88Скачать
  88. 88. 89Скачать Без SMS
  89. 89. Без SMS90Скачать
  90. 90. 91Решение?.button {! position: relative;!! display: inline-block;!! margin-right: 20px;! padding-left: 20px;}.button-side {! position: absolute;! left: 100%;!! width: 20px;}
  91. 91. 92Скачать Без SMS
  92. 92. 93Скачать Без SMS50px
  93. 93. 94Решение?/** @note К любому margin-right надо прибавить 20! */.button {! position: relative;!! display: inline-block;!! margin-right: 20px;! padding-left: 20px;}.download-button {! margin-right: 70px; /** 50 + 20 */}
  94. 94. Развитие реализации<span class="button download-button">! <span class="button-content">Скачать</span>! <span class="button-side"></span></span>95
  95. 95. Развитие реализации.button {! display: inline-block;}.button-content {! display: inline-block;!! padding-left: 20px;}.button-side {! display: inline-block;!! width: 20px;}96
  96. 96. 97Скачать
  97. 97. 98Скачать50px50px
  98. 98. Избавление от отступов.button {! display: inline-block;}.button-content {! display: inline-block;! padding-left: 20px;}.button-side {! display: inline-block;!! width: 20px;}99
  99. 99. 100Скачать50px50px
  100. 100. 101Решение<span class="button">! <span class="button-left"></span>! <span class="button-right"></span>! <span class="button-content">Скачать</span></span>
  101. 101. Решение.button {! position: relative;!! display: inline-block;}.button-content {! position: relative;}.button-left {! position: absolute;! left: 0;! right: 20px;}.button-right {! position: absolute;! right: 0;!! width: 20px;}102
  102. 102. 103Скачать50px50px
  103. 103. 104Соответствие семантики и реализацииРеализация по подобиюстандартных реализаций
  104. 104. Принципы разработки гибкихи поддерживаемых интерфейсовВася Аксёнов@outring

×