Приветствую всех.
JellyBone или просто jBone — микро библиотека (2кб gzipped) для работы с DOM в современных браузерах. Она частично имплементирует интерфейсы jQuery для основных методов необходимых для корректной работы Backbone, но может использоваться и независимо.
Проблема
jBone родился при решении конкретной задачи — разработки мобильного приложения. Основными требованиями были отзывчивость UI и скорость загрузки приложения. Очень скоро стало ясно, что почти половину всего кода у нас занимает jQuery, причем решались с помощью него очень простые задачи.
Было принято решение отказаться от jQuery. Я действительно люблю его, за интуитивно понятные интерфейсы и кроссбраузерность. Интерфейсы хотелось бы оставить, но полная кроссбраузреность была не нужна, и я знал, что для имплементации подобной функциональности нужно намного меньше кода. К тому же можно получить хороший скачек в производительность, используя современные возможности браузера вместо методов jQuery.
Поиски решения
Анализ показал, что есть уже готовые инструменты для решений этой задачи, но все они имеют недостатки. В начале я решил посмотреть на Zepto, около 40 кб, не так уж и мало, хоть и значительно меньше чем jQuery, к тому же он имеет существенные проблемы с производительностью проигрывая по перформансу в разы даже jQuery. Следующим шагом я попробовал собрать «свой jQuery» с помощью Ender, но полученный размер файла не вписывался в рамки моих ожиданий. Третьей попыткой стало желание получить Backbone без дополнительных библиотек для работы с DOM. Первым я нашел Backbone.Native. Идея неплохая, но отказываться от удобных алиасов мне кажется неразумно, количество кода будет расти намного быстрее, и процесс написания кода будет не столь удобен. Намного интереснее выглядит этот пулл реквест, идея в том, чтобы сделать jQuery опциональным для тех, кому он нужен, для остальных есть возможность использовать нативные методы, как в Backbone.Native, но проблема удобства и скорости разработки остается.
Сжав зубы, я решил написать свой велосипед. Я поставил перед собой цель уложиться в один день. Прототип должен был обеспечить минимальную совместимость с jQuery и проходить все unit тесты для Backbone, больше времени тратить не хотел принципиально, это означало бы, что в итоге мы придем к тому же с чего начали, к jQuery.
Решение
Сейчас jBone это примерно 10кб несжатого кода, полностью покрытого тестами и обеспечивающий замену jQuery для Backbone.
Поговорим немного о реализации и отличиях от jQuery.
Selector engine
Это простой querySelector, с его преимуществами и недостатками, во первых это не sizzle и не ждите от него полной совместимости с ним. Зато он быстрый, очень быстрый по сравнению с jQuery.
Events
Главное отличие в том, что вам придется работать с нативными событиями джаваскрипта, и это хорошо. Дело в том, что в jQuery почти полностью переписаны события. Например если добавить на элемент слушатель с помощью метода addEventListener, то событие не будет «всплывать», если нода не находится внутри документа, jQuery же решает эту «проблему», думаю из за этой «фичи» и вопросов обратной совместимостью, им еще очень долго не удастся перейти к полностью нативным эвентам. У jQuery есть свой объект Event, который имеет набор свойств отличный от стандартного, и так далее. Это все мелочи, но их нужно держать в голове.
CSS
В jBone метод css принимает свойства в camelCase стиле, то есть вместо border-color нужно писать borderColor.
Атрибуты, Анимации
Для работы с атрибутами в jBone нет практически ничего, потому что все что нужно есть в JavaScript.
Работа с атрибутами element.[setAttribute, hasAttribute, getAttribute, ...]
Работа с классами element.classList.add[remove, toggle, contains, ...]
Работа с data-атрибутами element.dataset
То же самое касается и анимаций, я считаю, что настало то время когда в очень многих задачах мы можем отказаться от анимаций на стороне JS и полностью отдать их в руки CSS, отделив логику приложения от представления.
AJAX, Deferred
Эта часть в библиотеке не покрыта совсем и оставлено право выбора. Реализаций AJAX'a есть огромное количество, как и реализаций стандарта Promises/A+, например when, Q, или simply-deferred. Мне подошел последний, так как имеет наименьший вес, умеет «патчить» переменную $ и покрывает все возможности Deferred объекта реализованного в jQuery.
Итог
В итоге мы получили очень маленькую и шуструю абстракцию для DOM манипуляций, оставив при этом в большинстве случаев привычные jQuery интерфейсы.
Исходный код на guthub.
Документация
API
Автор: Upward
