Специальные средства для разработки WEB-приложений

Статья будет опубликована в журнале "Вестник СПбГУ".
Полная версия статьи будет доступна после публикации.

Введение

Бурное развитие сетевых приложений и Интернет за последние 5-10 лет все чаще заставляет разработчиков программного обеспечения смотреть вперед, чтобы их продукт был действительно конкурентоспособен не только сегодня и завтра, а еще и послезавтра. Обеспечение такой базы – вещь весьма сложная и дорогостоящая. Самая главная идея – это масштабируемость продукта. Современное приложение должно быть четко структурировано и легко модифицируемо. Так как требования клиентов могут часто и кардинально меняться, необходимо оперативно реагировать на такие изменения. Давайте повнимательнее рассмотрим основы таких продуктов и решения основных проблем, которые могут возникать в процессе разработки. 

В статье будет рассмотрена технологическая основа современных приложений, которая носит название WEB 2.0. Дано сравнение WEB 2.0 и классического подхода к построению интерфейсов. Мы рассмотрим основы технологии AJAX с примерами. Будет предложен подход к построению пользовательских интерфейсов на основе собственных разработок автора с применением языков разметки. Будет дана оценка плюсов и минусов WEB 2.0. Итак, вперед.

WEB 2.0

WEB 1.0 – это все то, что мы привыкли видеть в окнах наших браузеров. Это и стандартные «сайты - визитки», и различные системы управления сайтами, и информационные порталы. Характерной особенностью всех вышеупомянутых сайтов является то, что можно назвать «однопоточностью», то есть при каждом клике по ссылке происходит полная перегрузка страницы. Обычно запрашивается какой-либо скрипт (PHP, Perl) или приложение (JSP, CGI), который в свою очередь на основе полученных данных (GET или POST) общается с базой данных, строит HTML страницу и отдает ее браузеру. Это классическая клиент-серверная архитектура. Схематично ее можно изобразить следующим образом.

Что же меняется, когда мы начинаем говорить о WEB 2.0? Прежде всего, это «многопоточность», которую как раз и обеспечивает очень модная нынче технология AJAX (о ней ниже), во вторых – четкое разделение частей сайта. Здесь имеется в виду разделение следующих составляющих интернет-приложения: разметка страницы (HTML, XML), ее представление (CSS), логика серверного скрипта или приложения, уровня данных и, наконец, объектов-менеджеров, которые и синхронизируют работу ближайших сущностей. В правильно спроектированном приложении уровню данных не надо знать о том, что где-то существует какой-то HTML, в который потом данные будут вставлены. По сути, ему неважно, куда эти данные будут вставлены – за это отвечает менеджер данных и интерфейса. Именно он может, если надо, перенаправить поток данных в файл, или отправить по электронной почте. Опытный программист сразу увидит плюсы такой архитектуры – можно четко разделить работу над проектом на части. Например, С++ -программист пишет уровень базы данных(БД), верстальщик делает интерфейсы, а JavaScript-программист – пишет менеджера данных. В случае с WEB 1.0 этот подход абсолютно неприемлем. Вот примерная схема работы приложения WEB 2.0.

На этом рисунке видно, что сначала серверная часть отдает данные, а страница сайта не перегружается, а потом на сервер уходит сразу несколько запросов и составляется один ответ, который и представляет собой новую страничку.

AJAX

Давайте рассмотрим простой пример: для того, чтобы доехать до работы из дома, Вам требуется 5 литров бензина. Вы заправляете (из канистры) ровно 5 литров. Доезжаете до работы и на обратном пути делаете то же самое (опять 5 литров). А не проще ли залить сразу 10? Ведь вы же все равно поедете домой... Именно этим и отличается WEB 1.0 и WEB 2.0 соответственно. Эти самые 10 литров бензина и обеспечиваются технологией AJAX(Asynchronous Javascript and Xml)[2]. Сразу оговорюсь: AJAX – это не язык программирования, это не оболочка, это не скрипты и не программы. AJAX – это «философия разработки», набор рекомендаций по проектированию. 

Часть статьи вырезана. 

Альтернатива AJAX

К сожалению, на сегодняшний день все еще существуют браузеры без XMLHTTPRequest. Как правило, это очень специфичные и узконаправленные браузеры (например, для сотовых телефонов и КПК). Выход есть. А точнее их два. Во-первых, перезагрузка фреймов, а, во-вторых, перезагрузка скриптов. Рассмотрим эти две технологии подробнее. 

Практически любой браузер поддерживает фреймы <frame> и <iframe>. Чем они отличаются, можно прочитать в любом учебнике[4]. Так вот, хороши фреймы тем, что их можно спрятать (например, style=”display:none”) и перегружать (frame.src = “url”). Если же сюда подключить еще и механизм форм, то жизнь становится прекрасна.

Часть статьи вырезана.

Модульность

Логично было бы предположить, что все части большой системы должны быть четко и логически разделены между собой. Это можно схематично изобразить следующим образом.

Обращение из уровня работы с данными в пользовательский интерфейс попросту невозможно. Более того, невозможно также обращение к недокументированным методам. Каждый из уровней должен рассматриваться как «черный ящик», у которого есть несколько ручек, за которые можно дергать в определенной последовательности, а вот ногой по ящику бить нельзя. Более того, заранее известно, что если позвать один метод, то он сделает одно, а другой – другое, либо вернет ошибку.
В эту схему прекрасно вписываются все существующие web-сервисы[5]. Абсолютно неважно, кто и зачем запросил у сервера данные (как правило, это SOAP + WSDL), его дело – отдать эти данные в правильном формате, или сказать об ошибке.

Серверная часть

С технологиями, которые могут обеспечить WEB 2.0-ность на клиенте разобрались. Но ведь есть еще и серверная часть, которая должна уметь общаться с базой данных, отдавать и принимать данные. Здесь все гораздо проще, чем кажется.
Давайте попробуем схематично изобразить работу серверной части.

Итак, по порядку. Основная идея заключается в том, что есть некие правила, по которым менеджер данных компонует все данные. Эти же правила должна знать сторона, «принимающая» данные, для того, чтобы преобразовать полученную последовательность символов в объекты с данными. Потом необходимо проверить, все ли данные пришли, не разрушились ли они при передаче и не содержатся ли там некорректные данные (вместо числа – строка и пр.). Бизнес-логика может быть какая угодно. Это зависит от конкретного проекта. Для работы с БД рационально использовать специальные классы, которые будут автоматически обрабатывать ошибки БД. Связка из последних 3-х модулей может вызываться сколько угодно раз, так как иногда надо в процессе работы запрашивать новые данные или частично сохранять их. Поэтому они объединены пунктирным прямоугольником.

Примеры успешных работ

В отличие от WEB 1.0 приложения, ориентированные на AJAX, а, как следствие, и на WEB 2.0, можно пересчитать по пальцам. А хороших из них еще меньше. Вот несколько примеров:
http://maps.google.com – всем известная карта мира.
http://kiko.com – сайт с календарем, аналогичным, MS Outlook Calendar
http://wikipedia.com – “народная” энциклопедия
http://www.backbase.com – AJAX RSS reader
http://www.writely.com – MS Word в браузере
и прочие... (полный список можно найти здесь http://www.aventureforth.com/2005/09/06/top-10-ajax-applications/ )

Оптимизация разработки WEB-приложений

Давайте рассмотрим более детально пример использования подобной технологии. Мною была разработана система, предназначенная для быстрой разработки WEB-приложений, которую могут использовать не только профессиональные системные программисты, но и широкий круг пользователей сетей различного назначения. 

Аббревиатура разработанной системы для автоматизированного создания web-приложений – OWADE (online web application developement environment). Основная идея разработки заключалась в стремлении освободить программиста от кодирования рутинных операций, таких как наполнение интерфейса данными, сохранение изменений и построение интерактивных элементов управления (контролов). Всю эту работу за него должна делать система OWADE. Разработчику требуется всего лишь корректно описать модель данных, с которой он хочет работать, и создать разметку страницы, в которой и будут отображаться необходимые данные. 

Глобально система состоит из двух частей, реализующих два языка пользователей: язык разметки страницы (WIML – web interface markup language) и язык разметки базы данных (DBML – data base markup language). Оба языка основаны на XML, что предоставляет им должный уровень гибкости. Идеология языка WIML была взята у Mozilla. Их язык называется XUL[4] (XML User Interface Language, http://www.xulplanet.com/). 

Язык разметки web-интерфейсов представляет собой набор «компонент» и «правил разметки». К первому типу относятся стандартные и расширенные (интерактивные) элементы управления. Ко второму – стандартные элементы разметки: box (бокс), vbox (вертикальный бокс), hbox (горизонтальный бокс), а также элементы grid (сетка), spacer (пустой элемент), label (метка) и прочие. Примерами первого типа являются объекты: listbox (список), tree (дерево), tabbox (панель кнопок), calendar (календарь) и еще около двадцати различных элементов. У каждого компонента есть набор стандартных и дополнительных свойств, задаваемых в виде атрибутов, которые позволяют настроить функциональность и внешний вид контролов. Если же программисту требуется задать свой, отличный от стандартного стиль элемента, то он может для этих целей использовать атрибут class. Значением будет имя CSS класса, который должен быть определен. 

Часть статьи вырезана. 

В приведенном документе есть еще 2 неучтенных элемента: listbox и pagenavigator. Первый нужен, чтобы создать списочный элемент с колонками, которые перечислены в listhead, и строками из БД. О том, как там появились данные, чуть позже. Обратите внимание, что написав один раз listbox, программист автоматически получает полнофункциональный элемент со встроенной сортировкой, изменением ширины колонок, возможностью выбора (checkbox слева). Дальше-больше. Второй элемент нужен для того, чтобы автоматически реализовать навигацию по страницам. Теперь программисту не придется писать дополнительные скрипты для реализации постраничного вывода. Система все сделала за него сама. Причем, когда происходит какой-то запрос на сервер, то страница не перегружается, а перегружается только то, что необходимо. Это реализуется с помощью технологии AJAX, о которой говорилось ранее.
Перейдем к серверной части разработки. В ней используется DBML – язык разметки базы данных. Он состоит из двух XML файлов: файла с описанием структуры БД (structure.xml) и файла с описанием методов работы с БД (methods.xml). В первом файле должно находиться описание базы данных: всех таблиц, полей, ключей, свойств полей, а также там могут храниться определенные пользователем структуры данных (typedef) и, что самое главное, связи между полями. Файл methods.xml нужен, чтобы сервер знал, что именно он должен делать с теми данными, которые к нему пришли. Объект «method» полностью описывает структуру выборки и/или структуру сохраняемых данных. Для простых случаев подходит элемент «table», а для более сложных - элемент «composite». 

Часть статьи вырезана.
 
Данная разработка может быть полезна для программирования административных интерфейсов web-сайтов, систем управления данными в режиме on-line и для корпоративных ethernet-приложений[5]. Гибкость и простота использования системы обеспечивают необходимый уровень надежности и безопасности, так как программисту не надо заботиться о конкретных компонентах его приложения. Строгая модульность системы также дает свои плюсы: конкретное web-приложение становится независимым от контекста задачи, а изменение компонентов будет влиять на всю систему в целом.
Такой подход позволяет еще больше разделить все уровни сущностей, и ваше приложение станет действительно гибким и масштабируемым. Для руководителей проектов и team-leaders руководить такими разработками – одно удовольствие.

Заключение

В заключении статьи хотелось бы отметить, что существует достаточно много различных подходов к построению вэб приложений, сайтов и корпоративных порталов. Как правило, такие методологии не выходят за рамки одной компании. Разработка WIML и DBML – это просто попытка универсализировать и предложить альтернативный, достаточно гибкий подход к построению интернет-приложений любой сложности. Основной ценностью является простота установки и очень высокая скорость разработки. Это было доказано опытом внедрения системы в продукты компании Falk eSolutions AG www.falkag.com, позднее купленной компанией Doubleclick www.doubleclick.net. Скорость разработки была снижена в 2 раза, а это является неоспоримым преимуществом в современном мире. Более того, использование технологии AJAX позволило снизить затраты на трафик компании, что также является плюсом.

Список использованной литературы

• PHP 5 для профессионалов, Эд Леки-Томпсон, Хьяо Айде-Гудман, Алек Коув, Стивен Д. Новицки, 2006 
• Ajax in Action. Dave Crane, Eric Pascarello with Darren James, 2005 
• Beginning PHP and MySQL 5: From Novice to Professional, Second Edition, W. Jason Gilmore, 2006 
•  Полный справочник по HTML, CSS и JavaScript, Лазаро Исси Коэн, Джозеф Исси Коэн, 2007 
• Веб-сервисы: XML, WSDL, SOAP и UDDI, Эрик Ньюкомер, 2003

Анатолий Осолодкин
Генеральный директор ООО "ОФТ-Медиа"

• ← Весь архив