• Аякс ради аякса

    В последнее время наблюдаю абсолютно нездоровое стремление некоторых разработчиков делать сайты полностью на аяксе. Это когда нет переходов на разделы сайтов, они просто подгружаются на текущую страницу. Типичный пример использования технологии только ради того, чтобы сказать: она тут используется. Я не нашел ни одной проблемы, которую мог бы решить такой подход.

    Может, это я старею? Может, действительно за этим будущее и пора бы уже менять принципы создания сайтов? Вооружившись последним файрфоксом и файербагом решил проверить «под микроскопом» приведенные примеры. Действительно ли это наше будущее, или всего лишь очередной оральный вау-импульс для начинающих гиков?

    Основная проблема таких сайтов — сохранение истории навигации по сайту. Посмотрим, как это работает с точки зрения пользователя.

    1. Сайты, где используется раздражающая уже на пятом разе анимация, удалось завалить довольно быстро: достаточно быстро перейти по истории на 2—3 шага вперед/назад. В половине случаев я видел только крутящийся прелоудер, во второй половине случаев слетала история навигации. То есть я переходил куда угодно, но не туда, куда ожидал.
    2. Когда я хожу по истории обычных, олдскульных сайтов, браузер запоминает, где я закончил просматривать страницу. Угадайте с трех раз, какую часть страницы я видел на анимированных сайтах?
    3. Следующий пример поведения. Когда я захожу на сайты я обычно открываю интересующие меня страницы в новых табах с помощью Command-click. Естественно, некоторые разработчики плевать хотели на разные модели поведения пользователя, поэтому на одном сайте страницы загружались в том же окне при любом клике на ссылку.
    4. Даже не удивился, что кое-где перемещение по истории сопровождалось новым обращением на сервер. Такая вот экономия на траффике.

    Это те проблемы, которые я увидел как обычный пользователь. Теперь посмотрим, что я получу от такого подхода как разработчик. Иду на форум. Как и ожидалось, разработчики поимели целый букет проблем, которых раньше просто не было: начиная от неправильной инициализации скриптов при загрузке, заканчивая отслеживанием страниц с помощью Google Analytics.

    ***

    Всегда удивлялся тому, как разработчики любят усложнять себе жизнь. Проблемы не существует, но ее обязательно придумывают, не спят ночами чтобы решить ее, а потом радуются как дети работающему через жопу решению. К сожалению, программисты разучились думать как обычные люди — те самые, которые ежедневно ходят на сайты и ради которых эти сайты делаются. У таких разработчиков одна цель — показать, что они умеют пользоваться готовыми библиотеками.

    Но что больше всего меня позабавило: Яндекс-карты почему-то не подключаются на страницу, на них просто стоит ссылка. Вот такой вот аякс.

  • 22 комментария

    1. scorpix
      8 марта 2009

      Ко всему надо подходить с умом. Надо учитывать, что Ajax — это лекарство, от которого можно поиметь передоз.
      Когда вышел форумный движок IPB на Ajax, я ради интереса его потестил. Трафик в несколько раз стал больше. А сколько сервер огреб дополнительных ненужных запросов?
      Использование библиотек Dojo, Mootools, ExtJS или Fullajax чревато и для браузера разрастанием памяти и усилением тормозов. Имхо, веб еще не готов для простой разработки полноценных приложений, используемых нами в оффе.
      То, что делает Google — кропотливая работа по проектированию, оптимизации, которая новичкам и не снилась. Это не тупой копипаст.

      P.S. Хочу в текстарию сообщения тот же font-family, что и в инпутах 🙂

    2. Сергей Чикуенок
      8 марта 2009

      Имхо, веб еще не готов для простой разработки полноценных приложений, используемых нами в оффе.

      Сделать, в принципе, можно, сам знаешь 🙂 Но это, как ты написал:

      кропотливая работа по проектированию, оптимизации, которая новичкам и не снилась. Это не тупой копипаст.

    3. 8 марта 2009

      По большому счету, ты прав, но бывают задачи, которые решаются лучше таким способом, чем стандартным. Пример — веб-приложение под iPhone. Я решал эту задачу стандартно и «фул-ажаксово«, последний мне понравился больше, работает быстрее и без перезагрузок (в сафари и фф работает на ура, но лучше смотреть на iPhone :). Сергей, мне интересно твое мнение по моей реализации.

      ЗЫ Обычно я программирую на Perl и иногда на JavaScript 🙂

    4. Сергей Чикуенок
      9 марта 2009

      По большому счету, ты прав, но бывают задачи, которые решаются лучше таким способом, чем стандартным. Пример — веб-приложение под iPhone.

      Я не против самого подхода, наоборот, я сам люблю внедрять всякие интересные аяксовые штуки на сайт. Я против того, когда разработчики пихают всякую ерунду сайт просто чтобы сказать: «У нас тут, типа, аякс, это модно».

      Сергей, мне интересно твое мнение по моей реализации.

      Я как раз занимаюсь разработкой приложения под айфон 🙂 В целом, тут такой подход более-менее оправдан. Только не хватает «айфонности» 🙂 Был явный закос под приложения айфона, но работа сайта говорит явно о другом. Я бы довил плавных переходов влево/вправо при переходе между страницами, прокручивал страницу вверх при переходе по меню. Технически: заменил бы packed-версию jQuery на minified-версию (чтобы не тратить ресурсы браузера на лишнюю распаковку), вставил бы оформительскую графику через data:URL.

      В общем, если сайт выглядит как приложение, то и работать должен как приложение.

    5. 8 марта 2009

      Раньше давно подозревал, а недавно убедился, что на обычных сайтах аякс не решает ни оной проблемы, но с успехом их создает. Возможно, есть какие-то специализированные сайты, где это действительно полезно, но я не видел ни одного. Зато бывает удобно в админках.
      Вообще, скорее, аякс — не лекарство, а наркотик, употребление которого вызывает у разработчика эйфорию и создает ему массу проблем. Но в очень умеренных количествах и еще более редких случаях бывает полезен как крайняя мера обезбаливающего.

    6. Сергей Чикуенок
      9 марта 2009

      Возможно, есть какие-то специализированные сайты, где это действительно полезно, но я не видел ни одного.

      А как же Google.Maps? 🙂

      Вообще, скорее, аякс — не лекарство, а наркотик, употребление которого вызывает у разработчика эйфорию и создает ему массу проблем.

      Если судить по моему собственному опыту, то да, примерно так. Я раньше сам хотел запихнуть на сайты кучу анимации и аяксовых приблуд, я тогда не думал о том, что это может раздражать. Я просто как бы заявлял: «Смотрите, я умею подгружать данные без перезагрузки страницы и двигать объект из точки А в точку Б». Конечно, со временем это все прошло.

    7. 9 марта 2009

      В целом — здраво, хороших реализаций очень мало. А если плохая, то ради чего, собственно. Только вот не понял про Я.Карты, пояснишь?

    8. Сергей Чикуенок
      9 марта 2009

      Только вот не понял про Я.Карты, пояснишь?

      На одном сайте, по-моему на http://dreamtravel.ru/, можно было что-то посмотреть на карте (сейчас уже не могу найти ту ссылку). Причем, карта не вставлялась на саму страницу (и это на полном аяксовом сайте!), а тупо ставилась ссылка на сайт карт.

    9. 9 марта 2009

      > А как же Google.Maps?

      Да, вы правы, забыл о нем когда писал 🙂
      Но от него как раз и не требуется отслеживания истории, открытия ссылок в новых вкладках, даже индексации поисковиками.
      После прочтения комментариев напрашивается вывод, что аякс — это технология, место которой не на сайтах, а в веб-приложениях, которыми как раз и являются Google Maps, GMail и т. д.
      А на сайтах аякс может выполнять небольшие вспомогательные функции, например как это делает google suggest.

    10. Сергей Чикуенок
      9 марта 2009

      А на сайтах аякс может выполнять небольшие вспомогательные функции, например как это делает google suggest.

      Вы слишком критично относитесь к аяксу. Проблема не в нем, а в том, как его используют. Я заметил, что для большого количества разработчиков эта технология отождествляется с простотой и высокой скоростью разработки. Но, как правильно заметил scorpix, хороший аяксовый сайт — это тяжелая и кропотливая работа. И всем лень ей заниматься.

    11. 9 марта 2009

      А нужно ли? Даст ли это действительно весомые преимущества перед «классическими» технологиями?
      Мне кажется, что нет. И о небольших вспомогательных функциях я говорил не потому, что на большее аякс на сайте не способен, а потому что большее от него мало кому нужно.
      Но я действительно слишком критично отношусь к аяксу.

    12. estuold
      10 марта 2009

      Мусор на входе — мусор на выходе. Ричард Фейнман.

    13. Elijah
      9 мая 2009

      Преемущества аякса очевидны в высоконагруженных проектах. Мы делаем долгие и сложные запросы только один раз при первом открытии страницы, дальше подгружаем нужный контент по запросу. Хороший пример — фейсбук.

    14. Сергей Чикуенок
      10 мая 2009

      Это не отменяет того, что нужно хорошенько подумать, прежде чем использовать аякс. Хорошие примеры указаны в в этом посте, там люди совсем не думали 🙂

    15. egorinsk
      14 мая 2009

      И это еще не все 🙂

      Так как в большинстве браузеров нет события onhashchanged, то его пытаются имитировать либо через какой-то извратный ифрейм, отправляющий запрос при нажатии Назад/Вперед, либо ставят таймер, проверящий состояние адресной строки, соотвественно браузер постоянно ест проц (а может еще и память утекает, кто его знает).

      Имхо, если верстка не тяжелая, и например контент составляет 80% от кода страницы, выигрыш от аякса сомнителен.

      Но с другой стороны, например, удаление записи в таблице удобнее делать аяксом, зачем перезагружать большую таблицу ради этого. Да и история в этом случае не нужна 🙂

      И конечно, стоит ссылку делать, чтобы она работала и без яваскрипта (как обычная ссылка) — тогда работает открытие в новой вкладке (по крайней мере в Опере), да и контент лучше индексируется.

    16. Alexey
      18 июня 2009

      На самом деле проблема давно решена добовлением #params к адресу страницы это в плане загрузки страниц.
      А гугл аналитик позволяет добовлять в ручную переходы на страницы.

    17. 30 июня 2009

      Плохому танцору всегда что-то мешает. Хуже всего когда он при этом обвиняет других. Использование AJAX в разных случаях имеет разное назначение. Однозначно AJAX более предпочтителен при разработке одностраничных веб-приложений. Однако, это не повод пинать ногами тех, кто «одевается не так как все», кто создает сайты по своему усмотрению. Да, в инете имеется масса ошибочных решений с применением АЯКСа, но их по кол-ву не больше чем и обычных кривых решений без него. Применяя АЯКС многие разработчики учатся создавать более «живые» сайты. Пусть на первом этапе у них получится корявый сайт, однако никто не рождается проффесионалом, им становятся путем проб и ошибок.

      Относительно http://dreamtravel.ru/, на сайте однозначно эффективность применения АЯКС на лицо. Сайт просто летает! Выигрыш имеется как на клиентской так и на серверной стороне! Относительно карт — возможно стоило добавить загрузку прям в страницу, а возможно и нет. Это лучше всего виднее разработчику, а не «веб-истерику».

      Относительно ваших аргументов в статье:
      1) на данный момент алгоритмы истории АЯКС навигации отработаны и работают стабильно, кривость внедрения на конкретный сайт никак не есть повод судить об этом вопросе в глобальном контексте
      2) это вообще не проблема, так как легко решается при окончании AJAX загрузки вызовом scrollTo(0,0)
      3) этот вопрос также просто реализуем, многие забывают про него, однако это не та проблема, которая критически опровергает уместность применения АЯКС
      4) вы уверены что в стандартной реализации при перемещении по истории нет никаких запросов к серверу?

      Относительно букетов проблем которые поимели разработчики — ваш анализ форума дает четкое представление о предвзятости вашего отношения. Во-первых если внимательно читать, становится ясно что проблемы возникают в начальном этапе и обусловлены они слабой подготовкой разработчиков, слабым пониманием принципов работы тех или иных библиотек. Ваш вывод относительно Google Analytics полностью проясняет картину — вы поленились разобраться детально. А просто решили «облить грязью» тех кто делает не так как вы.

      Почему же в вашем обзоре нет ни одного описания множества преимуществ?

      Я понимаю вас, да АЯКС это тяжело, он не для вас, лучше его не трогайте, а то потеряете уйму времени. Продолжайте делать то, что у вас лучше всего получается, наверно «не аргументированное критиканство» одно из таких занятий.

    18. Сергей Чикуенок
      30 июня 2009

      Относительно http://dreamtravel.ru/, на сайте однозначно эффективность применения АЯКС на лицо. Сайт просто летает! Выигрыш имеется как на клиентской так и на серверной стороне!

      А хотите я вам покажу сайты, которые летают без аякса?

      1) на данный момент алгоритмы истории АЯКС навигации отработаны и работают стабильно, кривость внедрения на конкретный сайт никак не есть повод судить об этом вопросе в глобальном контексте

      Покажите мне то место в моем посте, где я пишу, что аякс — полный отстой (то есть сужу о нем в глобальном контексте). Или же я все-таки обсуждаю конкретную реализацию конкретных проектов?

      2) это вообще не проблема, так как легко решается при окончании AJAX загрузки вызовом scrollTo(0,0)

      Почему не решили эту проблему в описываемых проектах, если все так просто? Или может разработчики совсем не думали об удобстве пользователя, а только о том, как бы по-больше аякса впихнуть?

      3) этот вопрос также просто реализуем, многие забывают про него, однако это не та проблема

      Аналогично, почему же не сделали?

      4) вы уверены что в стандартной реализации при перемещении по истории нет никаких запросов к серверу?

      Нет, не уверен.

      Почему же в вашем обзоре нет ни одного описания множества преимуществ?

      Я понимаю вас, да АЯКС это тяжело, он не для вас, лучше его не трогайте, а то потеряете уйму времени.

      Могу сказать только одно: вы невнимательно прочитали мой «обзор». Я понимаю, что вы, как разработчик FullAJAX, приняли это на свой счет.

      Я не говорю, что аякс — это отстой и давайте его вообще не будем использовать. Я сам очень тепло к ней отношусь и сейчас делаю проект, где ключевые вещи сделаны на аяксе.

      Аяксом, как и флэшом и любой другой технологией, нужно пользоваться с умом, а не вставлять куда попало просто ради того, чтобы сказать «а у меня тут аякс и все модное» (прочитайте еще раз заголовок поста). Касательно злосчастного dreamtravel.ru: я не нашел ровно ни одной причины делать сайт полностью на аяксе. Зато вот тут сыпется куча JS-ошибок: http://dreamtravel.ru/#+content/virtpage/40

      И не надо говорить про то, что «все летает»: если бы скорость загрузки сайта действительно волновала разработчиков, то они бы банально включили gzip и сделали нормальные CSS-спрайты. Способов повысить загрузку сайта — море.

    19. 30 июня 2009

      ок, читаем еще разок — «Типичный пример использования технологии только ради того, чтобы сказать: она тут используется.» — согласен, если технологию использовать ради технологии это тупо. точно так же как проповедовать ради проповеди, работать ради работы, в конце концов варить яйца ради навара из накипи. Это уже проблемы того кто эти яйца варит, а не проблемы курицы-несушки. То что нет много нормальных примеров реализаций вовсе не означает что их нет вообще. Мне очень нравится сайт http://www.downstream.ru/. Применение АЯКСа тут оправданно красотою работы сайта. Сайт визитка — должен отложится в памяти. Мне кажется разработчики этого вполне добились. при этом сайт индексируется на 100% как при стандартном подходе.

      Относительно http://dreamtravel.ru — представьте если человек, который делал этот сайт изучит то, о чем вы говорили gzip, спрайты, кеширование. АЯКС тут никак не помеха — будет двойная выгода.

      Вообщем, зачастую бывает по поступкам, делам, работам одних людей судят о группе других людей, а еще хуже о целой области чего-либо. Надо учитывать проблему незнания и проблему кривизны рук. Судя по комментариям у народа складывается сознание того что много АЯКСа == плохо, или АЯКС == админка. По своему опыту скажу что все проблемы, которые раньше существовали относительно применения АЯКС — решаются. При ГРАМОТНОМ его использовании можно получить как минимум две выгоды — скорость и визуализацию, про интерактивность уже молчу. Если вам это не надо, лучше АЯКС не трогать. И еще напоследок — критерий цена/время/качество никто не отменял. Думайте головой. АЯКС это не просто. Но это не значит что это невозможно.

    20. Сергей Чикуенок
      30 июня 2009

      Мне очень нравится сайт http://www.downstream.ru/. Применение АЯКСа тут оправданно красотою работы сайта

      Лично мне этот сайт запомнился тем, что я так и не смог до конца прочитать выезжающий текст при наведении на надпись «Система Телескоп», потому что на экране моего ноутбука он не помещается полностью, а при попытке прокрутить ниже он исчезает. И еще тем, что анимация там абсолютно бестолковая. И тем, что там абсолютно сухой текст, из которого толком не понятно, чем же компания занимается и почему стоит выбрать именно ее. И тем, что в шапке слова подчеркиваются, но кликнуть на них нельзя. Но это уже придирки и вкусовщина.

      Относительно http://dreamtravel.ru — представьте если человек, который делал этот сайт изучит то, о чем вы говорили gzip, спрайты, кеширование. АЯКС тут никак не помеха — будет двойная выгода.

      Что-то мне подсказывает, что человек, который все это выучит, не станет делать весь сайт на аяксе 🙂 Потому что выгоды от его использования в таком контексте абсолютно никакой, а проблем добавляет изрядно.

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

      Понимаете, какая тут ситуация. Любое решение, любое нововведение должно быть оправдано. Напишите крутую демку для своей библиотеки, такую, чтобы все обосрались и сказали «да, такое можно сделать только на аяксе и только на этой библиотеке». Тогда у ваших оппонентов не будет аргументов для возражения.

    21. 30 июня 2009

      Вопрос не так в библиотеке как в подходе :). Со временем появляются доработки и в других библиотеках, которые сопутствуют большему применению АЯКСа. К примеру взять тот же Mootools + document.write. C John Resig-ом я делился некоторыми мыслями относительно улучшения jQuery…

      Cейчас делаю одностраничное веб-риложение, работу такого приложения можно сделать только на АЯКСЕ, но не только на моей библиотеке. Библиотека это нож, у меня их на кухне несколько. Думаю у нормального разработчика тоже.

      Что-то мне подсказывает, что человек, который все это выучит, не станет делать весь сайт на аяксе Потому что выгоды от его использования в таком контексте абсолютно никакой, а проблем добавляет изрядно.

      это лично ваше мнение, я знаю точно что выгода имеется, которую я уже перечислял.

      Передраться можно к чему угодно, очень опасно когда это перерастает в болезнь.

      Покритикуйте напоследок http://pop.us/ — это flash сайт, точно такой же можно сделать и на чистом JS + AJAX.

    22. 3 августа 2009

      Нашёл эту страницу по запросу в гугле «ajax отстой».
      Недочётов у этой технологии больше, чем преимуществ и они весомее.
      Больше всего лично меня раздражает, что строка статуса в моём браузере не отрабатывает ajax, и соответственно не показывает статус загруженности конкретной страницы. Я вынужден смотреть на эти мигающие точки и ждать, когда без ajax я просто перезагружаю страницу когда надоедает ждать. Обрабатывает ли ajax кнопу F5, сочетание CTRL+R (Reload page)? Сомневаюсь. А ведь для этого эти кнопки и предназначены.
      Ещё меня раздражает когда пихают javascript в поля для ввода текста (textarea, к примеру) и обрабатывают правый клик мышью. Это из той же серии, когда пытаются запретить копирование контента путём блокировки возможности выделения текста (javascript ессно).
      Лично мне от ajaxа ещё не стало легче ни на одном сайте, но может всё ещё впереди.

      AJAX, я считаю, это промежуточный этап. Со временем, когда ПО будет иное, асинхронная работа с данными и в частности XML вполне может быть нормально реализовано. Но на текущем этапе нашей эволюции AJAX полезен в узкоспециализированных случаях и в конкретных ситуациях, чаще всего это касается всевозможных проектов WEB20 от facebook до ya.ru

      Вот тут ещё чел пишет, тока не на русском —> http://www.jacobhanson.com/2006/03/why-ajax-sucks/

      Насчёт последнего предложения покритиковать pop.us я с молчаливого согласия автора выскажу своё мнение. Я считаю, что реализация этого сайта на flash легче и быстрее, чем на ajax и client-side грузит меньше.
      Если есть желание сделать что-либо эффектно «как в кино» то flash (или active-x) подойдут лучше чем ajax.

      Отдельно отмечу, что браузер мой opera и большую часть времени я в интернете с отключенными скриптами и плагинами (flash), потому что мне нужна информация а не обёртка.