Javascript.RU

Ajax и Rich Client

Update: Более новый материал по этой теме находится по адресу https://learn.javascript.ru/ajax-intro.

Как правило, AJAX используется не сам по себе, а вместе с разными javascript-красивостями, которые помогают делать интерфейс не только быстрым, но и удобным.

Плюсы очевидны:

  • AJAX - это уже javascript, почему бы не добавить еще javascript?
  • AJAX не перегружает страницу, значит
    • Не нужно перегружать жирные интерфейсы
    • Не надо запоминать состояние интерфейса для открытия в том же виде после перезагрузки страницы

Посмотрим на некоторые примеры Rich Client.

Rich - переводится как "богатый". Богатый, в первую очередь, инструментами, средствами ввода-вывода.

  • Меню
  • Drag'n'drop
  • Работа с выделением
  • ...

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

На организацию Rich Client в интернет дополнительно накладываются серьезные ограничения.

Очевидно, они требуют внутренней обработки ошибок коммуникации и лагов. Есть и еще одно, более важное, следствие для интерфейса.

Хороший интерфейс должен отвечать на интуитивно понятном уровне. Как правило, это реализуется через моделирование событий реального мира, когда пользователь "нажимает", "открывает" или "перелистывает" что-либо. При этом реакция на действие видна тотчас же.

В десктоп-приложениях этот принцип соблюдается.

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

JavaScript - далеко не самая производительная платформа. Ее реализации различаются от браузера к браузеру, имеют свои особенности и ошибки.

Кросс-браузерные несовместимости, как правило, решаются созданием специализированных библиотек. Однако, такие библиотеки занимают место и снижают производительность, поэтому их часто не используют для простых приложений.

Хотя библиотеки и кушают ресурсы, но предоставляют много готовых графических компонент Rich Client, которые обычно называют "вИджетами" (ударение на первый слог).

Также библиотеки предоставляют "красивости" - анимационные эффекты. Вот, например, несколько примеров с использованием библиотеки ExtJS


Двигаем мышой голубую рамку.

Модальное окно Yes/No/Cancel.

Бесконечное дерево

Вы, наверняка уже встречали и другие виджеты, вроде текстового редактора наподобие MS Word, выпадающих менюшек и т.п.

Rich Client + AJAX = быстрый и удобный интерфейс!


Автор: Гость (не зарегистрирован), дата: 29 июля, 2008 - 10:26
#permalink

> а вместе с разными avascript-красивостями

исправьте, пожалуйста.


Автор: Илья Кантор, дата: 29 июля, 2008 - 16:16
#permalink

Спасибо, исправлено


Автор: Гость (не зарегистрирован), дата: 8 августа, 2008 - 11:45
#permalink

Масштабирование изображения с сохранением пропорций
Дерево(Rich Client) + динамическая подгрузка(AJAX)

Запустить не удалось. Броузер Опера 9.51


Автор: Илья Кантор, дата: 8 августа, 2008 - 23:42
#permalink

Да, этот виджет не работает в Opera. Попробуйте Firefox.

Пример носит иллюстративный характер.


Автор: Гость (не зарегистрирован), дата: 24 августа, 2008 - 10:15
#permalink

> Не надо запоминать состояние интерфейса для для открытия в том же виде после перезагрузки страницы

надо. на случай перезагрузки браузера.


Автор: Гость (не зарегистрирован), дата: 29 августа, 2008 - 15:45
#permalink

опера 9.52 нет масштабирования и дерева


Автор: Илья Кантор, дата: 29 августа, 2008 - 16:21
#permalink

Эти примеры носят иллюстративный характер. Используйте FF/IE для просмотра..


Автор: MikhailGirshberg (не зарегистрирован), дата: 22 июля, 2010 - 09:54
#permalink

Продолжение кроссбраузерной феноменологии:

IE6
считает, что на странице ошибки.
Виджеты не работают. По refresh-у вообще не всё грузится.
FF, GC
работают.
Opera (9.6.4)
не работают масштабирование и дерево.

Контраст с пафосом "Используйте библиотеки, чтобы не было кроссбраузерных проблем" портит впечатление от правильной статьи.


Автор: twolf, дата: 12 октября, 2008 - 11:29
#permalink

хорошо бы добавить ссылку на большее количество примеров. Ext действительно очень функциональная вещь.
http://extjs.com/deploy/dev/examples/samples.html


Автор: Aleks, дата: 12 октября, 2008 - 12:10
#permalink

Главное не переборщить с эффектами, чтобы к концу разработки приложения не получилось так, что оно мало того что педалит, так ещё и эффекты глючат.


Автор: Гость (не зарегистрирован), дата: 21 октября, 2008 - 08:59
#permalink

А у меня Опера 9.27 и все работает. Проверьте Ява включена ли.


Автор: alexKniaz, дата: 28 октября, 2008 - 20:26
#permalink

Ява или JAvasCRIPT?


Автор: rudolf14, дата: 9 января, 2009 - 19:34
#permalink

а где можно изучить AJAX!
дайте адрес книги пжл!


Автор: Falcon, дата: 26 октября, 2009 - 03:06
#permalink

я читал в книге В.Дронова "JavaScript и Ajax в Web-дизайне."
книгу в целом рекомендовть не могу(много в ней лишнего) но AJAX рассмотрен неплохо, хоть и кратко. и не начинайте читать про применения AJAX с помощью jsбиблеотек.. сначало очень полезно ознокомится с AJAX на чистом js.
успехов.


Автор: Гость (не зарегистрирован), дата: 16 июля, 2012 - 00:09
#permalink

Я считаю лучше начинать с JQuery AJAX, потому что чистый AJAX довольно мутный и портит первое впечатление. А с JQuery им пользоваться легко. Соответственно сначало надо немного освоить JQuery.


Автор: Гость (не зарегистрирован), дата: 18 января, 2009 - 00:43
#permalink

*Не надо запоминать состояние интерфейса для для открытия*
может одного *для * хватит? )


Автор: dyadya, дата: 24 апреля, 2009 - 17:50
#permalink

Ув. Илья! Я бы рекомендовал Вам поставить блок

Опечатка?
Нашли опечатку в материалах сайта? Выделите и нажмите Ctrl-Enter!

прямо перед "Отправить комментарий" дабы внимательный народ не демонстрировал свою грамотность и наблюдательность в комментариях.

Спасибо за прекрасный сайт!


Автор: Илья Кантор, дата: 25 апреля, 2009 - 22:34
#permalink

Хороший совет, так и сделаю.


Автор: loz, дата: 19 декабря, 2010 - 12:11
#permalink

Хотел бы знать мнение автора по поводу javascript-библиотек, я использую, в основном dojo, иногда jquery, ну вот очень много в последнее время наталкиваюсь на extjs, все его хвалят и т.д. Как Вы считаете какой лучше фреймворк подходить для создания сайтов, которые будут побольше чем просто визитка???


Автор: blessmaster, дата: 31 декабря, 2010 - 00:08
#permalink

Любопытно, на сколько сантиметров сайты больше чем визитка? ))


Автор: Гость (не зарегистрирован), дата: 28 марта, 2011 - 22:27
#permalink

Блин, а можно под каждым примером хотя бы чуточку исходного кода с объяснениями, а то простите вы ради чего это выложили? чтобы слюнки все пускали?
Если да, то вы очень вредный человек господин Илья Кантор


Автор: Гость (не зарегистрирован), дата: 24 июня, 2011 - 06:06
#permalink

Статья хорошая токо где коды примеров


Автор: kovewnikov (не зарегистрирован), дата: 4 февраля, 2012 - 14:49
#permalink

Подскажите, где можно почитать про архитектуру rich-client интерфейсов, как проектировать связи сущностей таких элементов управления и т.п.


Автор: Skvor, дата: 18 декабря, 2013 - 13:17
#permalink

>Однако, такие библиотеки занимают место и снижают производительность, поэтому их часто не используют для простых приложений.

-а в сложных, браузеры ваще начинают тормозить так, что посетитель плюётся в монитор и закрывает страницу


Автор: Zenitchik, дата: 21 января, 2014 - 20:49
#permalink

Это Вы зря. Большое приложение - это большая работа. И оптимизация для скорости работы - это отдельный этап, на который выделяются десятки часов.


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
3 + 4 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Реклама
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние комментарии
Последние темы на форуме
Forum