Ajax: Новий підхід до веб-додатків

Якщо і можна назвати "гламурним" щось у сучасному проектуванні інтерфейсів, то це створення веб-додатків. Врешті-решт, коли в останній раз ви чули щоб хтось захоплювався інтерфейсом продукту не розміщені в Інтернеті? (Гаразд, крім iPod.) Усі найсвіжіші і новаторські роботи знаходяться в мережі.

Незважаючи на це, розробники веб-інтерфейсів не можуть нічого вдіяти з заздрістю до своїх колег, які створюють desktop-додатки. Звичайні програми мають всю ту силу й швидкість відгуку, які, здаються недоступними для веб-додатків. Та ж простота, яка сприяла швидкому поширенню всесвітньої мережі тепер створює розрив між тим користувальницьким взаємодією, яка можемо надати ми, і взаємодією користувачів з настільними додатками.

Цей розрив скорочується. Погляньте на Google Suggest. Подивіться, передбачувані пропозиції майже безперервно оновлюються в міру того як ви вводите текст. Тепер зайдіть на Google Maps. Збільште масштаб. Візьміть курсором карту й посувайте її туди-сюди. Знову ж таки, все відбувається майже миттєво, без будь-якого очікування перезавантаження сторінки. Google Suggest і Google Maps – ось два приклади нового підходу до проектування веб-додатків, який ми в компанії Adaptive Path називаємо Ajax. Це поняття утворено як скорочення від "Асинхронний JavaScript + XML> і являє собою фундаментальний прорив наших уявлень про можливості веба.

Що таке Ajax

Ajax – не технологія. Насправді це декілька технологій процвітаючих кожна у своїй області, зібраних в новий сильний напрям. Ajax об'єднує:

Класична модель веб-додатки діє таким чином: більшість дій користувача відправляють назад на сервер HTTP-запит. Сервер виробляє необхідну обробку – отримує дані, обробляє числа, взаємодіє з різними успадкованими системами і потім видає HTML сторінку клієнта. Ця модель запозичена з першого застосування вебу як гіпертекстової середовища, але ті хто читали книгу знають, то що робить веб підходящим для гіпертексту не обов'язково роблять його гарним для програмних додатків.


Малюнок 1: Порівняння традиційної моделі веб-додатків (ліворуч) з моделлю Ajax (праворуч).

У цьому підході багато технічного сенсу, але їм не досягається хорошу взаємодію з користувачем. Поки сервер робить свою роботу, чим займається користувач? Правильно, чекає. І з кожним наступним кроком користувач чекає ще і ще.

Очевидно, якщо б ми створювали веб з нуля, то не стали б змушувати користувачів весь час чекати. Якщо вже сторінка завантажена, чому взаємодія з користувачем повинно зупинятися кожен раз, коли програмі потрібно щось від сервера? Справді, навіщо користувачеві взагалі бачити що додаток з'єднується з сервером?

У чому відмінність Ajax

Додаток Ajax виключає взаємодія типу старт-стоп-старт-стоп шляхом введення механізму Ajax як проміжного шару між користувачем і сервером. Може здатися що додаючи новий рівень у додаток можна тільки уповільнити його реакцію, але в дійсності навпаки.

Замість того щоб завантажувати сторінку на початку користувача сесії браузер завантажує движок Ajax, написаний на JavaScript і зазвичай захований в прихований кадр. Цей движок відповідає за формування користувальницького інтерфейсу і взаємодія з сервером від імені користувача. Движок Ajax дозволяє виробляти взаємодія з користувачем асинхронно, тобто незалежно від взаємодії з сервером. Таким чином користувачеві більше не потрібно спостерігати пусте вікно браузера і курсор у вигляді пісочного годинника в очікуванні дій сервера.


Рисунок 2: Порівняння діаграм взаємодії традиційного веб-додатки (зверху) і асинхронного програми Ajax (знизу).

Кожна дія користувача, яке зазвичай справляє HTTP-запит, тепер замість цього приймає форму JavaScript-виклику движка Ajax. Кожна відповідь на дію користувача, що не вимагає звернення до сервера, як то проста перевірка даних, редагування даних у пам'яті, і навіть деяка навігація, виконується движком самостійно. Якщо ж для відповіді потрібна інформація з сервера, наприклад завантаження додаткового інтерфейсного коду, передача даних для обробки, або отримання нових даних, то движок проводить необхідні запити асинхронно, зазвичай за допомогою XML, не перериваючи взаємодії користувача з додатком.

Хто використовує Ajax

Величезні інвестиції в розробку підходу 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.

Працюючи з Ajax останні кілька місяців, ми в Adaptive Path зрозуміли, що відкрили тільки верхівку айсберга того багатства взаємодії та прискорення роботи, які надають програми Ajax. Зараз це важливий напрям розвитку веб-додатків, і його важливість буде тільки рости. І з огляду на велику кількість розробників, які вже вміють використовувати ці технології, ми очікуємо побачити як все більше організацій візьмуть приклад з Google і використовують конкурентні вигоди, які пропонує Ajax.

Що далі

Основне завдання створення додатків Ajax не технічна. Адже основні технології Ajax витримані часом, стабільні й добре вивчені. Навпаки, завдання для розробників цих програм полягає в тому, щоб забути про своїх уявленнях про обмеження веб-додатків і почати думати ширше, великим спектром можливостей.

Буде цікаво.


Питання та відповіді.

13 березня 2005: Після публікації есе Джессі ми отримали величезну кількість листів від читачів з питаннями про Ajax. Тут Джессі відповідає на деякі найбільш загальні питання.

Питання. Винайшла чи Ajax компанія Adaptive Path чи це зробила Google? Чи брала участь компанія Adaptive Path у створенні Ajax-додатків Google?

Відповідь. Ні Adaptive Path ні Google не винаходили Ajax. Останні роботи Google просто кращі приклади додатків Ajax. Adaptive Path не була залучена в розробку Ajax-додатків Google, але ми робили це для інших своїх клієнтів.

Питання. Чи продає Adaptive Path компоненти Ajax або є власником зареєстрованого товарного знаку? Де їх можна скачати?

Відповідь. Ajax це не те, що можна завантажити. Це підхід, тобто спосіб уявлень про архітектуру веб-додатки використовує певні технології. Ні підхід, ні сама назва Ajax не є власністю Adaptive Path.

Питання. Чи є Ajax ще однією назвою для XMLHttpRequest?

Відповідь. Ні. XMLHttpRequest тільки частина рівняння Ajax. XMLHttpRequest – це технічний компонент, який робить можливими асинхронні взаємодії із сервером; Ajax ми називаємо загальний підхід описаний у статті, який грунтується не тільки на XMLHttpRequest, але також на CSS, DOM, і інших технологіях.

Питання. Для чого потрібно було давати всьому цьому назва?

Відповідь. Потрібно було щось більш короткий ніж <Асинхронний JavaScript + CSS + DOM + XMLHttpRequest> для обговорення цього підходу з клієнтами.

Питання. Способи асинхронного взаємодії з сервером існують вже багато років. У чому ж новизна підходу Ajax?

Відповідь. Новизна у видатному використанні цих способів для зміни фундаментальної моделі взаємодії в реальних веб-додатках. Ajax закріплюється тільки зараз тому, що потрібен час для розвитку цих технологій і уявлень про те як найкращим чином їх застосовувати.

Питання. Ajax це технологічна платформа або всього лише стиль проектування?

Відповідь. І те й інше. Ajax це набір технологій використовуваних разом певним чином.

Питання. Для додатків якого типу більше всього підходить Ajax?

Відповідь. Поки ми цього не знаємо. Через відносну новизни даного підходу наші уявлення про те де він найкраще застосовується все ще на початковій стадії розвитку. Іноді й традиційна модель веб-додатки підходить як найкраще рішення задачі.

Питання. Чи означає це що Adaptive Path це анти-Flash?

Відповідь. Зовсім ні. Macromedia є клієнтом Adaptive Path, і ми довгий час підтримували Flash-технологію. Як фахівці у Ajax ми очікуємо що іноді для якихось конкретних завдань саме Ajax стане найбільш проходять рішенням, а іноді кращим рішенням буде Flash. Також ми зацікавлені у вивченні способів комбінування цих технологій (як у випадку з Flickr, який використовує і те й інше).

Питання. Чи є у Ajax значні обмеження доступності чи сумісності з браузерами? Відключають чи додатка Ajax кнопку <Назад>? Чи сумісний Ajax з REST? Чи існують думки про безпеку розробки в Ajax? Чи можуть бути розроблені Ajax-додатки для роботи при вимкненому JavaScript?

Відповідь. На всі ці питання можна відповісти тільки <може бути>. Багато розробники вже працюють у цьому відношенні. Ми вважаємо що потрібно ще попрацювати щоб виявити всі обмеження Ajax, і припускаємо що на своєму шляху співтовариство розробників зустріне ще багато подібних питань.

Питання. Деякі з наведених вами прикладів Google не використовують XML взагалі. Чи повинен я використовувати XML і / або XSLT у додатку Ajax?

Відповідь. Ні. XML це один з найбільш розвинених способів введення і виведення даних з клієнтської частини Ajax, але ніщо не заважає вам досягти того ж ефекту за допомогою таких технологій структурування даних для обміну як JavaScript Object Notation або тому подібних.

Питання. Простіше чи розробити додаток Ajax в порівнянні з традиційним веб-додатком?

Відповідь. Не обов'язково. Ajax додаток неминуче призводить до запуску складного коду JavaScript на стороні клієнта. Не так то легко зробити цей складний код ефективним і вільним від помилок, і для успіху в цьому потрібні кращі структури та інструменти розробки.

Питання. Чи завжди додаток Ajax представляє краще взаємодія з користувачем, ніж традиційно веб-додаток?

Відповідь. Не обов'язково. Ajax більш гнучкий для проектувальників інтерфейсу. Однак, чим більшу потужність ми маємо, тим більш уважно потрібно з нею поводитися. Треба бути обережними у використанні Ajax, щоб поліпшити зручність використання додатків, а не погіршити його.

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*