CC BY
54
No. 6 (54) 2014
JOURNAL of APPLÍED INFORMATICS
П. П. Кейно, преподаватель кафедры «Системное моделирование и инженерная графика» ФГБОУ ВПО «МАТИ — Российский государственный технологический университет имени К. Э. Циолковского»,
г. Москва, [email protected]
А. В. Силуянов, канд. техн. наук, доцент кафедры «Системное моделирование и инженерная графика» ФГБОУ ВПО «МАТИ — Российский государственный технологический университет имени К. Э. Циолковского», г. Москва, [email protected]
Автоматизированная разработка динамических Web-узлов средствами декларативного языка программирования
В статье рассматривается теоретическое обоснование применения новой методологии в разработке Web-узлов серверной и клиентской сторон . Авторами была разработана методология BlockSet, включающая в себя декларативный язык программирования BML и интерпретатор, понимающий этот язык . Рассматриваются преимущества декларативного программирования перед императивным . Отмечена прямая связь структуры BML и визуального редактора, с помощью которого стало возможным моделирование логики и представления Web-документа без использования алгоритмического программирования
Ключевые слова: Web, серверное программирование, клиентское программирование, декларативное программирование, MVC, модели данных, BML, BlockSet, HTML, XML .
введение
Индустрия Web-разработки за небольшой период существования обросла огромным количеством способов и методологий разработки динамических Web-узлов. На этапе ввода в эксплуатацию проекта выходными данными такой разработки являются: разметка на языке HTML, таблицы стилей CSS, логическая структура серверной стороны на алгоритмическом языке высокого уровня. Основанная на принципах декларативного определения компонентов, представленная в работе методология позволяет упростить процесс разработки динамических документов Web как клиентской, так и серверной стороны. Динамическая структура задается на специализированном XML-подобном языке, определяющем не столько последовательный алгоритм, сколько набор правил (утверждений) для генерации документа.
Похожие принципы генерации используются, например, в биоинформатике [1], где на основе декларативно описываемых вычислительных модулей генерируются Web-интерфейсы для биологических исследований; в системах дистанционного обучения, где широко распространен стандарт SCORM [2] для представления учебного контента в Web. Декларативное программирование нашло применение и в системах автоматизированного проектирования [3], где на основе описываемых свойств и особенностей изделия на выходе генерируется структурное конструкторское решение.
Предлагаемая в статье методология имеет как положительные, так и отрицательные стороны. К положительным сторонам можно отнести возможность задавать в сокращенной и удобочитаемой форме структуру и поведение блоков, описание которых на императивном языке программирования (например, PHP, Perl, Python и др.) заняло бы
№ 6 (54) 2014
на порядок большее количество строк кода. Кроме того, что большое количество строк кода априори усложняет восприятие программы, императивная алгоритмическая структура тяжелее воспринимается разработчиками, далекими от классических принципов программирования. Предлагаемая методология имеет название «BlockSet», она проста в освоении и позволяет решить основные задачи, возникающие при разработке большинства Web-узлов.
Добиться соответствующей простоты позволяет повышение уровня абстракции [4] — когда разработчик оперирует не конкретными блоками (например, в большинстве CMS (англ. Content Management System — система управления контентом) существуют статьи, меню, категории и т. д.), а высокоабстрактными компонентами и их наборами, изменяющими свой вид и поведение в зависимости от предназначения. Количество компонентов сведено к минимуму, однако увеличено количество их свойств-модификаторов. К примеру, один компонент (в данном контексте набор) может служить и лентой новостей, и фотоальбомом, и меню сайта. Такая универсализация имеет и свои недостатки: несмотря на то что большинство существующих Web-проектов вполне возможно повторить с помощью BlockSet, оставшееся немногочисленное число задач при таком подходе не поддается решению в принципе. В этом случае все же придется прибегнуть к помощи классического алгоритмического программирования.
Похожая методология используется в компании «Яндекс» и называется БЭМ [5] — по первым литерам основных компонентов: «блок», «элемент», «модификатор». Подобный подход представляет собой дополнительную прослойку в абстракции клиентской стороны и позволяет увеличить гибкость верстки, что, в свою очередь, снижает время на разработку новых проектов и позволяет без дополнительных трудозатрат поддерживать существующие. Каждый компонент выполняет строго определенную роль.
• Блок — область Web-страницы, имеющая определенные свойства. Например, к такой области может относиться форма поиска или меню сайта. При этом блоки допустимо вкладывать друг в друга и повторно использовать.
• Элемент — является неотъемлемой частью блока и не имеет смысла за его пределами. Выполняет одну из функций блока. Например, кнопка поиска, поисковая строка, пункт меню.
• Модификатор — свойство, изменяющее поведение или внешний вид блока или элемента. Например, изменение внешнего вида поисковой строки в блоке происходит путем задания соответствующего модификатора.
Предметная область БЭМ ограничивается только клиентской Web-разработкой, представляющей собой набор паттернов для именования классов. Тем не менее заимствования из БЭМ есть и в методологии BlockSet. Компонент «Набор» эквивалентен свойству «Блок» в БЭМ, но относится не только к верстке и фронтенду в целом (здесь эту роль выполняют HTML-шаблоны, индивидуальные для каждого блока), но и к серверной части в частности, к базе данных и логике выборки информации. Роль свойства «элемент» выполняют в предлагаемом подходе блоки — эквиваленты поля базы данных. Роль «модификаторов» исполняют многочисленные атрибуты у наборов и блоков. С их помощью становится возможным выбрать необходимые данные и задать внешний вид генерируемой страницы.
Интерпретатор и язык BML
Как говорилось выше, в основу методологии BlockSet для описания динамических страниц входит использование специализированного формата представления данных на основе языка XML. В структурном виде описывается логика генерации динамической Web-страницы. Такое описание получило название «моделирующий язык BlockSet», или BML (BlockSet Modelling Language). Как
No. 6 (54) 2014
JOURNAL OF APPLiED INFORMATICS
и любой XML-подобный язык, BML имеет различные элементы (тэги) и атрибуты. Каждый элемент и атрибут играют определенную роль в формировании данных.
Обработка файлов BML возложена на специализированный интерпретатор, представляющий собой скомпилированный двоичный модуль, исполняющийся в средах CGI или FastCGI. Таким образом, интерпретатор работает в контексте Web-сервера. В случаях возникновения ошибок синтаксиса или отсутствии файлов BML в директории Web-сервера (англ. Document Root), интерпретатор вернет управление серверу. В том случае, если в директории обнаружится существующий файл, не связанный с BML (HTML-документ, PHP-скрипт, изображение и т. д.), интерпретатор также передаст управление и завершит работу. Это означает, что вполне допустимо использовать интерпретатор в комбинации с другими Web-технологиями серверной стороны: PHP, Perl, Ruby, Python и др. Кроме того, работа интерпретатора никак не помешает выгрузке статических документов.
В отличие от HTML-документов, документы BML представляют собой целостную структуру и могут быть зависимы друг от друга. Следуя этой логике, интерпретатор BML будет пытаться загрузить все файлы с расширением *.bml из директории Web-сервера. И если Web-сервер в стандартной конфигурации, как правило, сопоставляет запрошенный URL с путем к файлу относительно коренной директории Web-сервера, то интерпретатор BML проверяет запрашиваемый URL на соответствие содержимому элемента «Расположение» (англ. Location). Описанный алгоритм схематично изображен на рис. 1.
Элемент «Расположение»
Элемент «Расположение» (англ. Location) определяет границу логической структуры, задаваемой для динамической страницы. В атрибуте «base» задается имя страницы, являющееся URL-путем. В случае совпаде-
ния URL-пути запрошенного пользователем со значением атрибута «base» элемента Location будет сгенерирована страница на основе логики, заключенной внутри данного элемента.
В значении атрибута «base» допустимо использовать регулярное выражение. В этом случае все найденные группировки могут быть использованы в качестве переменных для выборки данных.
Элементы «блок» и «набор»
Большинство задач, требующих решения в рамках Web-разработки, сводится к следующим рутинным процедурам [6]:
• выборка/обновление/удаление данных;
• разграничение прав доступа к тем или иным данным, авторизация пользователей;
• генерация страницы на языке HTML на основе выбранных данных и соответствующих им прав доступа пользователя.
Под выборкой, обновлением и удалением данных подразумевается управление этими данными путем взаимодействия с файлами, СУБД или иным способом. Разграничение прав доступа невозможно без регистрации пользователей и их авторизации, разбиения пользователей на группы. После проверки прав доступа и осуществления выборки из базы данных происходит наложение выходных данных на код HTML.
Описанные процедуры неотделимы друг от друга. Так, в методологии BlockSet выполнение этих процедур осуществляется с помощью блоков (англ. block) — расширенное представление поля в базе данных. Типы данных у полей во всех реляционных СУБД являются атомарными и низкоуровневыми. К таким типам относятся: числовые, строковые, дата и время, двоичные [7]. Несмотря на то что типы данных в СУБД могут иметь различную размерность, сами по себе они являются неделимыми сущностями, или атомарными. Низкоуровневость типов данных говорит об их универсальности: например, поле строкового типа может хранить в себе совершенно различную информацию.
№ 6 (54) 2014
Загрузка всех файлов ВМ1_ из директории Web-сервера (ООСиМЕ1\1Т_РООТ)
Рис. 1. Общий алгоритм работы интерпретатора BML
73
No. 6 (54) 2014
JOURNAL of appüed informatics
Один из недостатков высокой абстракции типов в СУБД заключается в том, что невозможно проверить правильность вводимых пользователем данных при таком подходе без применения алгоритмических ветвлений. В методологии BlockSet у блоков также присутствуют универсальные типы данных, но помимо них в предлагаемый стандарт входят узкоспециализированные, высокоуровневые. Например, если у блока указан тип данных «электронная почта» («e-mail»), то это даст гарантию того, что блок будет хранить строку строго определенного формата: username@domain. Здесь username — имя пользователя, содержащее символы латинского алфавита, цифры и некоторые знаки пунктуации; domain — доменное имя с символами латинского алфавита, цифрами и дефисом, при этом домен должен быть не менее второго уровня, а его уровни обязаны разделяться точкой. Строго говоря, в таблице базы данных системой BlockSet все равно будет создан простой строковый тип, а такие уточнения типизации в данном примере предназначены лишь для проверки вводимых данных при добавлении или обновлении блока без применения ветвлений, характерных для императивного программирования.
Тем не менее в методологии BlockSet существуют типы данных и более высокого уровня, предназначенные не только для проверки вводимых значений на соответствие определенному строковому формату. К таким типам данных относятся файлы. Вся реализация загрузки и обработки файлов различного типа встроена в интерпретатор.
Блоки образуют наборы (англ. set) — эквиваленты таблиц в базе данных с расширенными возможностями. В наборе может быть неограниченное число блоков. Каждый набор и блок имеют собственные права доступа на просмотр, создание, изменение и удаление данных. Первичный ключ в наборе создается автоматически, поэтому указывать его в качестве одного из блоков нет необходимости.
При использовании вложенных друг в друга наборов возникает необходимость их связи между собой по обобщенным данным, записанным в соответствующих блоках. Такая связь устанавливается с помощью атрибута relation («отношение»). Если между родителем и потомком требуется установить связь «многие ко многим», то значением данного атрибута будет «multi». Связь «один ко многим» устанавливается с помощью значений «parent» или «child». Они указывают на то, где именно находится первичный ключ связи — у родителя или у потомка соответственно.
Права доступа
Права доступа задаются с помощью элемента «Разрешения» (англ. «permission») внутри каждого набора. Права доступа задаются на создание, чтение, обновление и удаление набора по группам и пользователям. Каждый тип прав доступа внутри элемента «Permission» задается отдельными элементами: Create, Read, Update, Delete (согласно перечисленным выше типам). Для каждого элемента существуют атрибуты «users» (пользователи) и «groups» (группы). В них через пробел указываются имена пользователей или групп, для которых разрешены те или иные привилегии.
Тип доступа задается в зависимости от элемента «расположение» и атрибута «access», индивидуального для каждого набора. Таким образом, шаблонизатор сгенерирует соответствующие поля ввода для редактируемых данных, если мы находимся в режиме создания или редактирования, а интерпретатор проверит, имеет ли авторизованный пользователь права на те или иные действия.
Шаблонизатор
Безусловно, одного лишь интерпретатора, генерирующего данные, недостаточно, чтобы пользователь получил готовый документ (в формате HTML или любом другом).
№ 6 (54) 2014
Данные, полученные после работы интерпретатора, должны быть переданы шабло-низатору, после чего они будут «склеены» с заранее подготовленным шаблоном.
Подобная концепция проектирования многократно испытана профессиональным сообществом разработчиков и носит название Model-view-controller (MVC, «модель-представление-контроллер») [8]. Технология BlockSet также следует методологии MVC. Здесь роль контроллеров и моделей берет на себя интерпретатор BML, а роль представления — шаблонизатор.
Шаблонизатор получает данные от интерпретатора BML. Эти данные представляют собой стандартизированный набор переменных на основе заранее подготовленной спецификации. К таким переменным относятся названия блоков и наборов из BlockSet, характеристики клиента и сервера, состояния блоков и наборов и др.
В качестве интерпретатора допустимо использовать любое программное обеспечение, выполняющее указанные выше функции. Основная задача в этом случае сводится к написанию специализированного класса-посредника, отправляющего данные интерпретатора в шаблонизатор. Разумеется, шаблоны должны быть составлены на основе того синтаксиса, который понимает выбранный шаблонизатор. Разрабатываемый проект изначально поддерживает шаблонизатор CTPP2 [9].
визуализация BML
Методология BML проста в изучении, что говорит о низком пороге вхождения в технологию разработки. Синтаксис на основе BML также остается простым для восприятия, так как основан на языке XML. Получаемые структуры наглядно представляют логику работы приложения, которую, в свою очередь, легко модифицировать для своих нужд, что подразумевает эффективное сопровождение проекта.
Несмотря на достаточно простой принцип разработки, неподготовленному пользо-
вателю будет затруднительно сразу перейти к написанию кода. Тем не менее структурный декларативный подход дает неограниченные возможности для визуализации, так как визуальные интерфейсы практически полностью повторяют вид генерируемого кода. Такие интерфейсы позволяют «настраивать» логику работы и генерировать в конечном итоге BML-код, используя диалоговые окна.
Пример
С помощью методологии BlockSet становится возможным решить огромное количество рутинных задач и эффективно использовать время, затрачиваемое на разработку большинства Web-приложений. Рассмотрим пример решения одной из таких задач: разработка каталога научных публикаций в Web. Требования к проекту: разработать каталог научных публикаций с возможностью разграничения прав доступа на просмотр, добавление, редактирование и удаление контента. Структуры данных: авторы, категории и статьи. Автор имеет следующие атрибуты: фамилия, инициалы, фото. Статья имеет название, текст, идентификатор автора, идентификатор категории. Статья может иметь больше одного автора, а автор — больше одной статьи. Оперируя языком реляционных баз данных, имеем классическую связь «многие ко многим». Категория имеет шифр специальности и описание.
Запишем поставленную задачу с помощью синтаксиса BML, используя понятия методологии BlockSet (листинг i).
Значение атрибута «base» элемента Location («Расположение») говорит нам о том, что указанная логическая структура применяется для главной страницы сайта. Внутрь набора «articles» (статьи) вложены наборы «authors» (авторы) и «categories» (категории). Авторы и статьи имеют отношение «многие ко многим», поэтому для них установлен атрибут «relation» («отношение») со значением «multi». Аналогичный атри-
NO. 6 (54) 2014
journal of applied informatics
Листинг 1
Пример реализации главной страницы проекта
<location base="/" template="default.tmpl">
<set name="articles" template="article.tmpl ' limit=20>
<permission>
<create groups="editor" />
<read groups="authorized" />
<update groups="moder admin" />
<delete groups="moder admin" />
</permission>
<block name="name" type="string" />
<block name="content" type="string" />
<set name="authors" template="author.tmpl relation=" 'multi">
<block name="firstname" type="string" />
<block name="initials" type="string" length= 2" />
<block name="photo" type="image" mime="image/jpg image/png"
maxwidth="10 0" maxheight="90" resize="auto" />
</set>
<set name="categories" template="cat.tmpl relation=" 'child">
<block name="cipher" type="string ' length="8 ' />
<block name="description" type="string" />
</set>
</set>
</location>
бут у вложенного блока «категории» имеет атрибут «parent», что означает связь «один ко многим», а первичный ключ данной связи расположен у потомка (т.е. у категории). Таким образом, одной категории соответствует множество статей. Отметим, что первичные ключи в наборах не указываются, так как набор является высокоабстрактной сущностью, не связанной напрямую с базами данных. По той же причине не указываются связующие таблицы во множественных отношениях — работа с подобными структурами возложена на интерпретатор, где они создаются автоматически. Атрибут «Limit» устанавливает ограничение на количество выводимых записей из наборов на одной странице — будет выведено не более 20 статей.
Все блоки имеют возможность детального конфигурирования. Например, для типа image («изображение») существует возможность задания максимального разрешения по ширине и высоте, а также указания MIME-типа поддерживаемых изображений.
В проекте-примере такой тип данных имеется у фотографии одного из авторов статьи (блок «photo»). Блок имеет ограничения на размер изображения не более 100 х 90 пикселей и позволяет загружать файлы в формате JPEG и PNG. При превышении допустимых размеров интерпретатор автоматически уменьшит изображение, что указано в атрибуте «resize» со значением «auto».
После обработки описанной структуры интерпретатором данные будут отправлены в шаблонизатор согласно спецификации. Атрибуты «template» у наборов и расположения дадут понять шаблонизатору, какие шаблоны подключать в том или ином случае. Шаблонизатор сопоставит их с шаблоном, а браузер на выходе отправит пользователю готовый документ.
выводы
В статье рассмотрены основные принципы Web-разработки и представлен новый
№ 6 (54) 2014
подход, основой которого является декларативное программирование. Показаны преимущества и недостатки между императивным и декларативным подходами к разработке.
Приведены примеры использования похожей методологии в других проектах, в частности, упомянута парадигма БЭМ, используемая в компании «Яндекс», где указанная парадигма используется только в области клиентской Web-разработки.
Детально описан принцип перераспределения уровней абстракции на примере элементов «Набор» и «Блок». В ходе исследования были выявлены положительные стороны повышения абстракции данных в элементе «Набор», который в описанной методологии может выполнять универсальную функцию для представления и обработки различных наборов данных на Web-узлах.
Элементу «Блок», напротив, задана конкретизирующая роль, заключающаяся в уточнении типов данных. Этот элемент представляет собой единое целое и не разделяет данные, хранящиеся в СУБД и в виде файлов. Элемент содержит большое количество разнообразных атрибутов, отличающихся в зависимости от типов данных, что позволило повысить гибкость разработки.
Рассмотрена концепция MVC, в которой разделена логика работы приложения и его конечное представление. Показана детально роль шаблонизатора, генерирующего конечный документ.
В результате представленная методология не требует больших временных затрат на ее изучение, так как имеет низкий порог вхождения, не требует специализированных знаний языков классического императивного программирования. Использование декларативной архитектуры также является хорошей почвой для визуализации, так как структурное отображение логики хорошо трансформируется в диалоговые окна. Все это позволяет сократить время разработки Web-приложений.
Список литературы
1. Генаев М. А., Комышев Е. Г., Гунбин К. В., Афонников Д. А. BioInfoWF — система автоматической генерации Web-интерфейсов и Web-сервисов для биоинформационных исследований // Вавиловский журнал генетики и селекции. 2012. Т. 16. № 4/1.
2. SCORM 2004 Overview for Developers // SCORM. URL: http://scorm.com/scorm-explained/technical-scorm/scorm-2004-overview-for-developers/.
3. Барков И. А. Декларативная конструкторская семантика описания свойств и особенностей изделия в интеллектуальных САПР // Вестник ИжГТУ. 2007. №. 3.
4. Rising L. Understanding the Power of Abstraction in Patterns // IEEE Software. July/August 2007. Vol. 24. No. 4.
5. Бережной С., Харисов В. Методология // БЭМ. Блок, Элемент, Модификатор. 2014. URL: http://ru.bem.info/method/.
6. Kellar L, Waiters C. and Shepherd M. A Field Study Characterizing Web-Based Information-Seeking Tasks // Journal of the American Society for Information Science and Technology. May 2007.
7. Chapter 11 Data Types // MySQL: MySQL 5.5 Reference Manual. URL: http://dev.mysql.com/doc/re-fman/5.5/en/data-types. html.
8. Reenskaug T., Coplien J. O. The DCI Architecture: A New Vision of Object-Oriented Programming // ar-tima developer. 2009. URL: http://www.artima.com/ articles/dci_vision. html.
9. Шетухин А. Документация // Шаблонизатор CTPP. URL: http://ctpp.havoc.ru/doc. html.
References
1. Genaev M. A., Komyshev E. G., Gunbin K. V., Afon-nikov D. A. BioInfoWF — sistema avtomaticheskoy generatsii Web-interfeysov i Web-servisov dlya bio-informatsionnykh issledovaniy. Vavilovskiy zhurnal genetiki i selektsii, 2012, vol. 16, no. 4 (1).
2. SCORM 2004 Overview for Developers. SCORM. URL: http://scorm.com/scorm-explained/technical-scorm/scorm-2004-overview-for-developers/.
3. Barkov I. A. Deklarativnaya konstruktorskaya se-mantika opisaniya svoystv i osobennostey izdeli-ya v intellektual'nykh SAPR. Vestnik IzhGTU, 2007, no. 3.
No. 6 (54) 2014
journal of appued informatics
4. Rising L. Understanding the Power of Abstraction in Patterns. IEEE Software, July, August 2007, vol. 24, no. 4.
5. Berezhnoy S., Kharisov V. Metodologiya. BEM. Blok, Element, Modifikator. 2014. URL: http://ru.bem.info/ method/.
6. Kellar L., Watters C., and Shepherd M. A Field Study Characterizing Web-Based Information-Seeking Tasks. Journal of the American Society for Information Science and Technology, May 2007.
7. Chapter 11 Data Types. MySQL: MySQL 5.5 Reference Manual. URL: http://dev.mysql.com/doc/ref-man/5.5/en/data-types.html.
8. Reenskaug T., Coplien J. O. The DCI Architecture: A New Vision of Object-Oriented Programming // ar-tima developer. 2009. URL: http://www.artima.com/ articles/dci_vision.html.
9. Shetukhin A. Dokumentatsiya Shablonizator CTPP. URL: http://ctpp.havoc.ru/doc.html.
P. Keyno, Lecturer, Department of System Modelling and Engineering Graphics, «MATI» — Russian State Technological University, Russia, Moscow, [email protected]
A. Siluyanov, PhD in Engineering, Associate Professor, Department of System Modelling and Engineering Graphics, «MATI» — Russian State Technological University, Russia, Moscow, [email protected]
Automated development of dynamic websites by using declarative programming language
The article examines the theoretical background of a new methodology in the Web-development of server- and the client-sides. The authors have developed a methodology BlockSet, including a declarative programming language with interpreter application. The main idea of the article is the redistribution of the abstraction levels. Such redistribution allows reduce the period for mastering of the proposed methodology and amount of appropriate. It also allows to accelerate the design process. The article considers the advantages and disadvantages of declarative and imperative programming. Similarities with the BEM methodology used in «Yandex» are described. Authors reject database design concepts but make accent on the data abstraction is one of the basic principle as one of the basic principle of the methodology which proposes extended data types. The result is the decreasing of the abstraction level and increasing the data model flexibility. This approach makes no differences between data sources, whether it would be the database or file storage. It is considered as the unified concept. The basic principles of MVC (Model-View-Controller) are considered. The main practical component of the work is the development of BML interpreter. This language is based on BlockSet methodology. The direct relationship between the BML structure and the visual editor is shown. Thus, it is possible the modeling of the logic and design of Web-document without programming. Some examples of the proposed methodology are presented.
Keywords: Web, server-side and client-side programming, backend, frontend, declarative programming, MVC, data models, BML, BlockSet, HTML, XML.
