JellyBone. Замена jQuery для Backbone или 2kb для DOM манипуляций

Приветствую всех.

JellyBone ^[1] или просто jBone — микро библиотека (2кб gzipped) для работы с DOM в современных браузерах. Она частично имплементирует интерфейсы jQuery для основных методов необходимых для корректной работы Backbone, но может использоваться и независимо.

Проблема

jBone родился при решении конкретной задачи — разработки мобильного приложения. Основными требованиями были отзывчивость UI и скорость загрузки приложения. Очень скоро стало ясно, что почти половину всего кода у нас занимает jQuery, причем решались с помощью него очень простые задачи.

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

Поиски решения

Анализ показал, что есть уже готовые инструменты для решений этой задачи, но все они имеют недостатки. В начале я решил посмотреть на Zepto ^[2], около 40 кб, не так уж и мало, хоть и значительно меньше чем jQuery, к тому же он имеет существенные проблемы с производительностью проигрывая по перформансу в разы даже jQuery. Следующим шагом я попробовал собрать «свой jQuery» с помощью Ender ^[3], но полученный размер файла не вписывался в рамки моих ожиданий. Третьей попыткой стало желание получить Backbone без дополнительных библиотек для работы с DOM. Первым я нашел Backbone.Native ^[4]. Идея неплохая, но отказываться от удобных алиасов мне кажется неразумно, количество кода будет расти намного быстрее, и процесс написания кода будет не столь удобен. Намного интереснее выглядит этот пулл реквест ^[5], идея в том, чтобы сделать jQuery опциональным для тех, кому он нужен, для остальных есть возможность использовать нативные методы, как в Backbone.Native, но проблема удобства и скорости разработки остается.

Сжав зубы, я решил написать свой велосипед. Я поставил перед собой цель уложиться в один день. Прототип должен был обеспечить минимальную совместимость с jQuery и проходить все unit тесты для Backbone, больше времени тратить не хотел принципиально, это означало бы, что в итоге мы придем к тому же с чего начали, к jQuery.

Решение

Сейчас jBone это примерно 10кб несжатого кода, полностью покрытого тестами и обеспечивающий замену jQuery для Backbone.

Поговорим немного о реализации и отличиях от jQuery.

Selector engine

Это простой querySelector ^[6], с его преимуществами и недостатками ^[7], во первых это не sizzle ^[8] и не ждите от него полной совместимости с ним. Зато он быстрый, очень быстрый по сравнению с 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 есть огромное количество ^[9], как и реализаций стандарта Promises/A+, например when ^[10], Q ^[11], или simply-deferred ^[12]. Мне подошел последний, так как имеет наименьший вес, умеет «патчить» переменную $ и покрывает все возможности Deferred объекта реализованного в jQuery.

Итог

В итоге мы получили очень маленькую и шуструю абстракцию для DOM манипуляций, оставив при этом в большинстве случаев привычные jQuery интерфейсы.

Исходный код на guthub ^[1].
Документация ^[13]
API ^[14]

Автор: Upward

Источник ^[15]