Современные тенденции в разработке интерфейсов WEB-приложений
В настоящее время в разработке WEB-приложений существует тенденция к разграничению клиентской и серверной части, этим и обусловливается повсеместное использование шаблонов, таких как Smarty и XSLT. Сейчас проекты становятся сложнее, и переплетать между собой различные технологии становиться слишком дорого и для разработчика. Так, например, все стили форматирования выносятся в CSS или в XSL-файлы, HTML или XML данные хранятся в других разделах, серверные обработчики – в-третьих, базы данных – в-четвертых. И если еще 5-6 лет назад практически везде можно было увидеть переплетение всего этого в одном файле, то сейчас это все чаще становится редкостью. При разработке более сложных проектов возникает необходимость в структурированности и удобочитаемости кода. Не следует засорять код программиста кодом верстальщика, а код верстальщика – правками дизайнера, и так далее. Возникает необходимость в разграничении работы. Так, например, дизайнер будет делать свою работу, верстальщик свою, программист свою, и при этом никто друг другу мешать не будет. В итоге каждому участнику проекта достаточно будет знать только те данные, с которыми ему придется работать. В таком случае производительность группы и качество проекта повышается в разы. В настоящее время эта проблема с успехом решается путем использования шаблонов, однако это тоже создает определенные трудности.
Рассмотрение среды Java Script
На сегодняшний день все веб-приложения работают по протоколу HTTP, по схеме клиент-сервер. То есть пользователь получает данные и далее, после внесения информации или ее изменений, они отправляются на сервер. В результате, вместо того, чтобы целиком сосредоточиться на работе с данными, обработать их полностью и, по завершении всех этапов преобразования, сохранить изменения на тот же сервер, пользователю приходится периодически отправлять данные на сервер, зачастую для проведения абсолютно примитивных операций, например, проверки правильности введенного e-mail. На практике это означает сплошные неудобства: ошибки при передаче данных, ошибки во введенной информации и, самое главное, потраченные нервы и время пользователя. Все это приводит к ухудшению качества трудовой деятельности и снижению продуктивности. Для того, чтобы хоть как-то облегчить работу с приложениями, был создан клиентский язык – Javascript. Благодаря нему существует возможность для перенесения определенного количества программной логики в HTML-страницу, что ускорит реакцию на действия пользователя. Но здесь есть один недостаток. Одна из проблем заключается в том, что как только JavaScript попадает в браузер пользователя, программная логика доступна для просмотра невооруженным глазом. До некоторой степени это не угрожает проекту, но при передаче конфиденциальной информации такое решение, зачастую, невозможно.
Вторым аспектом, который не способен решить Java Script является то, что серьезную программную логику в страницу поместить невозможно. Интерфейс для этого просто не предназначен. Вся логика должна находиться на уровне приложения, а это значит, приходится возвращаться на сервер. Сложности вызывает и тот факт, что Java Script поддерживается не всеми браузерами или не все пользователи включают ее поддержку. Поэтому проверка или обработка данных, реализация программной логики должны обрабатываться на сервере. Очевидно, что функций Java script в последнее время стало совершенно недостаточно, так как процедуру передачи и получения информации между сервером и клиентом язык упростить не смог. Передача существовала посредством методов GET и POST. Но на сегодняшний день существует намного более рациональный способ обмена данными между клиентом и сервером – объект языка Java Script – XMLHttpRequest. Этот объект впервые был реализован компанией Microsoft в виде объекта ActiveX, но сейчас он доступен как встроенный объект в некоторых браузерах. Этот объект позволяет с использованием JavaScript осуществлять HTTP-запросы к удаленному серверу без необходимости перезагружать страницу. По сути, HTTP-запросы отправляются и получаются полностью вне страницы, а пользователь их даже не замечает. Это позволяет достичь создания быстрого пользовательского интерфейса с сохранением при этом программной логики на сервере. Но технология на сегодняшний день еще не стандартизована, поэтому в различных браузерах она работает по-разному, либо не работает вовсе.
Ajax технология
К сожалению, средствами XMLHttpRequest можно лишь ускорить работу приложения, но улучшить интерфейс и создать иную систему работы с ним – невозможно. Улучшить ситуацию здесь помогает AJAX (Asynchronous JavaScript and XML) – подход к построению пользовательских интерфейсов веб-приложений, при котором web-страница, не перезагружаясь, сама догружает нужные пользователю данные. AJAX – один из компонентов концепции DHTML. Впервые об Ajax заговорили после появления в феврале 2005-го года статьи Джесси Джеймса Гарретта "Новый подход к веб-приложениям". Ajax – это не самостоятельная технология. Это идея, которая базируется на двух основных принципах. Использование DHTML для динамичного изменения содержания страницы. Использование XMLHttpRequest для обращения к серверу "на лету". Использование этих двух подходов позволяет создавать намного более удобные WEB-интерфейсы на тех страницах сайтов, где необходимо активное взаимодействие с пользователем. Использование Ajax стало наиболее популярно после того, как компания Google начала активно использовать его при создании своих сайтов, таких как Gmail, Google maps и Google suggest. Создание этих сайтов подтвердило эффективность использования данного подхода.
Возьмем классическую модель WEB- приложения:
Рис. 13. Классическая модель WEB приложения
Клиент, набирая в строке поиска адрес интересующего его ресурса и попадая на сервер, делает к нему запрос. Сервер производит вычисления в соответствии с запросом, обращается к базе данных и так далее, после чего полученные данные идут клиенту и, в случае необходимости, подставляются в шаблоны и обрабатываются браузером. Результатом является страница, которую мы видим, и которую 80% населения страны, находящейся в WEB, называют Интернетом. Это классическая модель, которая успела себя зарекомендовать и заслужить себе почетное место под солнцем. Это самая простая модель взаимодействия и, как следствие, самая распространенная. Однако ее все чаще становиться недостаточно.
Теперь посмотрим на модель взаимодействия AJAX:
Рис. 14. Модель взаимодействия AJAX
Последовательность действий клиента сохраняется, и он, скорее всего, не поймет того, что будет происходить. Но на стороне сервера все выглядит иначе. При обращении к серверу, генерируется страница, которая будет отображаться пользователю и предлагать ему совершить интересующую его последовательность действий. При сознательном (хотя и не обязательно) выборе клиента, его запрос будет обращаться к AJAX-модулю, который и будет производить все интересующие его вычисления и работу с сервером, как таковым. Но в чем же новшество? Основное отличие в том, что этот метод дает нам возможность динамически обращаться к серверу и выполнять интересующие нас действия. Например, нам нужно выполнить обращение к базе данных и получить интересующие нас данные, которые затем будем использовать. Данные мы будем хранить в XML-файле, который будет формироваться динамически. Так мы можем получить и обработать данные, полученные из БД, или что-нибудь другое, необходимое нам. К тому же сервер будет обрабатывать только те данные, которые нам необходимо обновить, а не всю страницу в случае ее перезагрузки.
Отрицательные черты Ajax и средства их устранения
Во-первых – передавать данные можно только методом GET, соответственно, затрудняется работа с большими объемами данных. Данная проблема имеет решения путем использования Сookies, что вполне приемлемо в случаях передачи данных, больших, чем может вместить в себя GET запрос, а Javascript, в свою очередь, имеет функции для работы с ними.
Вторая проблема – кросс-браузерность. Объект XMLHttpRequest еще не является частью какого-либо стандарта (хотя нечто подобное уже было предложено в спецификации W3C DOM Level 3 Load and Save).
И, наконец, защищенность. Основная проблема заключается в том, что все данные и исходный код JavaScript функций можно увидеть путем просмотра исходного кода страницы, и, соответственно, проследить логику выполнения запросов. Это создает рад проблем при передаче специальной информации, например, паролей для авторизации. Возможным решением являются Cookies, с их помощью можно пересылать и обрабатывать необходимые данные.
AJAX, с одной стороны, – огромный скачок в WEB инженерии, но, с другой стороны, это давно назревавший этап эволюции, который открыл новые горизонты в сфере разработки программного обеспечения. В тоже время эта технология еще довольно "сыра", но она постоянно развивается и улучшается, вместе с развитием Internet.
Класс RIA
Тенденция к усовершенствованию WEB интерфейсов постоянно заставляет крупные компании, работающие в этой сфере, разрабатывать и выпускать новые среды и модули. Одна из таких компаний – Adobe. Недавно она презентовала целый набор утилит и программ для разработки интерфейсов нового поколения. Называется этот набор Flex. Описывать систему самостоятельно не целесообразно, поэтому рассмотрим основные, наиболее важные характеристики, преимущества и отличия Flex, заявленные самим производителем.
Adobe Flex — технология для легкого и очень быстрого создания RIA, Rich Internet Applications. Flex — это родственная Flash технология, основанная на описании интерфейса приложения с помощью диалекта XML — MXML. Flex-приложение может компилироваться на сервере, а может — из IDE, как во Flash, результатом является swf файл, исполняемый Flash Player.
Отличие Flex от Flash. Достоинства Flex тесно связаны с его спецификой, MXML. Flash не позволяет создать настолько эффектный интерфейс, как это позволяет сделать Flex. Во Flash невозможна работа с динамическими данными, его возможности ограничены лишь загрузкой внешних роликов. Flex же в полной мере позволяет работать с быстро изменяющимися данными и обрабатывать их, в чем и заключается его основное преимущество. Хотя на сегодняшний день для многих задач привычного Flash вполне достаточно, в ближайшем будущем без систем, аналогичных Flex, обойтись будет невозможно. Например, в случае со строгими интерфейсами бизнес-приложений скорость разработки просто потрясающая. Также Flex славен своими графиками, компоненты для построения которых сделаны не только удобными для использования, но и в большинстве случаев выглядят очень приемлемо для использования. Пример — графики Google Analytics.
Все преимущество Flex-GUI в его фрэймворке (библиотека компонент), которая очень удачно спроектирована, вобрав в себя весь опыт предыдущих компонент. Другая составляющая - это компилятор mxmlc, который превращает mxml-код в обычный AS3-код, который, в свою очередь, компилируется в swf. Таким образом, Flex-GUI представляет собой связку удачно спроектированного фрэймворка, заточенного под mxml, и компилятора mxmlc.
Достоинства: Flex 2, помимо скорости разработки, предоставляет полные мультимедийные возможности Flash Platform : включая потоковое видео, звук (в том числе и программный), бинарные сокеты и большое число прочих новых возможностей ActionScript 3. Возможностей, которые, казалось бы, в 1,2 мегабайта запихать просто невозможно...
Недостатки: Отдельные части Flex технологии являются платными.
Сравнение и интеграция AJAX и Flex
Компания Adobe упростила разработку веб-приложений на основе AJAX и Flex. Она выпустила две библиотеки с открытым исходным кодом, которые должны упростить процесс разработки веб-приложений, одновременно использующих технологии Flex, Flash и AJAX.
Сравнивая две эти среды, можно выделить преимущества той или иной среды разработки. AJAX позволяет создавать веб-сайты, которые субъективно работают быстрее обычных. Ресурсы, построенные с применением технологии AJAX, позволяют выполнять многие действия без перезагрузки страницы. Это позволяет работать с веб-приложениями почти так же, как с традиционными программами. Однако внешний вид приложений, по-прежнему реализуется стандартными средствами HTML и CSS, украшенных изображениями в различных форматах и swf-роликами.
В свою очередь, Flex и Flash обладают рядом возможностей, которые отсутствуют у AJAX. В частности, поддерживаются работа с векторной графикой, кросс-доменный доступ к данным и прочее. Библиотеки Adobe должны установить своеобразный мост между Flex, Flash и AJAX. Но среда разработки Flex приложений является платной, что негативно отличает ее от технологии AJAX и других средств для создания web-приложений.
|
