Как делать удобные ajax-сайты

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

    Сразу скажу, что существуют такие web-приложения, которые лишены указанных ниже недостатков (например, Gmail, Хабрахабр). Но это — счастливые исключения, лишь подтверждающие правила.

    1. Трудность навигации


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


    Довольная Гаечка наконец-то нашла нормальный ajax-сайт!

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

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

    Решением является такое применение аякса, когда пользователю предоставляются «виртуальные» страницы, когда функционал так группируется, что есть некие логические центры, откуда идет множество аякс-запросов, связанных одной ответственностью. К примеру, в Gmail это явно видно: вот список писем, вот страница письма, а вот страница настроек.

    Но это только вершина айсберга. Рассмотрим более конкретные баги и недоработки.

    2. Сброс состояния при закрытии


    Это один из частых видов проблем, о которых не думает никто. Распространены следующие варианты.

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

    Отдельно отмечу формы, которые не запоминают введенные данные, показывая сообщений о неверном заполнении. Это просто трындец, господа. Запомните, главный закон — DRY — работает для пользователя в первую очередь. Пользователь должен делать минимум кликов, и не должен ничего делать дважды. Плюс автосохранение в важных формах is a must, если речь идет об админках приложений.

    Решением является добавление к URL каких-нибудь маркеров, возвращающих приложение к нужному состоянию, например, ajaxsite.ru/#myStateInfoGoesHere

    3. Неработающие кнопки навигации


    Так как в первом пункте мы уже поняли, что пользователи привыкли и в силу работы мозга, и в силу истории развития интернета думать страницами, то неработающие кнопки назад/вперед, которые так бесили во флэш-сайтах, восстали из пепла после постепенного умирания flash в аякс-сайтах. Ничто так не раздражает, когда ты зашел на какой-то нереальный раздел 100500го уровня навигации, и нет кнопки вроде «вернуться к списку» на самой странице от разработчика, и вдруг обнаруживаешь — «Back», которая спасала еще со времен Netscape (классный был браузер), не работает!

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

    4. Тормоза


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

    Количество аякс-блоков на странице должно быть ограничено разумным числом.. Подгрузить следующую страницу результатов в таблицу, когда для генерации шапки, меню и тд выполняется много запросов к БД — разумно. А вот в случае с конфигурацией, когда у вас вкладки и внутри дерево настроек, каждую вкладку грузить аяксом, каждый попап, каждый элемент дерева (фанаты ExtJS в первую очередь стоят) — это зло, однозначно, господа.

    5. Неочевидность происходящего на странице


    Ушла в прошлое нижняя строка браузера, в которой когда-то мы писали с помощью манипуляций над window.status бегущую строку. Эх, было время в 2000х, когда это называлось не аяксом, а DHTML, и применялось в меру, и сайт javascript.internet.com и dynamicdrive.com с туториалами знал каждый второй, и на JS писали, понимая, а не тупя над тормозами без знания внутренностей фреймворков, как делают новички, пишущие о виртуозном владении JavaScript.

    Но я отвлекся :)

    Только половина сайтов сообщают, как Google Docs, что они что-то там сохраняют или загружают, с помощью надписей или всем приевшегося рисуночка с крутящимися полосками. Сейчас ситуация уже лучше, а раньше ты работал с сайтом, и вдруг у тебя пропадало текущее окно и вылезало ОНО, на что ты нажал минуту назад (привет server-side тормозам).

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

    6. Неверное применение AJAX



    Очень часто применяется модный эффект. К примеру, подгрузка по мере скролла контента вместо традиционного paging. Paging обладает миллиардом преимуществ — и ссылку можно дать, и понятно где ты находишься. А когда ты скроллил фотки вконтакте, закрыл случайно и открыл shift+ctrl+T — изволь скроллить по-новой.

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

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

    7. Отсутствие поддержки клавиатуры


    Тоже очень бесит. Во-первых, формы не отправляются по нажатию Enter (к чему приучает десктопный интерфейс). Во-вторых, распространные шоткаты, такие как Ctrl+влево/вправо для перехода страниц, не работают (привет Гуглу, Яндекс красавчеги). Внезапно вылезший модальный попап не пропадает при нажатии Escape.

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

    Общая идея проектирования ajax-приложения


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

    Вам в помощь наука. Мозг, как известно, при весе в 1/50 тела в момент предельной нагрузки потребляет до 25% всей энергии организма. Посему он стремиться всячески свести свою работу к минимуму. Именно поэтому, а вовсе из-за непонятной психологам, не знающим биологию есть прокрастинация. Поэтому мы ленивы и поэтому нам нравится все простое и не нравится все, что требует лишних энергетических затрат.

    Следовательно, измеряйте количество кликов для выполнения основных user stories на вашем сайте, количество движений мышкой, количество нажатий клавиш, и всячески минимизируйте эти числа. Тупо и методично. Тут можно похвалить Гугл — зацените, вы вводите текст, а он уже начинает искать и показывать результаты. Круто сделано.

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

    upd. из комментариев:

    lesha_penguin 8. Отсутствие возможности открыть ссылку в отдельном окне/вкладке.

    Например, в интернет-магазине невозможность открыть одновременно два товара для сравнения/выбора в двух вкладках. За такое хочется убивать.

    alienator Дополню 5: сообщайте не только о идущем процессе, но и о его завершении.

    Еще: если какая-то информация используется для построения нескольких блоков на странице, но надо обновлять их все. Один известный банк не сразу допер, что если пользователь нажал кнопку «Обновить остаток» в заголовке конкретного счета, то не мешает полученный остаток обновить и в списке счетов в левой колонке.

    mib Еще при разработке аякс-сайта не забывайте об индексации: Если основной контент (тот который меняется при навигации по меню сайта), подгружается аяксом — поисковики скорее всего не будут этот контент индексировать.

    Я использую такое решение: Каждый пункт меню изначально является ссылкой на реальную страничку, т.е. /about /home /settings /news/5 etc.

    А при загрузке явоскрипта — клики по этим линкам перехватываются, и с сервера забирается только аякс-контент, а не вся страничка.
    Share post

    Comments 91

      +24
      8. Отсутствие возможности открыть ссылку в отдельном окне/вкладке.

      Например, в интернет-магазине невозможность открыть одновременно два товара для сравнения/выбора в двух вкладках. За такое хочется убивать.
        +1
        Точно, как я мог забыть.
          0
          Опубликуйте пожалуйста, как пример проблемы, если посчитаете важным:

          Буду говорить о реальном сайте, который делали недавно и еще не совсем довели до конца.
          Сайт делали с использованием ajax для загрузки контента. По сути, сайт был как проба этого решения и он не для обычного заказчика, а скорее для друзей.
          Попробовали реализовать все, что Вы перечислили в статье, но столкнулись с неприятным фактом.
          Что бы реализовать индексацию, открытие в новых окнах, нужно было нормальную сделать смену адреса.
          И загвоздка в том, что сайт хоть и работает в IE9 и IE8 вроде, но эти браузеры добавляют решетку после домена, что приводит к множеству проблем.
          Мы хоть и частично их обошли, но это ярко выраженный костыль, который порождает другие проблемы, на пример для естественного продвижения сайта.
          Потому пришли к решению, что в продакшен, сайт на чистом ajax, кроме визиток, делать еще не совсем корректно.
          Сам сайт: www.barberq.ru

          P.S. Просьба не судит строго.
            0
            А Вконтакте как-то и не знает об этих ваших недостатках ajax сайтов;)
              0
              Вообще, у них такая же ситуация, тоже добавляется # в браузере IE.
                0
                В старых ie. И это никак не мешает индексации и передаче ссылок между пользователями, кнопкам назад-вперед и всему остальному.
                  0
                  IE 9 еще не так стар, как кажется.
                  Ссылка vk.com/#/im от ссылки vk.com/im отличается и для поисковика является разной ссылкой.
                    0
                    Виноват, точнее vk.com/feed#/im отличается от vk.com/im
                      0
                      На сколько я знаю, IE9 подмену url поддерживает, проблема актуальна только для ie8 и меньше. В прочем, я не могу сейчас проверить. Если есть на машине 9я версия, можно зайти на вконтакте и проверить.

                      Во-вторых, поисковики о хеш ссылках знают: developers.google.com/webmasters/ajax-crawling/docs/specification (ниже в комментариях об этом писали). Достаточно сделать 301 редирект на правильный url и вес ссылки передасться.
                        0
                        На пример у меня, в IE9, в вконтакте нет подмены.
                        Все ли поисковики знают?
                        А редирект дает бессмысленное дублирование структуры при индексации, что я и называю костылем!
                        Если Вы будете статистику собирать по сайту, то придется учитывать этот костыль.
                          0
                          Вы сайт для пользователей делаете или для поисковиков? Редирект делается следствами nginx и какого дублирования тут нет. Поисковики, думаю, не все. Но потерять пару процентов поискового трафика это нормальная цена за повышенное удобство для пользователей. И преимущества достаточно существенные. Пользователи отблагодарят и будут заходить на сайт чаще, многократно компенсируя потерю несколько процентов ссылочной массы для экзотических поисковиков.
                            0
                            Все зависит от проекта, на пример для вконтакте, я думаю индексация отнюдь не самое важное, а для сайта, который собираются продвигать, это проблема.
                            IE9 и все что осталось за ним, пока не пара процентов, хотя конечно ждем, потому и написал, что «еще не совсем корректно».
                            Тогда на пример надо будет в nginx или apache добавить переброс HTTP_REFERER для коррекции статистики, только я вот не уверен что это можно на любом виртуальном хостинге, это не проверил.
                              0
                              Это не проблема, если вы собираетесь жертвовать поисковиками, которые застыли в своем развитии в начале двухтысячных и которым пользуется 0.001 процент пользователей. Да и то, жертва условная, там не такая уж и серьезная потеря ссылок идет. О ужас, один из 10000 пользователей не попадет на сайт.

                              Что там про проброс HTTP_REFFERER не понял. при редиректе он нормально передается браузером без дополнительных действий.

                              Даже для сайтов, которые получают 90% трафика с поиска, hijax совсем не проблема и оказывает влияние сильно меньшее статистической погрешности (при правильной настройке).
                                0
                                Вы можете дать ссылку на ajax сайт, у которого основной трафик с поиска и его посещаемость более 2000 — 5000 тысяч ip в сутки?

                                Про HTTP_REFFERER, я имел ввиду, если пользователь нажал на ссылку вида www.example.com/#/primer то он попадет или на дублирующую страницу или исходя из предложенного варианта Вами, сервер перебросит его на страницу без решетки, вот при этом редиректе, надо перебросить HTTP_REFFERER корректно.

                                Если эти настройки можно произвести, хостинг провайдер дает на это право.
                                  0
                                  Нет, увы для сайта с 2-5К в сутки hijax это сильно сложно и дорого, как правило там стоит какая-то бесплатная cms или типа того. Даже сайтов с на порядок более выской посещаемостью я не назову кого-то с hijax. Как правило, использование этой технологии начинается на сайтах с 200к+, исключения редкие (в основном случаются когда сайт просто еще не успел набрать эти 200К, но дело к тому идет).

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

                                  Ну и 3, редирект для считалки это обычно часть фреймворка по работе с hijax, и это очень-очень маленькая часть кода в нем. Ничего такого и поисковики это никак не затрагивает.
                                    0
                                    Увы, я с Вами не соглашусь, это не дорого и это не причина.

                                    Я говорю про естественные ссылки.

                                    Для универсального инструмента, — это костыль, который учитывает эту специфику, которую в дальнейшем надо будет выбросить. И Вы говорили про настройку nginx сперва, а это значит, что до фрэймворка, дело не дойдет.
                                      0
                                      Ох, ладно, не хочу с вами спорить. Сейчас готовлю проект на full hijax, который будет получать seo траффик и конвертировать его в постоянных посетителей. Если все будет ок, возможно я напишу об этом статью.
                              0
                              И еще, не помню точно, где читал, но было что-то вроде:
                              Что при верстке сайта, решили выкинуть IE6, но при тестировании, оказалось, что те, кто сидят за этим браузером или имеют возможность купить или именно им нужен этот продукт, который они хотели продавать, потому эти пару процентов, могут оказаться далеко не парой.
                                0
                                Похоже на басню, если речь о 2012 годе или позже.
                                  0
                                  Поглядите, эта басня выливается в 15%, а среди IE основная доля 8 версии.
                                  www.openstat.ru/counter:meta/trends/report/browser#1807
                                  www.w3schools.com/browsers/browsers_stats.asp
                                    0
                                    Как 15% или любое другое число связано с тем, что написано выше (что пользователи IE6 оказались какими-то уникальными покупателями)?
                                      0
                                      Тестированием связано, суть того что я написал в том, что уверенным быть мало, надо проверять и проверки на реальных ситуациях, могут показывать вовсе иное. Как пример, пользователи IE, это могут быть пользователи, которые или обязаны пользоваться им из-за условий, в которых они или они не способны из-за неопытности и очень окажется, что продукт, заточенный под такой тип людей, будет лучше показывать для IE, а не для продвинутых пользователей, способных поставить, что ни будь посовременней.
              0
              Очень бесит в этом плане ASP (или как он там C# .Net Framework), когда на любую страницу переходишь с помощью POST запроса, а не GET.
              Может можно сделать и по другому, но наше приложение, написанное уволенной бездарностью, именно так и работает. Нам уже не терпится закончить переписывать все внутренние части и переписать интерфейс.
                +1
                Это ASP.NET Forms — этому не было альтернативы определённое время. Сейчас в ASP.NETсайты тоже реализуются через MVC.

                Довольно неудобная штука согласен.
                  +2
                  До сих пор есть легаси проекты, в которых используется ASP.NET пусть и 4ой версии, но все равно старый по сути, как гумно мамонта. И от этого не деться никуда. И все эти постбэки да вынужденный лапша-код просто вымораживают. Но это право заказчика ответить отказом на рекомендации сменить фреймворк.
                  ASP.NET MVC4 уже намного лучше, особливо с JS фреймворками типа AngularJS.
                  +2
                  Непонятно зачем смартфоны вообще перезагружают табы, которые использовались недавно. Заставлять городить localstorage на каждом сайте из-за комментариев — куда более глупо, чем временно дампить страницы на телефон.
                  0
                  добавил в пост
                    +1
                    По моему проблема напрямую связана с «2. Сброс состояния при закрытии». Или может я не правильно вас понял?
                      –1
                      Листаю ленту Хабра и по мере открываю заинтересовавшие меня посты в новых вкладках с помощью кнопки на мышке — так я делал всегда, вплоть до сегодня.

                      Сегодня зашел, а посты уже так не открываются. Приходиться жать правой кнопкой, копировать ссылку, открывать вкладку, впихивать ссылку и жать кнопку. «Очень удобно».
                        0
                        попробуйте отключить AdBlocker. у меня из-за него бывают такие лаги.
                        0
                        У некоторых есть функция сравнить товары, но, к сожалению, не все ее делают.
                        +14
                        Хабр не запоминает состояние :(
                        Очень бесит, когда во время набора комментария на смартфоне переключаешься в другой таб, чтобы загуглить что-нибудь, или скопировать ссылку, затем возвращаешься в таб с комментарием, а страница полностью перезагружается, и многострочный комментарий потерян. Сохранить текст неотправленного комментария в localStorage и восстановить при загрузке страницы и открытии поля редактирования — 15 минут работы программиста…
                          +1
                          Спасибо, 5 минут назад прочёл и вот уже закоммитил! :) Крутая фича :).
                          +1
                          Дополню 5: сообщайте не только о идущем процессе, но и о его завершении.

                          Еще: если какая-то информация используется для построения нескольких блоков на странице, но надо обновлять их все. Один известный банк не сразу допер, что если пользователь нажал кнопку «Обновить остаток» в заголовке конкретного счета, то не мешает полученный остаток обновить и в списке счетов в левой колонке.
                            +1
                            добавил в пост
                            +6
                            Лично меня очень не радует в Gmail отсутствие возможности открыть несколько писем в новых вкладках. Нужно открыть одно, потом вернуться к списку, открыть другое. В Яндексе и Вконтакте это качественно предусмотрено наряду с ajax-вариантом.
                              +1
                              Можно открыть в новом окне, вверху справа кнопка. Согласен, немного не то, но тоже что-то.
                                +2
                                Да, я тоже долго мучился с этим. В итоге переключился на упрощенную HTML-версию. Она уродливая, но гораздо более удобная.
                                  0
                                  Спасибо за совет!
                                  P. S. Чтобы переключиться, мне пришлось зайти с отключенным JS, других вариантов не нашёл.
                                +7
                                Вроде какое ко мне отношение имеет разработка сайтов на аяксе? Но как можно не плюсануть Гаечку? :)
                                  +5
                                  Секс-идол детства-юношества? ;)
                                    +3
                                    Да мы и слов таких не знали :)
                                      +6
                                      Не знание слов, не освобождает от тестостерона :D
                                      +9
                                      Тогда уж: «Даешь каждому посту на хабре по картинке с Эйприл О'нил». Зачем это надо?
                                        +2
                                        Странно, но в моем детстве-юношестве эта тётя прошла мимо…

                                        Чего-то я от темы топика сильно с торону ухожу, не иначе влияние Гаечки :)
                                          0
                                          художник что-то с буферами переборщил
                                      +3
                                      Вообще-то для второго пункта есть такая штука как History API, которая позволяет менять адрес страницы. Поддерживают все современные браузеры, заканчивая IE10. Пример можно видеть на гитхабе: нажимаете ссылку на папку или файл. Содержимое заменяется с красивой анимацией, и при этом меняется адрес в адресной строке. В ЖЖ тоже неплохо прикрутили при перелистывании страниц с комментариями, правда зависит от стиля журнала.
                                        0
                                        Кстати он же поможет с пунктом 3 про навигацию.
                                        0
                                        Гугл тоже не всегда удобен, их книга телефонных контактов была гораздо удобнее в первой версии
                                          –2
                                          Плюсанул конечно, но рекомендовал бы автору пересмотреть тезисы с позиций (гуглится) кеширование и стек, REST в противопоставление RPC и разновидности MVC вне архитектуры «клиент-сервер» (backbone.js, например).

                                          Из этого же материала можно сделать еще несколько суперинтересных выводов.
                                            0
                                            Обязательно найдется кто-нибудь, чтобы ляпнуть какой нибудь бред.
                                            Статья не о технологиях разработки, а о том, как сделать так, чтобы ничего не понимающий в технологиях пользователь был доволен конечным приложением.
                                              –1
                                              Вы считаете, что более внимательный учет особенностей применяемой технологии не повлияет на качество приложения?
                                            +4
                                            подгрузка по мере скролла контента (или клика по „подгрузить еще”)

                                            Особо „радует” данная фича, когда хочется быстро найти что-то нажимая Ctrl+F.
                                              +2
                                              Содержимое поста не отвечает названию. В посте в основном хотелки с позиции юзера, а как это все реализовать описано слабовато. Пример — первый пункт.

                                              Решением является бла-бла-бла болдом. Потом: это видно в гмэйл — вот страница такая-то, там вот еще одна. Где это? Тут трудно что ли написать фразу вида: функционал по работе с письмами сгрупирован по урлу такому-то, по которому грузится АДЖАКС ;) только про письма. А так получается: помедитируйте над гмейлом, там все круто. А потом бегите делайте как в яндекс.
                                                +4
                                                Задача поста — это не хотелки юзера, это нормальные адекватные требования, с обоснованием и примерами. Хотелки — это сделать белый текст на белом фоне + «потому что я заказчик!!!».
                                                А не сохранять текст в формах после сабмита, или говенная навигация по аякс-сайту — это кривые руки в команде. Либо разработчика, либо его лени убедить проджекта, что предлагается хрень, типа скроллинга в твиттер-стайле вместо пейджинга, тупо из-за моды.

                                                Как реализовать, статей достаточно. Как мыслить правильно — статей мало. И мыслят адекватно далеко не все, судя по неудобным сайтам.
                                                  0
                                                  Задача поста — это не хотелки юзера, это нормальные адекватные требования

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

                                                  Но тогда и пост следовало назвать как-то так: «Основные принципы кошерного AJAX сайта» или «Каким должен быть идеальный АДЖАКС-сайт» и т.п. Ну в крайнем случае «Как(им) надо делать удобный ...» И то не корректным будет.
                                                    +1
                                                    ну сначала называлось «Почему 95% сайтов на ajax — отстой», и не очень шел рейтинг (50 на 50).

                                                    А сейчас вроде по смыслу, и людей устраивает.

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

                                                    * задумчиво * И когда уже Гугл сделает Ctrl + Влево/Вправо?
                                                      0
                                                      Чтобы заставить задуматься разработчиков, нужно устроить хохлосрач по-делу. В споре рождается истина — хоть и спорное утверждение, но живучее.

                                                      и не очень шел рейтинг (50 на 50)

                                                      И к чему это? Для чего пост писали?! ЧСВ или мысль донести для?
                                                        0
                                                        Донести мысль.

                                                        Достало, честно говоря. И написано с поддевкой, чтобы обсуждение пошло.

                                                        А рейтинг — если топик уходит в минуса, его видит мало людей, и полезный задуманный эффект не производит.

                                                        И потом, мне нужен мануал для своих, как НЕ надо делать с аяксом. Хабр авторитетная площадка для этого, усиливает, так сказать, влияние ссылки «rtfm».
                                                          0
                                                          И потом, мне нужен мануал для своих, как НЕ надо делать с аяксом.

                                                          «Для своих» рейтинг вашего же поста не станет «козырным джокером». С таким же успехом можно потрудиться и написать диссер на кандидатскую. Для спора в купе поезда прокатит.

                                                          Донести мысль.
                                                          Достало, честно говоря. И написано с поддевкой, чтобы обсуждение пошло.

                                                          Надо было добавить «или все-таки мысль донести». Без издевки спрашивал. По мне так главная мотивация написания поста — сохранить/упорядочить мысли + проверить идею и подискутировать с сообществом. Нередко хорошие идеи подаются в камментах.
                                                0
                                                Не туда запостал ответ
                                                  +3
                                                  Еще при разработке аякс-сайта не забывайте об индексации: Если основной контент (тот который меняется при навигации по меню сайта), подгружается аяксом — поисковики скорее всего не будут этот контент индексировать.

                                                  Я использую такое решение: Каждый пункт меню изначально является ссылкой на реальную страничку, т.е. /about /home /settings /news/5 etc.

                                                  А при загрузке явоскрипта — клики по этим линкам перехватываются, и с сервера забирается только аякс-контент, а не вся страничка.

                                                  Тоесть аякс передает серверу особый параметр: "/news/5?ajax" например. И сервер знает, что нужно генерить не всю страничку, а только соотв. блок.

                                                  И все довольны: можно скопировать ссылку и отправить корешу; Роботы тоже пройдутся по ссылкам и получат полный контент страничек, а пользователи при клике на ссылки не будут обновлять всю страницу — они получат только нужный контент.
                                                    0
                                                    Такой приём используется в библиотеке PJAX.

                                                    Только они отслеживают не сферический GET-параметр ?ajax в вакууме, а HTTP-заголовки, к которым добавляется специальный заголовок (в их случае — HTTP-X-PJAX).
                                                      0
                                                      Есть еще много способов намекнуть серверу, что нужен аякс-контент. Главное — суть :)
                                                      –2
                                                      Поисковики понимают формат
                                                      example.com/#!/some_page
                                                      И пытаются найти контент по ссылке
                                                      example.com/some_page
                                                        0
                                                        Добавил в пост
                                                      • UFO just landed and posted this here
                                                        +5
                                                        Во-вторых, распространные шоткаты, такие как Ctrl+влево/вправо для перехода страниц


                                                        Это же распространные шоткаты для перехода по словам в полях ввода! И частенько можно натыкаться на плохую реализацию, когда в наборе текста вместо перехода по словам происходит переход на другую страницу.
                                                          +1
                                                          Причем тут вообще ajax? Описаны какие-то батхерты на нарушение бестпрактик программирования веб-приложений. Еще какие-то ajax сайты придумали. Что за зверь такой…

                                                          >>>Эх, было время в 2000х, когда это называлось не аяксом, а DHTML

                                                          Это вообще что за бред? Ajax это парадигма общения между сервером и клиентом. А никак не общее название технологий для создания динамических веб-страниц, и название это и сейчас остается актуальным, изменились лишь технологии.
                                                            +1
                                                            >> За такое хочется убивать.
                                                            сначала пытать, а потом убивать
                                                              0
                                                              По пункту 6 — что вы можете предложить в качестве альтернативы?
                                                                +2
                                                                А там нет альтернативы? Или это вопрос к рассмотренному примеру?

                                                                Если про пейджинг, у вконтакте есть пейджинг + скролл при просмотре сообщений в теме в группе.
                                                                Сложно, но гибрид получился занятный.

                                                                Если про кнопку «добавить еще» — уберите ее, делайте скролл-загрузку на автомате. Не заставляйте злиться своих пользователей.

                                                                Если же вообще, то пункт гласит — применяйте к месту эффекты и фишки, а не просто «потому что захотелось» или из-за моды и тд
                                                                –2
                                                                По моему, это очевидные аспекты при разработки качественного приложения. И все до единой проблемы решаемы, точнее это и не проблемы вовсе.

                                                                Меня волнует больше то, что у Ajax есть скрытые возможности, но с 2007 года и до сих пор, этого мало кто заметил. Тысячи, да что там десятки тысяч программистов, если не сотни, и сплошь слепцы. Я начинаю сомневаться в подлинности этого мира и существовании всех этих людей…
                                                                  0
                                                                  > Меня волнует больше то, что у Ajax есть скрытые возможности
                                                                  Какие?
                                                                    +3
                                                                    Какие?

                                                                    [joking]ХА! Так он прямо и выложил вам на блюдечке идею на миллион долларов зимбабве.[/шуткуя]
                                                                      +2
                                                                      Скорее всего, какая-нить пустая болтология про невиданные возможности, бороздящие космический простор звездолеты и мгновенную передачу мыслей на расстояние. А еще вероятнее, что это просто тролль :)
                                                                        0
                                                                        Тебе просто досадно от того, что у тебя не хватает мозгов эту возможность увидеть и грамотно применить, поэтому ты переходишь сразу к оскорблениям. Ничего космического)
                                                                          +1
                                                                          Я вижу в вашем комментарии только: Бла-бла-бла-бла… Мозгов (гыгы, я тролль)… Бла-бла-бла… к оскорблениям (ха, как я завернул: сам себя не похвалишь — никто не похвалит)… Бла-бла-бла… Космического (ну, тут я победил 100%).
                                                                            0
                                                                            Очень информативное сообщение, спасибо что зашли)
                                                                              0
                                                                              И вам не хворать :)
                                                                              +3
                                                                              Спасибо, поржал!!!
                                                                              Разрядили обстановку AJAX-баталий)))
                                                                    +1
                                                                    1. Кнопки «Назад»/«Вперед» — вообще отдельная и занимательная тема. (включающая HTML5 History манипуляции: статья на хабре)

                                                                    2. Обычно путают понятие «контейнер» и «переменные состояния контейнера», полученное от сервера после AJAX-запроса. И когда эти понятия смешиваются — наступает хаос: не работает так как нужно в определенный момент GUI, происходит произвольное наложение/замена данных в JS-скрипте, затирание переменных и т.д.

                                                                    Всегда должно быть четкое разделение: внешний контейнер (HTML-страница), внутренние (DIV через AJAX и т.д.) и данные ({«item»:«value»}) и весь механизм отслеживания состояния должен динамически менять ссылку на страницу, чтобы можно было перейти в это состояние, просто открыв ссылку на другом компьютере (передав ссылку любым способом).

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

                                                                    Также, нужно не забывать сообщать пользователю «строку состояния AJAX» в GUI: ошибки, таймауты, иконку загрузки, и т.д.

                                                                    Придерживаясь этих простых правил достаточно просто сделать НОРМАЛЬНУЮ и УДОБНУЮ страницу для пользователя.
                                                                      0
                                                                      Вот это точно скользкая тема. Сколько раз натыкался, что кнопка назад на сайте ведет в родительский раздел, но не туда, откуда я пришел. И уж сколько слюней выбрызнуто в споре о том куда должна вести эта кнопка.

                                                                      По мне так кнопки вперед/назад должны работать точно также, как в браузере (при этом бравда смысл в них теряется). А для переходов по иерархии разделов Bread Crumbs юзать.
                                                                      +2
                                                                      0. Не делайте AJAX-сайты.
                                                                        0
                                                                        :))))
                                                                        Как вариант, но доставка только необходимых данных без перезагрузки всей страницы — это скорость и экономия трафика!
                                                                        Фактически html — это GUI серверного приложения, а AJAX-запросы на сервер — это серверные методы, повешенные на клиентское GUI.
                                                                        Поэтому нет смысла перегружать целиком приложение, чтобы переключить вкладку или отобразить нужные данные с сервера в данной HTML-разметке страницы.
                                                                          +2
                                                                          AJAX != AJAX-сайт.
                                                                            –1
                                                                            AJAX — технология.
                                                                            AJAX-сайт — это или HTML-wrapper или не AJAX-сайт.
                                                                            Иначе, получается, что фреймы — тоже AJAX-сайт…

                                                                            Логика работы AJAX — везде одинаковая.

                                                                            Вопрос в манипулировании данным инструментом с неструктурным подходом к реализации и кривыми прямыми руками…
                                                                            0
                                                                            Я так понял имелась в виду ситуация как с flash/silverlight сайтами. Все хорошо в меру.
                                                                          0
                                                                          Ох не там вы проблему ищете!
                                                                          Ajax тут при чём?
                                                                          Неудобный сайт можно сделать и на чистом html.
                                                                          Реальное зло — это веб-студии с конвейером.
                                                                          Ведь как бывает: приходит заказчик со словами «а я вот видел во вконтактике…». И менеджер соглашается, не спросив разработчика. А потом сроки, тестирование на глазок да по каким-то непонятным сценариям.
                                                                          Или заказчик приходит и говорит «я продаю десятисантиметровые гвозди, мне нужен сайт», а менеджер чувствует готовность заказчика заплатить, и давай навешивать совершенно ненужные визуальные эффекты. Или не менеджер, а творческий руководитель: «а чего это у нас в портфолио ещё нет сайта с невероятно оригинальным и уникальным эффектом параллакса с подгрузкой гвоздей при скролле и аяксовой отправкой формы заказа?».
                                                                          Или даже самому разработчику захотелось реализовать какой-нибудь модный эффект без единой мысли о том, нужен ли он тут, а над душой стоит менеджер с какими-то глупостями вроде сроков.
                                                                          Выглядит похоже на макет? Или даже пиксель в пиксель? Какие претензии? Форма заказа отправляется? На почту приходит? Что ещё надо? Ах, хэш-навигация? Ах, ссылки чтобы открывались в новых вкладках, если их с коммандом нажимать? Ах, индикаторы прогресса? А в ТЗ такое было? Нет!? Свободен! В рамках техподдержки за стотыщмиллионов рублей. Или по допсоглашению. А у нас бизнес тут, а не какие-то игры. А не то, если каждый сайт хорошо будем делать, то разоримся на втором или третьем.
                                                                            0
                                                                            Тут речь больше про методы с применением AJAX-а, нежели чем про скорость кодирования…
                                                                            Все это понятно, что можно и прошивку в телефон с неоптимизированным GUI засунуть…
                                                                            Про «весы» Вы верно заметили: «не нужно городить там где не нужно!»
                                                                            Однако, пользователи привыкли сравнивать визуально при входе на сайт.
                                                                            А что они могут сравнить?
                                                                            Достаточно много: дизайн, удобство, кол-во рекламы, скорость загрузки страниц, скорость работы интерфейса, и (все чаще, как раз) «параллаксовые гвозди».
                                                                            И чем больше видят они этих новых технологий на сайте (скажу кратко: HTML5 во всей красе + JS анимация), тем больше у них возникает интерес к нему вернуться.
                                                                            Т.е. это своего рода авто-реклама: «сарафанное» радио.
                                                                            Поэтому, если что-то и городить, то только на титульной: «цепануть необычным» и удержать внимание посетителя.
                                                                            На внутренних страницах — уже по мере необходимости.

                                                                          Only users with full accounts can post comments. Log in, please.