Как стать автором
Обновить

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

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

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 и т.п.
Теги:
Хабы:
+19
Комментарии 28
Комментарии Комментарии 28

Публикации

Истории

Работа

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн