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

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

on

  • 2,344 views

 

Statistics

Views

Total Views
2,344
Views on SlideShare
487
Embed Views
1,857

Actions

Likes
0
Downloads
3
Comments
0

5 Embeds 1,857

http://it-eburg.com 1221
http://dump-it.ru 495
http://www.dump-it.ru 139
http://hghltd.yandex.net 1
http://cc.bingj.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

DUMP-2013 Frontend - Принципы разработки поддерживаемых и гибких интерфейсов - Аксенов Василий DUMP-2013 Frontend - Принципы разработки поддерживаемых и гибких интерфейсов - Аксенов Василий Presentation 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Родитель контролирует поведениесвоих детей
  • Поддержка браузерами 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>! <button>Удалить</button>! ...</div>52
  • Сетки
  • 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>
  • 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>! <div class="grid-3"></div></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-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
  • 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-col-10 g-span-3 activity"></div></div>66Альтернативаanygrid.net
  • Родитель контролирует поведениесвоих детейЭлементы должны быть независимыдруг от друга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 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
  • Без SMS90Скачать
  • 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