Распространение интернета и компьютерных сетей во все сферы общественной, научной и производственной деятельности привело к увеличению объемов разработки веб-ориентированных информационных систем. Такие системы могут представлять собой простые веб-сайты, предназначенные только для вывода информации, сложные, включающие в себя активный обмен информацией с пользователем, нетривиальную логику работы, интеграцию со сторонними сервисами и т.д., а также веб-приложения, которые по определению могут представлять собой любой сложности ИС.
Веб-ориентированные ИС накладывают свою специфику в области проектирования и разработки интерфейса, заключающуюся в многочисленных технологических требованиях и ограничениях, связанных с различной реализацией технологий и веб-стандартов в клиентском ПО (браузерах). Неизбежный дальнейший рост этого сектора разработки в совокупности со слабым уровнем формализации предметной области и подходов к ней является основанием для её изучения и разрешения имеющихся проблем.
С технологической точки зрения область разработки интерфейсов характеризуется набором стандартных (HTML, CSS, Javascript и т.д.), но несовершенных технологий, несовершенных – прежде всего в использовании и в программных реализациях. Веб-технологии стандартизированы, но их реализации в каждом конкретном браузере различаются. Неотъемлемой частью процесса разработки интерфейсов также является невозможность заранее знать условия исполнения программного кода.
Основные трудности связаны не столько с решением частных технических задач, сколько с обеспечением качественного процесса разработки в целом. Необходимо иметь возможность быстрого написания нового кода, легкого дополнения и внесения изменений в существующий код, а также повышения его быстродействия. Эти трудности не являются специфичными только для какого-то определенного рода проектов, а имеют место для всех, поскольку независимо от внутренней логики работы приложения или сайта, компоненты интерфейса в большинстве своем остаются неизменными. Тем не менее множество вариантов интерфейсов ничем не ограничено и проблема состоит в том, что для построения эффективного процесса разработки недостаточно просто накапливать примеры реализации для использования их в дальнейшем, количество не переходит в качество, поэтому требуется провести исследование с целью выявления общих закономерностей.
Задачи, которые должен решать эффективный подход к разработке интерфейсов:
– простота внесения изменений (быстрота и надежность);
– переиспользование кода (как внутри одного проекта, так и между разными проектами);
– возможность увеличивать скорость разработки за счет увеличения количества разработчиков. Обеспечение эффективной совместной работы, быстрое погружение в проект.
– увеличение возможностей оптимизировать быстродействие конечного кода.
Для больших и сложных проектов скорость внесения изменений замедляется вместе с ростом количества компонентов, эта сложность напрямую связана с размерностью системы, а также увеличением количества связей между элементами, в том числе неконтролируемых. Для небольших или типовых проектов проблема переходит в несколько иную плоскость – требуется увеличение скорости разработки таких проектов.
Из существующих библиотек, фреймворков, техник и подходов на универсальность претендует лишь несколько: SMACSS, OOCSS, а также БЭМ. Наибольшее внимание в рассматриваемых подходах уделяется CSS, как основной технологии, отвечающей за представление веб-интерфейса.
SMACSS – масштабируемая модульная архитектура CSS, разработана Джонатаном Снуком. Из технологий в SMACSS рассматривается только CSS, для которой предлагается подход к организации CSS-правил, основанный на их классификации и разделении на модули. Правила в SMACSS делятся на 4 основные и 2 дополнительные группы: базовую, раскладки, модули, состояния, а также темы и типографика. К каждой из этих групп предъявляются особые принципы именования и построения правил. Данный подход – результат обобщения практического опыта разработки, который вылился в стройную систему организации работы с CSS, однако по сути представляет собой больше свод рекомендаций, которые хорошо применимы для типовых задач, нежели методологию.
OOCSS (ObjectOriented CSS) – предложенный Николь Салливэн подход, суть которого состоит в переложении на CSS принципов объектно-ориентированного программирования. Под CSS-объектом понимается отдельный визуальный компонент интерфейса, описываемый совокупностью технологий: HTML-разметка (один или несколько DOM-узлов), CSS правила для всех частей объекта, javascript, относящийся к объекту, а также декоративные изображения и другие дополнительные компоненты, необходимые для отображения объекта. Объекты выделяются из интерфейсной предметной области, т.е. отражают интерфейс с точки зрения визуальной семантики.
Основные принципы OOCSS:
– Разделение структуры и визуального решения компонента интерфейса. Такое разделение, когда за структуру компонента отвечают одни CSS-классы (объектные), а за его частное представление – другие (классы тем), позволяет добиться переиспользования части кода – CSS-объекты используются в качестве прототипов, которые расширяются новыми классами или за счет классов тем. Согласно принципу открытости/закрытости объектные классы никогда не изменяются, а только расширяются и модифицируются за счет новых классов.
– Независимость от контекста использования. Данный принцип означает, что компоненты не должны определяться через контекст, в котором они используются, поскольку это лишает возможности переиспользовать код компонента в другом контексте, что приведет к дублированию кода в случае такой необходимости.
В рамках OOCSS успешно решается задача повторного использования кода, но других возможностей этот подход не предоставляет.
БЭМ (Блок Элемент Модификатор) – методология, разработанная в компании Яндекс, вводит собственную предметную область, состоящую из следующих понятий:
– Блок – некоторая самостоятельная сущность, блок может быть простым или составным – содержать в себе другие блоки.
– Элемент – часть блока, отвечающая за отдельную функцию интерфейса. Элемент может находиться только в составе блока и не имеет смысла в отрыве от него.
– Модификатор – свойство блока или элемента, которое меняет внешний вид или поведение, помимо имени может иметь значение. Блок или элемент могут одновременно иметь несколько разных модификаторов.
Понятия, составляющие БЭМ-предметную область, образуют дополнительный слой абстракции над интерфейсом. Все компоненты интерфейса должны описываться в БЭМ-терминах, для этого БЭМ предоставляет систему именования, однако это не говорит о том, каким образом следует выделять компоненты интерфейса в БЭМ-сущности. Одним из принципов именования является уникальность имени блока, в основе этого принципа лежит концепция абсолютно-независимых блоков (АНБ), главная идея которой в том, что блок должен определяться независимо от контекста и в любом окружении сохранять свои свойства. В частности, этим объясняется практически полное покрытие HTML-кода классами БЭМ-предметной области. Для БЭМ-сущности HTML является одним из слоёв реализации, наряду с другими, необходимыми для неё технологиями. Такой подход к разработке подразумевает наличие этапа компиляции, когда код, написанный в БЭМ-терминах, преобразовывается в код требуемых технологий.
Преимущества БЭМ:
– строгая система наименований, а также однозначное положение кода на файловой системе позволяют быстро разобраться в проекте;
– единая терминология способствует успешной коммуникации между всеми участниками процесса разработки;
– АНБ-принцип позволяет распределить разработку, поблочно;
– несколько способов повторного использования кода: использование модификаторов, смешивание нескольких БЭМ-сущностей на одном DOM-узле, уровни переопределения (наборы реализации блоков, в том числе межпроектные).
Недостатки БЭМ:
– неполнота предметной области – имеющейся системы понятий недостаточно, чтобы описать всё множество структур и связей, которые могут возникнуть между элементами интерфейса:
• невозможность сложноструктурированных блоков;
• нет способа управлять связями между блоками;
• нет механизма расширения/дополнения языка.
– отсутствие механизма встраивания неБЭМ-объектов.
Хотя в настоящее время из всех подходов к разработке интерфейсов БЭМ-подход является наиболее эффективным, и он не лишён недостатков. Требуется усовершенствовать его методологическую базу, для этого, в частности, следует задействовать теорию проектирования пользовательских интерфейсов.
В качестве одного из решений проблемы управления связями между БЭМ-сущностями предлагается ввести понятие дополняющей сущности. Под дополняющей сущностью понимается или модификатор основной сущности, или новые блоки и элементы, в том числе со своими модификаторами, расположенные на том же DOM-узле, что и основная БЭМ-сущность (блок или элемент). В отличие от случая простой композиции нескольких сущностей на одном DOM-узле, дополняющая сущность позволяет приоритезировать сущности. Каждая следующая по порядку записи сущность имеет больший приоритет, чем предыдущая (по аналогии с CSS), в пределах DOM-узла. Сущность с большим приоритетом, являясь более специфичной, может дополнять или переопределять свойства DOM-узла, а также влиять на порядок наследования блоков в БЭМ-дереве. Такое наслаивание сущностей друг на друга представляет собой удобный способ связи независимых сущностей, позволяющий избежать конфликтов между ними, а также в полной мере использовать свойства каждой из них.
Остается нерешенной такая архитектурная проблема, как выявление БЭМ-сущностей – выделять компоненты интерфейса в блоки можно по-разному и это может отрицательно сказываться на качестве разработки. Необходимо разработать универсальный метод разбиения на блоки и оценить границы его применимости. Еще одна задача, требующая решения, это кластеризация CSS-правил, с целью обеспечения оптимального быстродействия для пользователя. Решение этих вопросов позволит дополнительно теоретически обосновать БЭМ-подход, а также повысить эффективность разработки веб-интерфейсов.
Рецензенты:
Соловьев Н.А., д.т.н., профессор, заведующий кафедрой программного обеспечения вычислительной техники и автоматизированных систем ГОУ ВПО «Оренбургский государственный университет», г. Оренбург;
Сердюк А.И., д.т.н., профессор, директор аэрокосмического института ГОУ ВПО «Оренбургский государственный университет», г. Оренбург.
Работа поступила в редакцию 21.09.2012.