1. Принципы разработки гибких
и поддерживаемых интерфейсов
Вася Аксёнов
@outring

2. Разработка VS. Интерфейсы

3. 3
Разработка
Реализация — абстрактные сущности

4. 4
Интерфейсы
Реализация — визуальное представление

5. 5
В чём разница?
Явность правил взаимодействия
Предопределённость сценариев взаимодействия
и сущностей

6. Гибкость и поддерживаемость

7. 7
Гибкость
Возможность создания новых частей интерфейса
без необходимости внесения изменений в ранее
созданные части

8. 8
Поддерживаемость
Возможность безопасного изменения интерфейса

9. 1 SRP
Принцип единственной ответственности

10. 10
Принцип единственной ответственности
Каждая сущность имеет только одну обязанность
Сущность должна иметь только одну
причину измениться

11. 11
Скачать

12. 12
Кнопка
.download-button {
! padding: 0 20px;
}

13. 13
Размеры
.download-button {
! width: 230px;
! padding: 0 20px;
}

14. Позиционирование
.download-button {
! position: absolute;
! left: 50%;
! top: 50%;
! width: 230px;
! margin-top: -65px;
! margin-left: -135px;
! padding: 0 20px;
}
14

15. −padding
.download-button {
! position: absolute;
! left: 50%;
! top: 50%;
! width: 230px;
! margin-top: -65px;
! margin-left: -135px;
! padding: 0 20px;
}
15

16. 16
Скачать

17. Скачать
17

18. Минусы
Необходимость изменения для
переиспользования
Сложность понимания ответственности
Небезопасность изменений
18

19. 19
Решение
Распределение ответственности по разным
элементам
Или классам

20. 20
Скачать

21. 21
Функциональное разделение
по элементам
Только одна причина
изменения сущности

22. 2 Предсказуемые раскладки

23. Системы позиционирования
С высокой степенью самоорганизации
С низкой
23

24. Низкая степень самоорганизации
<div style="position: absolute;"></div>
<div style="position: absolute;">
! <div style="position: absolute;"></div>
</div>
24

25. 25

26. 26
Низкая степень самоорганизации
+ Стабильность − Трудоёмкость

27. 27
Высокая степень самоорганизации
<div>
! <div style="float: right;"></div>
! <span>...</span>
! <div>
! ! <span>...</span>
! </div>
</div>
<div>
! <span>...</span><span>...</span>
</div>

28. 28

29. 29
Высокая степень самоорганизации
+ Простота использования
+ Большие возможности
− Сложность поддержки
− Непредсказуемость

30. Потоковая
система позиционирования

31. 31
Создать Изменить Удалить Навсегда

32. Панель
<div class="panel">
! <button>Создать</button>
! <button>Изменить</button>
! <button>Удалить</button>
! <input type="checkbox">
! <label>Навсегда</label>
</div>
32

33. 33
Входящие▼ Переместить

34. 34
Компонент
<div class="mover">
! <select>
! ! <option>Входящие</option>
! ! <option>Исходящие</option>
! ! ...
! </select>
! <button>Переместить</button>
</div>

35. 35
Создать Изменить Удалить НавсегдаВходящие▼ Переместить

36. 36
Интеграция
<div class="panel">
! ...
! <button>Изменить</button>
! <div class="mover">
! ...
! </div>
! <button>Удалить</button>
! ...
</div>

37. 37
Создать Изменить
Удалить Навсегда
Входящие▼ Переместить

38. 38
Субъекты контекста являются объектами
того же контекста и наоборот

39. Субъект создаёт контекст
Объект находится в контексте
39

40. 40
Создать Изменить Удалить НавсегдаВходящие▼ Переместить

41. 41
Создать Изменить
Удалить Навсегда
Входящие▼ Переместить

42. 42
Создать Изменить
Удалить Навсегда
Входящие▼ Переместить

43. Решение
Разделение субъекта и объекта контекста
43

44. CSS3 Flexible Box Layout

45. Включение Flexbox
.panel {
! display: flex;
}
45

46. 46
Создать Изменить Удалить НавсегдаВходящие▼ Переместить

47. Направление
.panel {
! display: flex;
! flex-direction: column; /** @default row */
}
47

48. 48
Создать
Изменить
Удалить
Навсегда
Входящие▼ Переместить

49. 49
Родитель контролирует поведение
своих детей

50. Поддержка браузерами 70%
50
caniuse.com

51. .horizontal-box > * {
! float: left;
}
.vertical-box > * {
! display: block;
! width: auto;
}
51
Альтернатива

52. Панель
<div class="panel horizontal-box">
! ...
! <button>Изменить</button>
! <div class="mover horizontal-box">
! ...
! </div>
! <button>Удалить</button>
! ...
</div>
52

53. Сетки

54. 54
CSS сетки
<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
grid-3 grid-3 grid-3 grid-3

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
grid-3 grid-3 grid-3

58. 58
Решение
Независимость модулей

59. CSS3 Grid Layout

60. 60
news content activity

61. HTML
<div class="layout">
! <div class="news"></div>
! <div class="content"></div>
! <div class="activity"></div>
</div>
61

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. –news
<div class="layout">
! <div class="news"></div>
! <div class="content"></div>
! <div class="activity"></div>
</div>
63

64. 64
content activity

65. 65
Поддержка браузерами?

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

68. 3 Явное наложение

69. 69

70. 70
z-index: 1

71. 71
z-index: 1

72. 72
z-index: 1
z-index: 1 z-index: 1
z-index: 1

74. Расслоение z-index по назначению
0
...
128
...
256 74
Решение?
｝
｝
контент
диалоги и попапы

75. Контекст наложения
Корневой элемент
Спозиционированный элемент c z-index ≠ auto
Элементы с opacity < 1
75

76. z-index локален для каждого
контекста наложения
76

77. 77
z-index: 128
z-index: 1 z-index: 1
z-index: 1

78. Явные слои и отказ от z-index
78
Решение

79. Явные слои
<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

80. .layer {
! position: relative;
! z-index: 1;
}
80
Слой

81. Минимальный набор
Контент
Диалоги
Попапы
81

82. Явное наложение элементов слоёв
Отказ от z-index как средства
функционального наложения
82

83. 4 Абстрактная реализация

84. Абстракция
84
Абстракция определяет семантику сущности и
позволяет работать с ней без знания деталей
реализации

85. Олдскул кнопка
Никаких градиентов
Никаких радиусов
Никаких псевдоэлементов
Только картинки
85

86. Минимальная реализация
<span class="button download-button">
! Скачать
! <span class="button-side"></span>
</span>
86

87. Минимальная реализация
.button {
! position: relative;
!
! display: inline-block;
! padding-left: 20px;
}
.button-side {
! position: absolute;
! left: 100%;
!
! width: 20px;
}
87

88. 88
Скачать

89. 89
Скачать Без SMS

90. Без SMS
90
Скачать

91. 91
Решение?
.button {
! position: relative;
!
! display: inline-block;
!
! margin-right: 20px;
! padding-left: 20px;
}
.button-side {
! position: absolute;
! left: 100%;
!
! width: 20px;
}

92. 92
Скачать Без SMS

93. 93
Скачать Без SMS50px

94. 94
Решение?
/** @note К любому margin-right надо прибавить 20! */
.button {
! position: relative;
!
! display: inline-block;
!
! margin-right: 20px;
! padding-left: 20px;
}
.download-button {
! margin-right: 70px; /** 50 + 20 */
}

95. Развитие реализации
<span class="button download-button">
! <span class="button-content">Скачать</span>
! <span class="button-side"></span>
</span>
95

96. Развитие реализации
.button {
! display: inline-block;
}
.button-content {
! display: inline-block;
!
! padding-left: 20px;
}
.button-side {
! display: inline-block;
!
! width: 20px;
}
96

97. 97
Скачать

98. 98
Скачать
50px50px

99. Избавление от отступов
.button {
! display: inline-block;
}
.button-content {
! display: inline-block;
! padding-left: 20px;
}
.button-side {
! display: inline-block;
!
! width: 20px;
}
99

100. 100
Скачать
50px50px

101. 101
Решение
<span class="button">
! <span class="button-left"></span>
! <span class="button-right"></span>
! <span class="button-content">Скачать</span>
</span>

102. Решение
.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

103. 103
Скачать
50px50px

104. 104
Соответствие семантики и реализации
Реализация по подобию
стандартных реализаций

107. Принципы разработки гибких
и поддерживаемых интерфейсов
Вася Аксёнов
@outring