Розгляд технологій Ajax: Частина 1

За допомогою Ajax у вас з’являється можливість використання нових технологій обробки і представлення контенту. Під впливом списку Ajax-помилок, складеного Алексом Босворфом, Кріс Лафра створив набір зауважень, на які слід звернути увагу кожному розробнику.


Сьогодні, однією з найактуальніших тем, що піднімаються при обговоренні вкладення грошей в IT і в блогах розробників, є Ajax технологія. Основні складові Ajax використовуються вже не один рік, таким чином Ajax не є чимось новим. Однак, сама назва Ajax, що є абревіатурою від Asynchronous JavaScript and XML, було запропоновано тільки в 2005 році Десс Джеймсом Гарретом з компанії Adaptive Path. Основою для Ajax є динамічний HTML (DHTML), а головне завдання – це зменшення кількості звернень до сервера. При оновленні інформації, Ajax додаток не перевантажує сторінку повністю. Замість цього, код JavaScript відправляє XML запит на сервер, а потім замінює необхідну частину у DOM для оновлення сторінки.










Список термінів:

Кожна нова технологія вводить в обіг нові терміни і Ajax не є винятком. Нижче наводиться кілька абревіатур, що відносяться до технології
Ajax:



  • Ajax: асинхронний JavaScript і XML (Asynchronous JavaScript with XML)
  • XML: розширювана мова розмітки (Extensible Markup Language)
  • RIA: Інтернет додаток з розширеними можливостями (Rich internet
    application)
  • RSS: Простий збір інформації (Really Simple Syndication)
  • PS: Зсув парадигми (Paradigm shift)
  • TP: Точка прикріплення (Tipping point)
  • VC: Вкладення з ризиком (Venture capital)

До розвитку Ajax, DHTML використовувався в основному для реалізації меню, змістів, обмежених видів анімації. При цьому досить складно створити крос-браузерні додаток. Дана ситуація послужила поштовхом до створення таких компаній, як Bindows ™, що пропонують різні абстракції для розробки розширених клієнтів, онлайн версія Eclipse ™ є одним з таких прикладів (Див. Ресурси ).


Можливо, найбільш відомим Ajax додатком є ​​Google ™ Maps. Воно заклало основу для цілої нової комп’ютерної дисципліни. (Запит в Google по ключовими словами “Hacking Google Maps” повертає більше двох мільйонів посилань). Добрими прикладами налаштування Google Map є прозорі карти Bus Monster, і HousingMaps.com. На мій погляд, найбільш захоплюючими є можливості персоналізації Google, за допомогою яких вам надається можливість розміщення нового і існуючого контенту на власній сторінці.


Якщо ви хочете самостійно створити Ajax додаток, вам необхідно прийняти до уваги рекомендації, що даються в цій статті. Ви ознайомитесь як з перевагами, так і з недоліками, властивими даній технології. Зауважте, що дана стаття не розрахована на новачків і в ній не обговорюються такі речі, як, наприклад, використання XmlHTTPRequest. Вона призначена для тих, хто знайомий з технічними деталями і хоче мати більш широке уявлення про застосуванні Ajax при реалізації Web-розробок. В ресурсах
ви можете знайти посилання на вступний матеріал по Ajax.


Якби у мене був молоток …


“У часи нашої молодості нам говорили, що якщо все щось роблять, то це ще не є причиною наслідувати їм. У наші дні дане правило є стандартним при виборі програмних продуктів. “- Баррі Гем

При прийнятті рішень часто вступає в дію ефект наслідування,
який є добре відомим психічним феноменом (див. Ресурси для отримання додаткової інформації). Основна ідея полягає в тому, що людям властиво робити вчинки або думати в певному напрямку, тільки через те, що так робить чи думає більшість. Теж саме стосується і Ajax, якщо ви вирішили, що вам необхідно
використовувати дану технологію, то не придумуйте штучні приводи для її використання. Для деяких людей Ajax представляється у вигляді молотка з допомогою якого необхідно забити абсолютно всі цвяхи. Пам’ятайте, що Ajax всього лише інструмент, а не іграшка чи самоціль.


З появою будь-якої нової технології, люди починають експериментувати з нею і намагаються знайти способи її застосування. Наприклад, з появою кольорових моніторів (Багато з Web-розробників досить молоді, щоб пам’ятати ці часи) велика кількість додатків змінило свої шрифти і кольори, тільки через те, що випала така можливість. Користувачам не потрібен хвіст за покажчиком миші, але багато Web-дизайнери додають його на своїх сайтах. Якщо ви будете не досить обережні, то такі ж метаморфози можуть трапитися з технологією
Ajax


Ajax також справив значний вплив на капіталовкладення в IT. В останні час інвестиційний клімат для нових проектів значно покращився і одну з ключових ролей у цьому процесі зіграв Ajax. Так, наприклад, нова компанія Zimbra ™, яка активно використовує Ajax технології, вже отримала інвестиції в розмірі 16 мільйонів доларів. Інші нові компанії, також заявляють, що вони працюють з Ajax, з метою підвищення своєї інвестиційної привабливості.


У разі, якщо Ви вирішили використовувати Ajax, Вам необхідно прийняти збалансоване рішення про те, де саме слід застосовувати дані технології. Сподіваюся, що дана серія статей надасть вам необхідні відомості, які допоможуть вам у прийнятті рішення.















В початок

Фреймворки.


Реалізації браузерів розрізняються в кількох ключових моментах:



Довгий час дані відмінності приводили до необхідності створення нетривіальних скриптів JavaScript. Досить складно написати скрипти перевірки браузера для кожної дії. Приклад Google показує, що можна створити фреймворк, який є крос-платформних і підтримується більшістю браузерів (хоча і не всіма, Ajax додатка Google на даний момент не підтримують Opera).


На хвилі успіху Google виникло безліч різних фреймворків. Одним з найпомітніших з них є Atlas від Microsoft ®. Він чудовий, тим що він позиціонується нейтральним до браузерів. Він модернізує JavaScript, визначаючи багату бібліотеку класів додаючи спадкування і інтерфейси та описуючи простору імен. Добрими прикладами використання Atlas є Virtual Earth, Outlook Web access, і Start.com (див. Ресурси для посилань на дані приклади). Вищесказане демонструється на Малюнку 1, Який показує реальні зміни; Atlas є одним з перших додатків Microsoft, яке краще відображається в Firefox ®, ніж в Internet Explorer ®.


Малюнок 1. Відмінності відображення Atlas в браузерах (зверніть увагу, що тіні зображень виглядають краще в Firefox ніж в Internet Explorer)
Відмінності відображення Atlas в браузерах (зверніть увагу, що тіні зображень виглядають краще в Firefox ніж в Internet Explorer)

Не намагайтеся створити свій власний фреймворк, так як це довгий і складний процес.


Для отримання списку доступних Ajax-фреймворків см. Ресурси.















В початок

Амнезія


Web-серфінг головним чином грунтується на ходінні по посиланнях, побудові історії відвіданих сторінок і дозволі користувачам повертатися на попередні сторінки. Найбільш затребуваною кнопкою в браузері є кнопка
“Назад” (Див. Малюнок 2) І для цього є вагомі підстави.


Малюнок 2. Найбільш затребуваною кнопкою в браузері є кнопка “Назад”.
Найбільш затребуваною кнопкою в браузері є кнопка

Але з поширенням Ajax технологій, розробники все чаші прагнуть до розробці, так званих односторінкових HTML додатків, які не ведуть історію. Більшість Ajax додатків після завантаження не змінюють свій URL. Якщо такий сайт не підтримує кнопки “Назад”, “Стоп”, і
“Оновити”, А також закладки, то користувачам може бути важко повернутися до визначеного положення або поділитися посиланням з іншими людьми.


Користувачам, які шукають послідовність з декількох адрес, сервіс Google Maps до останнього часу не надавав можливості запам’ятовування історії, таким чином кнопка “Назад” була марна. В останньому релізі даний недолік був усунений і тепер кнопки “Назад” і “Вперед” працюють, як і очікується. Хоча історія навігації тепер і підтримується, але при цьому не змінюється адресний рядок. Замість цього пропонується використання макросу, що змінює базовий URL, який дозволяє створити посилання на дану сторінку. Різні системи Wiki стикаються з подібними проблемами і зазвичай містять кнопку для створення “постійної” посилання.


На закінчення до цього розділу необхідно відмітити, що при створенні Ajax додатків необхідно приділяти особливу увагу підтримці історії браузера. Основне правило говорить: якщо користувач переходить за посиланням, то необхідно створювати об’єкт в історії браузера, щоб кнопка “Назад” працювала передбаченим чином. Так само як додавання, необхідно дозволити створення закладок за допомогою постійних посилань.















В початок

Взаємодія


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



Якщо пауз не вдається уникнути, використовуйте значок “Завантаження” , Як, наприклад, в Gmail ™, див Малюнок 3.


Малюнок 3. Значок “Завантаження” в Gmail
Значок

Нижче наводиться простий рецепт: запустіть таймер, який виводить повідомлення кожні 100 мілісекунд. У разі відображення результату, внесіть зміни в DOM і запам’ятайте результат. Якщо повідомлення з’являється, після того як всі дії виконані, ігноруйте його. В іншому випадку, результат буде означати, що дія все ще виконується і вам необхідно вивести відповідні повідомлення. Спрячте всю логіку в сервіс XmlHttpRequest, Включивши при цьому підтримку кількох паралельних запитів.


Намагайтеся надавати взаємодія локально. Приклад взаємодії Gmail не є кращим, тому що курсор миші може перебувати на значній відстані від напису. У таких випадках, рішенням може бути зміна курсору на «Пісочний годинник». Також при розкритті дерева елементів, краще спочатку показувати дочірній елемент, в якому буде відображатися напис “Отримання даних ..”, який потім замінити на інший елемент, що містить безпосередні дані, прийшли з сервера.















В початок

Ложка дьогтю


Минулого місяця я їздив у гості до свого друга. Було темно, і я збився з шляху. Я спробував знайти його адресу в моєму комп’ютері. Він прислав мені свої координати в електронному листі. До нещастя для мене він відправив лист на мій ящик в Gmail і, будучи відключеним від мережі, я не міг його прочитати. В один момент всі зручності, як то непотрібність установки, зручний інтерфейс, закладки, потужний механізм пошуку і платформна незалежність, були анульовані тим, що я не міг підключитися до мережі і знайти необхідну мені інформацію.


Відключення від мережі менше зачіпає такі служби як, наприклад, Google пошук або ж корпоративні портали, так як їм не існує альтернативи. Однак, для додатків, покликаних замінити вже існуючі, може скластися ситуація коли при відключенні від мережі їх функціональність сильно постраждає по порівняно з уже існуючими додатками.


Gmail має підтримку протоколу POP, що дозволяє користувачам мати доступ до пошти за допомогою Microsoft Outlook ® або будь-якого іншого поштового клієнта, підтримуючого протокол POP, навіть якщо вони не підключені до мережі. Головною проблемою в Ajax є відсутність вбудованих засобів що підтримують роботу в офлайні.















В початок

Змушуючи думати


Основною причиною успіху Web є передбачуваність і простота користувальницького інтерфейсу. Практично кожен може рухати курсор миші, натискати на посилання, прокручувати лінійку прокрутки і натискати кнопку
“Назад”. Зі зростанням популярності Ajax, зростає ризик, що розробники ускладнять інтерфейс в непередбаченому напрямку. Ви найменш зацікавлені в тому щоб змусити користувача думати. Для тих кому цікаво дізнатися більше про використовувані Web-додатків можуть звернути увагу на статтю Стіва краги
Не змушуйте мене думати (Див. Ресурси). В ній не описується власне Ajax, зате дається безліч порад про важливість хорошого дизайну для сайту.


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















В початок

Засоби розробки


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



Ви можете знайти посилання на дані продукти у ресурсах).


IDE, яка буде поєднувати всі вище перераховані можливості та буде зручна у використанні для дизайнерів, аналітиків, програмістів і адміністраторів баз даних, приречена на успіх на ринку. Я думаю, що таким середовищем може стати
Eclipse Ajax Tooling Framework.















В початок

Паралельність


Перша буква в абревіатурі Ajax, означає асинхронну зв’язок. Дана зв’язок іменується асинхронної, так як події не наступають негайно після деяких дій. Може пройти досить часу перш ніж буде отриманий відповідь (див. вище обговорення взаємодія), Реально ж деякий запити можуть взагалі ніколи не отримати відповіді. Web є нестабільною середовищем і планування цілісності має бути невід’ємною частиною написання програм на Ajax. Так як одночасно може бути запущено декілька запитів, то наша програма стає паралельної, а паралелізм є достатньо складною річчю.


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


Додатки Ajax знаходяться в стані безперервного потоку. Необхідно правильно керування даними потоком і фрагментація його за допомогою набору глобальних змінних не є кращим підходом. Більш того необхідно надати користувачеві можливість відразу переходити до певного станом, наприклад якщо він закінчить роботу і потім повернеться до неї через тиждень. Також для довгих процесів не погано було б реалізувати функцію автозбереження (див. Малюнок 4).


Малюнок 4. Автозбереження буде користуватися великим успіхом у користувачів
Автозбереження буде користуватися великим успіхом у користувачів

На закінчення, використовуйте явні механізми управління станом, щоб уникнути помилок додатка та інших неприємностей.















В початок

“Відкритий код” (за замовчуванням)


Додатка JavaScript виконуються в браузері і тому можуть бути легко піддані реінженерінгу. Завантажуючи JavaScript файли на вимогу ви можете провести користувачів Internet Explorer, але інші браузери, як, наприклад, Firefox легко відображають поточний DOM з усією структурою, для цього всього лише треба вибрати пункт меню Перегляд вихідного коду виділеного об’єкту. Якщо ж комусь необхідно отримати доступ до вихідного коду вашого додатка, він може використовувати простий скрипт створений в Mozilla ® Greasemonkey, відладчик типу Venkman або ж спеціальний тулбар в Internet Explorer.


Ви повинні розуміти, що JavaScript також небезпечний, як і HTML і це зроблено в ім’я забезпечення переносимості і легкості використання. При публікації додатків в інтернет, ви повинні намагатися уникнути переміщення великих частин бізнес логіки на клієнтські додатки. Для внутрішніх додатків все може бути навпаки, і велика частина логіки може бути реалізована на клієнті, для зниження навантаження на сервер.















В початок

Параноя ніколи не завадить


У сенсі безпеки Ajax не приносить ніяких нововведень. Технології, які лежать в його основі доступні вже довгий час. Серед них є приховані фрейми iframes або технологія віддалених скриптів Microsoft. Якщо існуючі Web-додатки схильні до проблем безпеки, то ті ж проблеми виникають і при використанні ajax рішень.


Розробники повинні враховувати те, що запити GET і POST можуть бути перехоплені і змінені. З доступністю таких технологій як Greasemonkey, користувачі можуть легко змінити запит, що відправляється на сервер, а також уявлення контенту в браузері. У Ajax використовуються ті ж механізми безпеки, що і в інших Web-додатках. Коли ви пересилаєте конфіденційні дані за допомогою XmlHTTPRequest, Використовуйте придатні методи аутентифікації і тунелювання.


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















В початок

Про решту в інший раз …


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


У наступній статті, ми обговоримо інші гострі теми: перемальовування документа, тестування, моделі публікації і підписки, продуктивність, доступність, підтримку старих браузерів та інші питання. Я також розповім про цікаву особливості, пропонованої Ajax – створення Web-сайтів всередині Web-сайтів.


Ресурси

Навчитися


Отримати продукти і технології

Обговорити

Про автора











Кріс Лафра (Chris Laffra) народився в Голландії, де й отримав ступінь магістра в університеті «Веріж», Амстердам в 1988 році, а потім і докторську ступінь в університеті «Еразма» в Роттердамі. В обох компаніях, як в IBM TJ Watson Research Center, так і в Morgan Stanley, Кріс працював з інструментами користувальницького інтерфейсу, інфраструктурою компонентів, програмним аналізом, візуалізацією, стиском і оптимізацією. Він очолював лабораторію OTI в Амстердамі протягом трьох з половиною років в якій він займався розробкою WebSphere Studio Device Developer. В лабораторії IBM в Канаді він розробляв розширення виконуваної середовища Java і Eclipse (він також брав участь у створенні офіційного FAQ по Eclipse). Зараз Кріс очолює команду розробників в IBM Rational, що займається оптимізацією продуктивності систем RAD / RSA. Він багато експериментував з технологією Ajax, розробляв доповнення до Google Maps і також створював онлайн версію Eclipse
FAQ
.


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


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

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

Ваш отзыв

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

*

*