|
Фреймворк для разработки web-приложений на базе технологий AJAX/DHTML (краткое описание) Фреймворк представляет собой программно-технологическую основу для разработки клиентской части web-приложения. Фреймворк формализует механизмы создания гибких пользовательских интерфейсов на базе динамических web-компонентов и обмена данными с серверной частью системы. Web-компоненты Web-компоненты представляют собой независимые программные модули, предназначенные для решения определенной функциональной задачи. Web-компоненты реализуются на языке JavaScript и исполняются в браузере пользователя. Например, компонент отображения результатов выборки/отчета, компонент параметров заказ клиента, компонент ведения переписки по тикету и др. Под управлением фреймворка компоненты динамически загружаются в браузер, встраиваются в пользовательский интерфейс web-приложения и реализуют всю полноту функционального назначения компонента по взаимодействию с пользователем, обработке и представлению информации. Компоненты могут декларировать ряд собственных программных методов для построения взаимодействия с другими web-компонентами в пользовательском интерфейсе. Визуализация web-компонентов в браузере В отличие от большинства систем, в которых html-разметка формируется серверной частью системы и передается для визуализации в браузер пользователя, web-компоненты после загрузки в браузер программно формируют собственную html-разметку при участии функциональных средств фреймворка. Это позволяет разгрузить серверную часть системы, убрать из серверных скриптов шаблоны, фрагменты разметки, и т.п., сделать их более читаемым и профилировать их на обработку данных и взаимодействие с БД. 
Рис. 1. Пример размещения компонентов в пользовательском инетрфейсе. (1)-компонент индивидуальной информации пользователя; (2)-компонет быстрого поиска заказов, тикетов, финансовых детализаций и др. объектов; (3)-компонет считывания штрих-кодов со сканера; (4)-компонент формы заявки на возврат отказов. Настройка работы компонентов. Один и тот же компонент может использоваться по-разному, в зависимости от решаемых задач. Для целей адаптации под решение конкретной задачи в программной части компонента специальным образом выделяется область параметров, которые управляют режимами его работы. Аналогично выделяются настройки css-стилей для адаптации визуального представления компонента. Обмен данными с сервером. Входные данные (получаемые с сервера системы) и выходные данные (передаваемые на сервер системы) структурируются особым образом в зависимости от функционального назначения компонента. Web-компоненты обмениваются данными с сервером посредством функциональных средств фреймворка на базе технологии AJAX. Программная часть web-компонента, параметры его настройки, а также css-стили систематизируются в форме файлов программных скриптов, размещенных на сервере системы. Пользовательский интерфейс приложения Пользовательский интерфейс приложения представляет собой динамический html-документ, в котором помимо традиционного графического оформления специальным образом выделяются области для встраивания загружаемых web-компонентов (рис. 1). По характеру взаимодействия с пользователем интерфейс web-приложения функционирует аналогично тому, как работают настольные приложения, т.е. без переходов по web-страницам (в процессе работы адресная строка приложения в браузере не изменяется). Программная реализация пользовательского интерфейса представляет собой формализованное описание на языке JavaScript, которое содержит: структуру интерфейса с выделенными областями для встраивания компонентов, программные директивы межкомпонентных вызовов (методов), а также отдельные настройки параметров и css-стилей, предназначенные для адаптации работы web-компонентов в интерфейсе. Описания интерфейсов хранятся в форме файлов, на сервере системы. Адаптация web-компонентов Один web-компонент с широким функционалом может использоваться многократно в различных пользовательских интерфейсах для решения схожих задач, при этом компонент может визуально выглядеть и работать по-разному. Адаптация web-компонента состоит в том, чтобы в зависимости от общего оформления интерфейса и функционального контекста, в котором используется компонент, изменять его визуальное представление и режимы его работы. Ниже на рис. 2-4 представлен пример того, как один и тот же компонент используется для решения различных задач. 
Рис. 2. Компонент редактора финансовой детализации клиента 
Рис. 3. Компонент просмотра финансовой детализации клиента 
Рис. 4. Компонент редактора ежедневного отчета курьера Для цели адаптации web-компонента с учетом контекста решаемой задачи в программных файлах пользовательского интерфейса системы формализуются: актуальный набор значений параметров для управления режимами работы компонента, настройки по используемым в работе наборам данных, а также css-стилизация визуальной части компонента. Активация и загрузка компонентов В общем случае пользовательский интерфейс приложения может быть достаточно сложными и включать в себя большое число различных web-компонентов. В процессе работы пользователя с интернет-приложением часть задекларированных в интерфейсе web-компонентов может быть скрыта от пользователя (дезактивирована), но при наступлении определенных условий (событий) становиться доступной, при этом некоторые активные компоненты могут дезактивироваться. В ходе работы приложения программные файлы web-компонента загружаются в браузер только по мере их активации в интерфейсе. Однажды загруженные в браузер пользователя файлы компонента автоматически кэшируются в памяти браузера и не требуют загрузки в случае повторного использования компонента. Программное управление пользовательским интерфейсом Все процессы, связанные с работой пользовательских интерфейсов web-приложения, их динамической загрузкой, развертыванием, а также динамической активацией и загрузкой web-компонентов, проходят под управлением фреймворка. Для этих целей фреймворк реализует комплекс системных средств управления web-приложением, в числе которых: поддержка системных событий, управление интерфейсами на основе специальных структурных директив, клиент-серверный обмен данными, генератор html-разметки web-компонентов, супервизор загрузки файлов компонентов, а также ряд вспомогательных библиотек, упрощающих разработку web-приложения. Фреймворк представляет собой JavaScript-файл с открытым программным кодом, который загружается в браузер, после чего берет на себя управление развертыванием web-приложения. Серверное приложение и обмен данными Процессы клиент-серверного обмена данными реализуются на базе технологии AJAX, инициируются web-компонентами и проходят под управлением фреймворка. Серверное приложение, как это уже было отмечено выше, практически не участвует в процессах формирования пользовательского интерфейса и генерации html-разметки. В данном контексте серверное приложение выполняет функции обмена данными с клиентской частью приложения, чтения и записи информации в базу данных, а также при необходимости функции по дополнительному контролю, анализу и преобразованию данных. Благодаря переносу функций по формированию пользовательских интерфейсов web-приложения на компьютер пользователя работа серверной части существенно упрощается, а также снижается нагрузка на сервер системы. Распределение нагрузки Интернет-приложения на основе web-компонентов характеризуются управляемым уровнем распределения нагрузки между клиентской и серверной частью системы. В общем случае, вектор направлен на снижение серверной нагрузки, которое достигается за счет того, что на стороне web-клиента выполняется ряд ресурсоемких функций, традиционно реализуемых на сервере системы. В частности: - Программный характер компонентов позволяет выполнять значительную часть валидации и первичной обработки вводимых пользователем данных непосредственно на web-клиенте без обращения к серверу системы. - Отображение динамических изменений информации системы (напр.: ранжирование, агрегация, группировка и др.) производится программными средствами компонентов и не требуют ресурсов сервера. - Загрузка файлов пользовательского интерфейса и web-компонентов, преобразования интерфейса, межкомпонентное взаимодействие, генерация html-разметки web-компонентов полностью осуществляются на клиентской стороне под управлением фреймворка. Интернет-трафик Фреймворк позволяет строить web-системы в которых структурная информация полностью отделена от оперативной информации. Под структурной информацией понимаются все файлы программных скриптов, настроек, css-стилей, на основе которых реализуются web-компоненты и пользовательские интерфейсы web-приложения. Под оперативной информацией понимаются данные, которые обрабатываются в системе и подлежат хранению в базе данных. Вся оперативная информация динамически обрабатывается и отображается в браузере с помощью web-компонентов. Однажды загруженные в браузер пользователя файлы структурной информации пользовательского интерфейса и web-компонентов, равно как и файл фреймворка, автоматически кэшируются в браузере и при всех последующих посещениях пользователем не требуют повторной загрузки. На практике это означает, что при регулярном пользовании web-приложения трафик сводится к обмену только оперативной информацией. Разделение структурной информации и оперативной информации в сочетании с динамическим отображением в браузере всех изменений данных системы с помощью web-компонентов (без переходов по html-страницам) позволяют существенно снизить сетевой трафик и повысить скорость работы системы. -------------------- Контакты
Email: info@lipkin.biz
|