Разработка насыщенных веб-интерфейсов



Скачать 427.64 Kb.
страница1/3
Дата16.09.2014
Размер427.64 Kb.
ТипДокументы
  1   2   3
РАЗРАБОТКА НАСЫЩЕННЫХ ВЕБ-ИНТЕРФЕЙСОВ
Несмотря на особенности реализации программных систем в веб-среде, такие как отсутствие “состояния” у веб-приложений и зависимость от браузера, создание веб-решений вот уже более десяти лет образует

наиболее перспективное и динамично развивающееся направление современной индустрии разработки

приложений.

До недавнего времени веб-интерфейсы работали только по одной схеме: на событие (клик по ссылке или

нажатие на кнопку) браузер реагировал отправкой запроса серверу. Когда с сервера приходил ответ, всё

содержимое страницы полностью обновлялось. Одна из проблем состояла в том, что при обновлении

содержимого страницы веб-приложение переходит в новое состояние. Из информации о предыдущем

состоянии сохраняются только данные, переданные в запросе. Чем более точная информация о прежнем

состоянии системы требуется, тем больше данных необходимо пересылать в запросе.

Современные браузеры, поддерживающие стандарты W3C DOM, позволяют вывести веб-приложение на

новый уровень. Схема взаимодействия остается почти такой же. Вот только отправляет запрос и получает

ответ с сервера теперь скрипт на стороне клиента, а вместо обновления всей страницы – обновляется только

ее часть (вместо обновления могут предприниматься иные действия, например, отправляться следующий

запрос).


Веб-приложение получается распределенным, и часть логики находится на стороне клиента, а часть

– на стороне сервера. Такие приложения и называют термином "AJAX Applications" (аббревиатура

расшифровывается как Asynchronous Javascript And Xml Applications). В самом названии AJAX (асинхронный

JavaScript и XML) отражена суть технологии. Она позволяет клиентской и серверной сторонам веб-

приложения взаимодействовать асинхронно. Т.е. ваш браузер может обратиться к серверу в любой момент

времени (скажем, когда вы навели мышь на ссылку в тексте) и, наоборот,сервер может передать данные

браузеру в любой момент, а не только лишь тогда, когда запрашивается новая страница.

Наиболее популярна сегодня концепция «Веб нового поколения» (Web 2.0).


Одной из главных, отличительных черт приложений Web 2.0 становится поддержка полноценного, насыщенного (rich) пользовательского интерфейса, который должен приблизиться к традиционным

«настольным» интерфейсам по своим функциональным возможностям, интерактивности, удобству и

эффективности использования. Для создания современных пользовательских интерфейсов создаются

специальные библиотеки новых элементов управления, использующие AJAX,такие как Yahoo UI Library и

другие.

Приложения подобные Gmail, Google Maps, Flickr оставили в прошлом привычную для разработчиков модель «тонкого» клиента, и заставили в полной мере работать стек технологий DHTML(JavaScript /DOM/CSS), заложенный в стандартной архитектуре современного Веб-клиента.



Схема взаимодействия компонент современного веб-приложения


Особенностью современного веб-приложения является его асинхроный режим работы — это и отличает его от традиционных настольных «клиент-серверных» систем. В последних асинхронно выполняется только передача данных, в то время как все клиентское приложение (программный код, определения внешних форм и т.п.) находятся на компьютере пользователя, и их не надо подкачивать с сервера в процессе работы. С другой стороны, в процессе рабочего цикла Веб-приложения с сервера в асинхронном режиме передаются не только данные, но и программные компоненты. В результате Веб-приложение на клиенте приобретает специфическую, динамически изменяющуюся, полу-детерминированную программную структуру, трансформация которой ведется в условиях, когда мы точно знаем состояние структуры до и после трансформации, однако не можем точно предсказать, когда эта трансформация завершится.

Хотя особенности, отмечаемые при реализации насыщенных Веб-интерфейсов не типичны для современных средств поддержки разработки, в недавнем прошлом можно найти программные средства с аналогичными свойствами. Прежде всего имеется ввиду широко известная архитектура пользовательского интерфейса, называемая Model-View-Controller (MVC) в той своей первоначальной инкарнации, когда она появилась в языке Smalltalk.

Система интерактивного пользовательского интерфейса, реализуемая на основе этой архитектуры, содержит три четко выделенных уровня, так называемая MVC-триада: модельный слой (model), инкапсулирующий представление данных и реализацию бизнес-логики приложения; слой презентации (view), определяющий правила формирования внешних форм, отображающих состояние приложения на экране; а также управляющий слой (controller), отвечающий за преобразование событий пользовательского интерфейса (нажатие кнопок клавиатуры, мыши и т.п.) в вызовы операций бизнес логики. Взаимодействие между этими слоями подчиняется жесткой системе ограничений, в соответствии с которой модельный слой не должен иметь прямых обращений к презентационному и управляющему слоям; слой презентации получает уведомления об изменении состояния приложения через механизм наблюдателя (observer); наконец, управляющий слой не может непосредственно модифицировать внешнюю форму и может воздействовать на состояние слоя презентации только опосредовано, через модификацию состояния модельного слоя.

Сегодня, в приложении к современным системам поддержки разработки пользовательского интерфейса, использование MVC-архитектуры в основном сводится к выделению тех технологических преимуществ, которые вытекают из четкого концептуального отделения данных и логики приложения от определения форм внешнего интерфейса. В частности, этот принцип разделения слоев, принятый в MVC, можно увидеть в основе многочисленных сервер-ориентированных систем для создания Веб-приложений (Struts, Spring Web MVC., Java Server Faces и др.).

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

Идея адаптировать парадигму взаимодействия компонент в MVC к задачам построения клиентской архитектуры Веб-приложений с насыщенным пользовательским интерфейсом кажется очень перспективной. Особенно интересными и важными с практической точки зрения представляются такие фундаментальные свойства синхронизации по схеме MVC, как опосредованность (mediated interaction) и статусность (statefulness).



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

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

Каркасы Веб-приложений на службе разработчика

Framework -программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта. В отличие от библиотек, которые объединяют набор подпрограмм близкой функциональности, фреймворк содержит в себе большое количество разных по назначению библиотек. Употребляется также слово каркас, а некоторые авторы используют его в качестве основного.

Каркасы (framework) веб-приложений сегодня являются наиболее популярными средствами разработки веб-приложений. Не все существующие frameworks основаны на архитектуре MVC. Среди MVC фреймворков наиболее известны Symfony и Yii Framework.



Реализация MVC в Symfony



Model (Модель) - определяет бизнес-логику (база данных относится к данному типу). Symfony хранит все классы, связанные с Model в каталоге lib/model.

View (Вид) это то, с чем работает пользователь (шаблонный движок являются частью данного типа). В symfony, View по большей части основан на PHP шаблонах. Они хранятся в различных каталогах templates.

Controller (Контроллер) - это часть кода, которая вызывает Model для получения данных, которые уже передаёт View для их выдачи клиенту. Все запросы принимаются фронт-контроллерами (index.php и frontend_dev.php (по имение сгенерированного front-end приложения)). Данные фронт-контроллеры оставляют реальную работу действиям(actions). Действия symfony логически сгруппированны в модули.

Особенности symfony framework

  1. создание и управление проектом осуществляется через систему task'ов — задач: генерация базовой структуры каталогов, генерация приложений, модулей, развертывание базы данных (генерация на основе YAML-конфигурации SQL-кода, создание БД, заполнение БД данными из YAML-фикстур (fixture), deploy (развертывание) проекта на production сервере и тд)

например: php symfony generate:project jobeet —orm=Propel

этот task создаст проект с именем jobeet и на ORM Propel. Структура каталогов созданного проекта:



Directory

Description

apps/

Hosts all project applications

cache/

The files cached by the framework

config/

The project configuration files

lib/

The project libraries and classes

log/

The framework log files

plugins/

The installed plugins

test/

The unit and functional test files

web/

The web root directory (see below)



  1. Конфигурирование проекта через YAML-файлы

  2. Интеграция ORM (Propel, Doctrine)

  3. Поддержка AJAX на уровне архитектуры

  4. Несколько предустановленных окружений работы приложений: prod, dev и test. Окружение dev предоставляет разработчику доступ к debugging панели, где можно получить информацию о текущих настройках проекта, данных response и request, запросах к базе данных, лог-данных.

6) Admin generator — на основе модели генерирует модули администрирования.

ORM

ORM (англ. Object-relational mapping, рус. Объектно-реляционное отображение) — технология программирования, которая связывает базы данных с концепциями объектно-ориентированных языков программирования, создавая «виртуальную объектную базу данных». Существуют как коммерческие, так и свободные реализации этой технологии.
  1   2   3

Похожие:

Разработка насыщенных веб-интерфейсов iconРезюме роман Александрович Спиридонов
Ооо «Мультисофт». Дизайнер компьютерной графики. Разработка веб-сайтов и пользовательских интерфейсов, специалист
Разработка насыщенных веб-интерфейсов iconРезюме «Руководитель интернет проекта»
Юзабилити сайтов. Проектирование веб интерфейсов, Центр "Специалист" при мгту имени Баумана, Сертификат
Разработка насыщенных веб-интерфейсов iconАрхитектор/разработчик баз данных, веб-разработчик – удаленная работа
Проектирование, разработка, поддержка и оптимизация баз данных, участие в высокотехнологичных нагруженных веб-проектах
Разработка насыщенных веб-интерфейсов iconПринципы построения интерфейсов из Глава из книги «Shareware: профессиональная разработка и продвижение программ»
Из книги «Shareware: профессиональная разработка и продвижение программ». Станислав Жарков
Разработка насыщенных веб-интерфейсов iconЧто такое Веб 0
«Что такое Веб 0» веб-сайтом «Компьютерра online». В этой статье Тим О’Рейли связал появление большого числа сайтов, объединенных...
Разработка насыщенных веб-интерфейсов iconРуководство по созданию и размещению веб-форм на сайте Содержание создание веб-формы в упрощенном режиме 3
В данном руководстве по созданию и размещению веб-форм на сайте мы рассмотрим основные аспекты работы с веб-формами: создание веб-форм...
Разработка насыщенных веб-интерфейсов iconПрограмма по дисциплине создание web-интерфейса информационных систем шувалова
Обучение студентов технологии создания Интернет-интерфейсов (Web-интерфейсов) различных видов; усвоение способов успешного использования...
Разработка насыщенных веб-интерфейсов iconСистема композиции веб-сервисов на основе их семантических описаний
Представленная система позволяет быстро и легко создавать описания композиции веб-сервисов на языке owl-s, что позволит разработчикам...
Разработка насыщенных веб-интерфейсов iconВеб-страница, гипертекст, ссылки, веб-сайт, веб-сервер
В настоящее время Интернет занимает все большое место в жизни современного человека. А что же это такое Интернет? Слово образовано...
Разработка насыщенных веб-интерфейсов iconОсновы веб-конструирования Общее представление о веб-конструировании
Методы конструирования веб-сайтов и инструменты, с помощью которых выполняется конструирование, очень разнообразны, их можно классифицировать...
Разместите кнопку на своём сайте:
ru.convdocs.org


База данных защищена авторским правом ©ru.convdocs.org 2016
обратиться к администрации
ru.convdocs.org