Десять преимуществ Unobtrusive Javascript

    Это дополнение к отличной предыдущей (более практической) статье про ненавязчивый яваскрипт. Вкратце, я хочу сказать, что способность работы при выключенном JS это только видимая верхушка айсберга и, быть может, не главная цель. Есть много других преимуществ использования этого подхода. Под катом вы найдете список с пояснениями (плюс немного примеров хороших js-компонент в конце).



    1. Unobtrusive Javascrit очищает HTML от JS
      При этом делая HTML реюзабельным. Появляются уместные классы, уходят дублирующиеся onclick. Верстальщик, не использующий unobtrusive javascript, когда-нибудь сделает из проекта запутанный клубок. Не использовать этот подход в клиентском коде на сегодня равнозначно игнорированию MVC в серверных скриптах.

      Делает HTML максимально семантичным
      Подразумевается, что компоненты, написанные этим методом, в основании имеют семантически правильный HTML код (фактически использующийся как средство задания исходных данных), который уже при загрузке подменяется на другой, более декоративный и/или динамичный. Например, у вас может быть компонент который превратит «ul» список в подобие дерева каталогов в системе, со своим поведением, видом, свертыванием и развертыванием веток. Реализация только линий, соединяющих папки одного уровня, вылилась бы в гигантскую несемантичную таблицу.
      Создавая свой JS-компонент (например editbox с выпадающим списком подсказок), вы сначала придумаете семантичный способ записать его в HTML, а уж затем над тем как вдохнуть другую жизнь с помощью JS. Это удобно, с точки зрения реюза вашего js-компонента, ведь чем его проще подключить, тем он удобнее.

      Магия подключения или «легким движением руки брюки превращаются в элегантные шорты»
      Поняв прнципы unobtrusive javascript, вы начинаете строить интерфейс так: сначала максимально семантичный HTML, затем оформление с CSS, затем (после загрузки страницы) трансформация HTML кода из семантичного в «продвинутый». В итоге, изначально в HTML не содержится ничего зависящего от javascipt, а все, что от него зависит, им же в нужные места и добавляется. Вам всего лишь понадобится включить лишнюю библиотеку тэгом «script» да указать на элементы которые нужно «оживлять».

      Способ «а попробуй без JS» позволяет делать много чего корректней и проще
      На сегодня яваскрипт настолько развит, что уже не нуждается ни в «form» (для post), ни в «a» (для get) чтобы общаться с сервером. Это ставит под сомнение необходимость использовать традиционные методы взаимодействия приложения с сервером (учитывая еще что AJAX делает это быстрее и экономнее). Но выигрывая в скорости вы жертвовуете простотой, ведь AJAX непросто отдебажить, по сравнению со стандартными post/get запросами. Вам потребуются эксперты в JS чтобы сделать действительно грамотную оптимизацию. Было бы только что оптимизировать (обратите внимание, что даже такие трафиковые гиганты как google.com и baidu.com не экономят на этом).

      «а попробуй без JS» позволяет делать много чего юзабильней
      Причем юзабильнее даже для тех у кого js включен. Например псевдоссылки («а href="#" onclick=...», ну или хуже того «div onclick=...») имеют больше неудобств, чем кажется на первый взгляд. Даже с точки зрения пользователя с включенным JS, такие ссылки невозможно открыть в новой вкладке, «на потом». И это только один из примеров, когда яваскрипт мешает там, где без него можно было бы и вовсе обойтись.

      Используй будущие стандарты уже сегодня.
      Вы легко сможете реализовать поддержку нужного вам стандарта, который еще не успели реализовать большинство браузеров (будь то CSS3, HTML5, XHTML2, Web Forms 2.0). Когда придет время и они станут популярны, вам не придется менять ничего в коде, только убрать подключение яваскрипта (а хорошо написанный можно даже и оставить на всякий случай, т.к. он не будет конфликтовать с браузером уже поддерживающим этот стандарт). Также вы (а точнее самые «назаконсервированные» из вас) можете придумать/реализовать свой стандарт/дополнение к HTML (новые тэги, аттрибуты, поведение, оформление) — будущее HTML в ваших руках.

      Облегчает тестирование с Selenium и другими утилитами.
      Потому что в HTML для почти всего нужного (кликабельного) уже магически находится идентификатор по которому можно просто и понятно определить элемент. Даже если тест однажды поломается (не сможет найти какую-то кнопку, нужную чтобы продолжить тест), вы без труда почините тест: легче найти где теперь «button.home» чем искать то, что до рефакторинга идентифицировывалось как "//div[1]/table/tr[5]/td[1]/button"

      Паукам и прочим роботам проще, если по сайту можно передвигаться не используя JS-модуль.
      Несложно будет написать ваш собственный робот, который каждое утро станет проверять что все страницы на пути к целевой странице, не содержат никаких PHP/MySQL fatal error. А представьте как усложнится задача, если, например, некие главные куки сохранялись бы через js.

      Приложение закончит операцию (хоть как-то) даже если в JS вдруг выскочила ошибка.
      Например если ссылка должна была открыться в попапе, но случилась JS ошибка, то она откроется в текущем окне, и пользователь сумеет ее прочитать. В противном случае пользователь не увидит ничего, а вы не сможете узнать про это, пока кто-то сильно заинтересованый (или просто добрый) не сообщит о ней.
      Кстати, так было всегда: при нажатии на кнопку форма сабмитилась если происходили js ошибки (и, разумеется, если кнопка находилась внутри формы). Просто некоторые мастера могли позволить себе делать кнопку вне формы (с кодом типа onclick=«myform.submit()»). Вы можете продолжать быть уверены что у большинства пользователей JS включен, но стоит ли пренебрегать самыми простыми принципами HTML?

      Ваше приложение сможет работать при отключенном JS.
      Ну и плавно, от предыдущего пункта перенесемся к принципу graceful degradation, который в данном подходе позволяет вывести хоть что-то тому, кто хочет просмотреть хоть как-то.
      Если вам надоело это слышать, и вы не считаете это важным — то и не воспринимайте этот пункт всерьез. Просто это единственная «внешняя» выгода, понятная топ-менеджменту и другим нетехническим людям. Как видите, подход дает много больше, а возможность работы при выключенном JS можно воспринимать просто как приятный бонус.
      Подводя итоги подчеркну, что unobtrusive javascript нужен прежде всего для разработчика, во вторую — для команды разработчиков, в третью — для семантики, и лишь потом уже для того малого количества пользователей, у которых выключен/запрещен/отсутствует яваскрипт. Не отказывайтесь от этого подхода только потому, что вы убедили себя что он придуман ради удовлетворения этих, на ваш взляд, мифических 3% пользователей. Нет, он придуман для минимизации (вплоть до полного устранения) зависимости от JavaScript, пускай это и звучит практически одинаково. А согласно неписаному правилу: чем меньше у системы зависимостей (читай: технических ограничений), тем она проще, гибче и стабильнее. Что в свою очередь выливается в удобное тестирование и рефакторинг, быстрое обучение разработчиков, легкое сопровождение и изменяемость, расширяемость.

      Всем, кто желает освоить этот подход, хотел бы порекомендовать начать с jQuery. В результате заложенной в него идеологии, практически каждый плагин под этот мини-фреймворк может служить хорошим примером реализации unobtrusive javascript. Взгляните сами: Input Hint, UI tabs, Dialog, Multiple File Upload, Custom Checkbox, Gallery, Tree from ul, Table sort, Faviconize, Modal Previee, Reflect, HTML truncator, Tag Suggest и т.п.

    Похожие публикации

    Средняя зарплата в IT

    113 000 ₽/мес.
    Средняя зарплата по всем IT-специализациям на основании 5 253 анкет, за 2-ое пол. 2020 года Узнать свою зарплату
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 28

      0
      Ссылка вначале статьи не работает.
        0
        Не могу поправить, такое впечатление что движок хабра подменяет символы "c" и "p" в слове javascript на кириллические.
          0
          Не, нашел таки способ его обмануть.. А вообще какой-то совковый подход к секьюрности.
            0
            попробуйте b23.ru
            0
            именно так, я решил редиректом на сервере: javas-cript -> javascript
          0
          по 6-му пункту не согласен, что толку решать задачу под FF3 + Opera 9.x , если она к примеру не работает под абсолютное большинство IE 6 + 7?
            0
            Если 6й - это "Используй будущие стандарты уже сегодня.", то задачу там ставите вы сами, и количество поддерживаемых браузеров тоже на ваше усмотрение. Полтора года назад я чисто для интереса реализовал большую половину Web Forms 2.0, работало в IE, FF и не конфликтовало с Opera (где эта поддержка уже на браузерном уровне). Потому что я хотел чтобы это работало в этих трех как минимум.
              0
              вы говорите
              Используй будущие стандарты уже сегодня.
              Вы легко сможете реализовать поддержку нужного вам стандарта, который еще не успели реализовать большинство браузеров (будь то CSS3, HTML5

              я знаком со спецификацией CSS3 и с радостью пользовался если бы была поддержка основных браузеров, а так... увы
                0
                1. Добавляешь элементам любое новшество из CSS3 (что там тебе нужно?), например, "box-shadow".
                2. цепляешь к DOMContentLoaded код, который пройдется по DOM и найдет все элементы на которые распространяется это свойство и путем нехитрых трансформаций того же DOM эмулирует для них тень.
                3. goto 1.

                Это и имеется в виду, необязательно ждать, можно уже использовать.
                  0
                  реализация подобных вещей при помощи js - это через Ж, уж извините. Сам прекрасно знаком с jquery, пользоваться css селекторами по версии css3 - одно удовольствие(зебру по таблице сделать к примеру), а вот использовать применение классов в css через навешивание - это абсолютно не решение(мухи должны быть отдельно - котлеты отдельно).
                    0
                    Для вас это будет прозрачно, не все ли равно? Как только все браузеры перейдут на CSS3 вы просто отключите лишний скрипт, а не будете переверстывать ваши сайты. А aльтернатива: продолжать лелеять CSS3 в мечтах и хныкать что IE очень долго реализует стандарты, что он 80% рынка, что надежды популяризировать CSS3 нет.
                      0
                      это будет не прозрачно, а через навешивание - нет, мне не все равно.
                      А альтернатива - решать задачу без js в дизайне.

                      Что касается примера ниже - я в курсе этого решения, но мне такой обходной подход не по душе. Или вы им во всю пользуетесь?
                  0
                  А вот подобие реализации border-radius. Правда не такое идейное, но также ненавязчивое.
              +2
              Саму идею я всецело поддерживаю, а вот статья больно водянистая получилась. Последние 7 пунктов по сути содержат повторение одной и той же мысли с разных боков: всё будет работать без js и это есть несомненное благо.
                –2
                В целом согласен, что 10м можно было бы накрыть 8й и 9й, но преимущества сгруппированы по степени важности. Логика такая: 10й пункт встречается очень редко, 9й чаще, 8й еще чаще и т.п (имхо конечно). Например, может быть 10 для вас сейчас перебор, но 9й все же критичен.
                0
                Полностью диаметральная точка зрения, ребята из http://www.qooxdoo.org предлагают по сути отказаться от html и CSS, нет они конечно присутствуют но основное вокруг чего все вращается это JavaScript. Вы разрабатываете полностью приложение используя только JavaScript, единственное что вам понадобиться из html это создать index.html где нужно прикрутить скрипты и все. Более того эти ребята Вам дают целую платформу на базе которой можно писать мегафункциональные приложения. Там же есть online демки, http://www.qooxdoo.org
                  0
                  а как оно тормозит....
                  Javascript по своему определению не приспособлен для такого, только в связке с html.
                    –2
                    Я незнаю на какой машине Вы смотрели но проверял на Celeron 1GHz было нормально. Кроме того сегодня машины меньше чем 2GHz уже антиквариат. Мое мнение на клиентской стороне будущее именно за JavaScript.
                      0
                      >>меньше чем 2GHz уже антиквариат
                      во первых - их все равно нужно учесть, а во-вторых - как же процессоры по 1.6 x 2 - до сих пор гребут как пирожки, а скриптом оба ядра заниматься одновременно не могут ;)
                        –1
                        Это все конечно хорошо. Но Сегодня начинать задвигать JavaScript на последний план, когда каждую минуту предлагается множество решений на его базе, язык развивается, на хабре даже статей больше появляется посвященных JavaScrip чем Flash. Сколько приложений приносящих !реальную! !практическую! ценность делается с использованием JavaScript это и web-based office (документы, таблицы, презентации), почтовые клиенты на которые постепенно переходит основная масса пользователей и уже обратно никогда не вернутся, карты (google maps c возможностью разработки виджетов для них и отдельных приложений на базе Maps API), социальные сети (без использования скрипт языка понятие платформы так и не появилось бы), именно открыв API для разработки приложений Facebook вернул еще больший интерес к сети в результате стоимость компании поднялась с 700 млн. до 15 млрд долларов. Да Unobtrusive JavaScript занял свою нишу, но это направление не станет основным. Зачем пользователей возвращать в 2000 год, если наоборот нужно двигаться вперед.
                          +1
                          Никто никуда не задвигает JavaScript. Вы похожи на восторженного «флешиста» образца 1999 года: «А давайте весь сайт на флеше сделаем!» В том-то и прелесть JavaScript, что его можно использовать ненавязчиво. Qooxdoo и GWT — это опъянение от возможностей. Да можно весь сайт сделать на чистом JS, стóит ли?
                          Помню кто-то уже говорил что скоро не будет ни театров, ни кино — одно сплошное телевидение. :)
                  0
                  я бы ограничилса 1-3 и 10м пунктами. на счет использования будующих стандартов...хых...они на то и будущие чтобы их в будующем использовать:) хто ж его знает как они поменяются к моменту этого будующего. за сим как-то досконально следовать тому чего "еще нет" по-моему не стоит
                    0
                    Очень правильная статья. Это - стандарт хорошего кода.
                      0
                      Молодец, спасибо. :) Дело UJS живет и процветает.
                        0
                        зато просмотр кода страницы ничего уже не даст, если функционал добавляется вот так динамически — придётся использовать какие-то специальные тулзы…
                          0
                          Сгенерированный cурс показывает FF (не помню, может и из коробки, но с Firebug точно).
                          Но все равно, немного затруднительно, да. Плата за семантичный HTML, однако.
                          • НЛО прилетело и опубликовало эту надпись здесь
                            0
                            Трендец, за статью получил только 2 пендюля в карму. Интересно, чем же это я кому помешал тем, что расшарил немного знаний? :(

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

                            Самое читаемое