Принципы разработки поддерживаемых и гибких...
DESCRIPTION
TRANSCRIPT
Принципы разработки гибких и поддерживаемых интерфейсов
Вася Аксёнов@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-left: -135px;! padding: 0 20px;} 14
−padding.download-button {! position: absolute;! left: 50%;! top: 50%;
! width: 230px;! margin-top: -65px;! margin-left: -135px;! padding: 0 20px;} 15
16
Скачать
Скачать
17
МинусыНеобходимость изменения для переиспользованияСложность понимания ответственностиНебезопасность изменений
18
19
РешениеРаспределение ответственности по разным элементамИли классам
20
Скачать
21
Функциональное разделение по элементам
Только одна причина изменения сущности
2 Предсказуемые раскладки
Системы позиционированияС высокой степенью самоорганизацииС низкой
23
Низкая степень самоорганизации<div style="position: absolute;"></div><div style="position: absolute;">! <div style="position: absolute;"></div></div>
24
25
26
Низкая степень самоорганизации+ Стабильность − Трудоёмкость
27
Высокая степень самоорганизации<div>! <div style="float: right;"></div>! <span>...</span>! <div>! ! <span>...</span>! </div></div><div>! <span>...</span><span>...</span></div>
28
29
Высокая степень самоорганизации+ Простота использования+ Большие возможности
− Сложность поддержки− Непредсказуемость
Потоковая система позиционирования
31
Создать Изменить Удалить Навсегда
Панель<div class="panel">! <button>Создать</button>! <button>Изменить</button>
! <button>Удалить</button>! <input type="checkbox">! <label>Навсегда</label></div>
32
33
Входящие ▼ Переместить
34
Компонент<div class="mover">! <select>! ! <option>Входящие</option>! ! <option>Исходящие</option>! ! ...! </select>! <button>Переместить</button></div>
35
Создать Изменить Удалить НавсегдаВходящие ▼ Переместить
36
Интеграция<div class="panel">! ...! <button>Изменить</button>! <div class="mover">! ...! </div>! <button>Удалить</button>! ...</div>
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
Родитель контролирует поведение своих детей
.horizontal-box > * {! float: left;}
.vertical-box > * {! display: block;! width: auto;}
51
Альтернатива
Панель<div class="panel horizontal-box">! ...! <button>Изменить</button>! <div class="mover horizontal-box">! ...! </div>! <button>Удалить</button>! ...</div>
52
Сетки
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
grid-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>! <div class="grid-3"></div></div>
57
grid-3 grid-3 grid-3
58
РешениеНезависимость модулей
CSS3 Grid Layout
60
news 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-column: 4;! grid-column-span: 6;}
.activity {! grid-column: 10;! grid-column-span: 3;}
62
–news<div class="layout">! <div class="news"></div>! <div class="content"></div>! <div class="activity"></div></div>
63
64
content 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-col-10 g-span-3 activity"></div></div>
66
Альтернатива
anygrid.net
Родитель контролирует поведение своих детей
Элементы должны быть независимы друг от друга
67
3 Явное наложение
69
70
z-index: 1
71
z-index: 1
72
z-index: 1
z-index: 1 z-index: 1
z-index: 1
Расслоение z-index по назначению
0...128...256
74
Решение?
｝｝контент
диалоги и попапы
Контекст наложенияКорневой элементСпозиционированный элемент c z-index ≠ autoЭлементы с opacity < 1
75
z-index локален для каждого контекста наложения
76
77
z-index: 128
z-index: 1 z-index: 1
z-index: 1
Явные слои и отказ от z-index
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
.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 {! position: absolute;! left: 100%;!! width: 20px;}
87
88
Скачать
89
Скачать Без SMS
Без SMS
90
Скачать
91
Решение?.button {! position: relative;!! display: inline-block;!! margin-right: 20px;! padding-left: 20px;}
.button-side {! position: absolute;! left: 100%;!! width: 20px;}
92
Скачать Без SMS
93
Скачать Без SMS50px
94
Решение?/** @note К любому margin-right надо прибавить 20! */.button {! position: relative;!! display: inline-block;!! margin-right: 20px;! padding-left: 20px;}
.download-button {! margin-right: 70px; /** 50 + 20 */}
Развитие реализации<span class="button download-button">! <span class="button-content">Скачать</span>! <span class="button-side"></span></span>
95
Развитие реализации.button {! display: inline-block;}
.button-content {! display: inline-block;!! padding-left: 20px;}
.button-side {! display: inline-block;!! width: 20px;}
96
97
Скачать
98
Скачать
50px50px
Избавление от отступов.button {! display: inline-block;}
.button-content {! display: inline-block;
! padding-left: 20px;}
.button-side {! display: inline-block;!! width: 20px;}
99
100
Скачать
50px50px
101
Решение<span class="button">! <span class="button-left"></span>! <span class="button-right"></span>! <span class="button-content">Скачать</span></span>
Решение.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
Скачать
50px50px
104
Соответствие семантики и реализации
Реализация по подобию стандартных реализаций
Принципы разработки гибких и поддерживаемых интерфейсов
Вася Аксёнов@outring