Давненько не писал ничего от себя, а тут как раз и повод подвернулся. Поэтому напишу, что называется, по горячим следам, а окончание «Избегайте Ненужных Программных Абстракций» выйдет завтра.
Мы все люди и все мы совершаем ошибки. Ошибки программистов могут быть не такими критичными, как ошибки врачей или архитекторов. От наших ошибок не умирают люди и не рушатся здания (обычно, по крайней мере). Ошибки программистов чаще всего просто стоят компаниям определённой суммы денег.
Однако есть ещё один вид очень обидных ошибок. Когда выбираешь не тот путь решения. В результате тратишь кучу времени и сил, добиваешься результата, чувствуешь заряд бодрости и удовлетворения от работы, а потом оказывается, что все усилия были напрасны.
Как многие из подписчиков знают, я фулстек. И иногда вожусь с UI, что в принципе мне даже нравится. Знаю, что многие дотнетчики бэкендеры люто ненавидят JS и CSS, но разговор пойдёт об этом, так что потерпите. Обещаю, никакой жести не будет.
Нужно нам было создать систему оценок. И задумали мы для выставления оценки вместо использовавшегося раньше обычного скучного выпадающего списка, сделать красивый ползунок. Тащишь его слева направо, оценка меняется от 0 до 5. Никаких новомодных фреймворков мы не используем, у нас старый добрый набор HTML+CSS+jQuery. Собственно, и ползунок взяли из jQuery UI. Проблема обнаружилась на мобильных устройствах. Очевидное для каждого действие тыкнуть в ползунок и протащить его пальцем до нужной оценки отказывалось работать. То есть мышкой его можно было таскать, а вот пальцем (или в эмуляторе) – нет.
В итоге к концу для, после настройки основного функционала, погуглив проблему, нашли небольшой плагин для jQuery, который, насколько я понял, и служил костылём для предоставления функционала «Touch & Drag/Drop» в jQuery UI. На следующий день я открыл страницу проекта на GitHub (который, кстати, давно был заброшен), выполнил все нужные действия из 3х простых шагов, два из которых – скачать файл с кодом и подключить его на странице. И – вуаля! – получаю ошибку JS “
draggable() is not a function”.Заметил, что плагин основан на нескольких пакетах из сборки jQuery UI. Поискал
draggable в нашей кастомной сборке, и её там не оказалось. Поэтому скачал новую сборку, где всё должно было быть. И ползунок заработал! Правда сломался остальной код JS, причём сразу в нескольких неожиданных местах.Промучившись с этим около часа, стал искать другие варианты. Нашёл. Есть же специально обученный HTML элемент
<input type=”range” /> Проблема в том, что он в разных браузерах выглядит совершенно по-разному. Но и это не беда. Всего какой-то сотней строчек CSS можно было заставить элемент выглядеть так, как тебе надо.В общем, на всю эту настройку, проверку во всех доступных браузерах, включая IE (не спрашивайте!), переписывание уже готового кода разметки и JS под использование нового элемента и т.п. ушла бОльшая часть дня. Но к приходу коллеги вечером, всё было готово, и выглядело даже почти так же, как изначально одобренный вариант UI. Я молодец! Я решил проблему!
Коллега удивился, что плагин не заработал. Но ещё больше удивился я (хотя, «удивился» тут слишком мягкое слово), когда коллега написал, что у него плагин заработал сразу, и он откатит мои изменения. После пары минут шока я решил разобраться, в чём же дело. И довольно скоро выяснил, что эту самую функцию
draggable вообще не надо было вызывать! В шаге 3 на странице документации был пример кода, использующий эту функцию. Но элементы из jQuery UI работали и без неё. Только подключения плагина на страницу было достаточно! Причём всё прекрасно работало сразу и везде, включая эмулятор и реальный телефон. Дел было на 2 минуты в ленивом темпе!Конечно, в глазах коллеги, я, наверное, выглядел полным идиотом, которому нельзя доверить даже элементарную операцию. Поэтому я, как мог, попытался объяснить, как же это меня так переклинило, и почему я потратил целый день впустую. Он вроде даже понял (по переписке трудно судить). Но если уж под какой случай и подходит определение эпик фейл, то это был он.