«Аякс»: новый подход к веб-приложениям

Джесси Джеймс Гарретт
18 февраля 2005 г.

Перевод Дени Сюро от 6 мая 2006 года.

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

Несмотря на это, дизайнеры веб-взаимодействия не могут не испытывать чувства зависти к нашим коллегам, создающим десктопное ПО. Настольные приложения отличаются богатством и быстродействием, которые кажутся недостижимыми в Сети. Та же простота, которая позволила сети быстро распространяться, также создает разрыв между возможностями, которые мы можем предоставить, и возможностями, которые пользователи могут получить от настольного приложения.

Разрыв был закрыт. Достаточно взглянуть на Google Suggest. Обратите внимание на то, как предлагаемые термины обновляются по мере ввода текста практически мгновенно. Теперь посмотрите на Google Maps. Увеличьте изображение. Используйте курсор, чтобы захватить карту и немного ее переместить. Опять же, все происходит почти мгновенно, без необходимости ждать перезагрузки страниц.

Google Suggest и Google Maps - два примера нового подхода для веб-приложений, который мы в Adaptive Path назвали Ajax. Это название является сокращением от Asynchronous JavaScript + XML и представляет собой фундаментальный прогресс в том, что становится возможным в Интернете.

Определим «Аякс»

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

• основанное на стандартах представление с использованием XHTML и CSS;
• динамическое отображение и взаимодействие с использованием объектной модели документа;
• обмен данными и манипулирование с использованием XML и XSLT;
• асинхронное извлечение данных с использованием XMLHttpRequest;
и
• JavaScript для их совместной реализации.

Классическая модель веб-приложений работает так: Большинство действий пользователя в интерфейсе запускают HTTP-запрос к веб-серверу. Сервер выполняет некоторую обработку - извлечение данных, хруст номеров, связь с различными устаревшими системами - а затем возвращает клиенту HTML-страницу. Это модель, подходящая для первоначального использования Интернета в качестве гипертекстового носителя, но, как знают поклонники The Elements of User Experience (1), то, что делает Интернет хорошим для гипертекста, не обязательно делает его хорошим для программных приложений.

Рис. 1: Традиционная модель для веб-приложений (слева) по сравнению с моделью Ajax (справа).

Такой подход показывает много технических вещей, но он не делает ничего хорошего для пользователя. Пока сервер делает свое дело, что делает пользователь? Мы видим, что есть ожидание. И на каждом шаге задачи пользователя ждет что-то еще.

Очевидно, что если бы мы проектировали Сеть с нуля для приложений, мы бы не оставили пользователя ждать. Как только интерфейс загружен, почему взаимодействие с пользователем останавливается каждый раз, когда приложение Требуется ли приложению что-либо от сервера? На самом деле, зачем пользователю вообще видеть приложение, использующее сервер?

Почему «Аякс» другой

Приложение Ajax устраняет аспект веб-взаимодействия «старт-стоп-старт-стоп», вводя посредника - движок Ajax - между пользователем и сервером. Может показаться, что добавление слоя в приложение сделает его менее отзывчивым, но все наоборот.

Вместо загрузки веб-страницы в начале сессии браузер загружает движок Ajax - написанный на JavaScript и обычно обернутый в веб-браузер. в скрытой рамке. Движок отвечает как за рендеринг интерфейса, который видит пользователь, так и за связь с сервером от имени пользователя. Движок Ajax позволяет асинхронно, независимо от связи с сервером, происходить взаимодействию пользователя с приложением. Таким образом, пользователь никогда не сталкивается с пустым окном браузера и иконкой песочных часов, ожидая, потому что сервер что-то делает.

Рисунок 2: Диаграмма синхронного взаимодействия в традиционном веб-приложении (сверху) по сравнению со схемой асинхронного Ajax-приложения (снизу).

Каждое действие пользователя, которое обычно генерирует HTTP-запрос, принимает форму JavaScript-вызова механизма Ajax. Любой ответ на Действие пользователя, не требующее подключения к серверу - например, простая проверка данных, редактирование данных в памяти или даже некоторая навигация - обрабатывается самим движком. Если движку нужно что-то от сервера перед ответом - если он подает данные на сервер, Будь то обработка запроса, загрузка дополнительного кода интерфейса или извлечение новых данных, движок делает какой-то запрос асинхронно, обычно с помощью XML, не блокируя взаимодействие пользователя с приложением.

Кто использует «Аякс»?

Google делает значительные инвестиции в развитие подхода Ajax. Все основные продукты, которые Google представила в прошлом году - Orkut, Gmail, последняя бета-версия Google Groups, Google Suggest и Google Maps - являются приложениями Ajax. (Чтобы узнать больше о технических взломах этих реализаций Ajax, попробуйте эти превосходные анализы Gmail, Google Suggest и Google Maps.) Другие последовали его примеру: многие функции, которые мы любим в Flickr, зависят от Ajax, а движок A9.com исследований и Amazon применяют похожие техники.

Эти проекты демонстрируют, что Ajax - это не только техническая вещь, но и практичная в реальных приложениях. Это не еще одна из тех технологий, которая работает только в лаборатории. А приложения Ajax могут быть любого размера, от самой простой, единой функции Google Suggest до самых сложных и навороченных Google Maps.

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

Давайте глубже

Самые большие проблемы при создании