Рік без JQuery

Я приєднався до сайту We Are Colony влітку 2014 року. Через півроку ми підійшли до тієї точки в розробці, коли нам потрібно було додати кілька великих функцій і переосмислити основні частини дизайну нашої платформи. У мене було два варіанти: або переписати весь мій новий код, або почати все заново. Я вибрав останнє, що дозволило внести кілька великих змін у front-end стек та його залежності – однією із залежностей, від якої я відмовився, був JQuery. Я викинув його у 2014 році.

За 18 місяців отримані мною уроки в процесі створення UI без JQuery виявилися дуже цінними, і я хочу поділитися з вами деякими з них у цій статті. Але насправді написати цю статтю мене спонукав доповідь «Як не використовувати JQuery» із нещодавньої зустрічі front-end London, де був і я. Зустріч була досить інформативною, і особливу увагу на ній приділили одній неправильній концепції, яку я почув від кількох людей незадовго до зустрічі – що ES6 врятує нас від JQuery (відразу після лікування раку та перемоги над світовою бідністю). Я відразу ж згадав, як нещодавно я розмовляв з другом розробником, який казав мені, що його команда чекає не дочекається позбутися JQuery «як тільки ES6 стане більш поширеним».

«Особливу увагу на ній приділили одній неправильній концепції… що ES6 врятує нас від JQuery»

JQuery

Ви можете спитати, а навіщо взагалі відмовлятися від JQuery? По-перше, це перевантаження програми та час завантаження (особливо на слабких пристроях та повільних з'єднаннях); по-друге, продуктивність UI та адаптивність (знову ж таки на слабких пристроях); і останнє, рятування від непотрібної абстракції, що дозволить вам краще зрозуміти принцип DOM, браузер та його API.

Якщо й була хоч одна причина залишити JQuery,то, можливо, це підтримка IE8, однак я сподіваюся, всі погодяться, що ці часи благополучно минули (а якщо це для вас не така й причина, то ви мені вже подобаєтеся). У IE8 не було браузерного DOM API, яке тепер і допомогло нам позбутися JQuery; речі типу Element.querySelectorAll(), Element.matches(), Element.nextElementSibling та Element.addEventListener() тепер є у всіх браузерах.

У IE9 і вище все ще залишаються проблеми, проте дані браузери більш-менш передбачувані в питанні «основного» DOM API, як я його називаю, який потрібний для написання додатків з важким UI без використання JQuery і без підключення незліченної кількості поліфілів та бібліотек (до жаль з одним винятком - Element.classList в IE9).

Тим не менш, ніхто не заперечуватиме, що разом з JQuery йде цілий набір корисних функцій, а також інструментів для таких речей, як Ajax та анімація. І в цей момент стає цікаво, що включити у свій front-end набір, а що ні.

Хелпер функції

Я зрозумів, що, відмовившись від JQuery, мені випала чудова нагода самому написати парочку хелпер функцій і трохи більше вивчити браузери та DOM. Це був найцінніший урок для мене. Статичний клас хелпер методів (я називаю його "h") охоплює такі базові речі, як запит дочірніх або батьківських елементів, розширення об'єктів і навіть Ajax, а також безліч інших речей, що не належать до DOM.

Може здатися, що це спроба переписати JQuery, проте мета була зовсім іншою. Ця невелика колекція зручних хелпер-методів є лише крихітною частиною всього функціоналу JQuery без можливості обертати елементи в контейнери або зайву абстрактність. Насправді нативні браузерні API дозволяють нам взаємодіяти з DOM без підключенняJQuery, а ці функції заповнюють ті невеликі перепустки, які були, коли я тільки почав проект. Нижче представлені кілька тих хелпер функцій. Ті, які я вважав потрібними та цікавими для навчання. Я не став їх записувати в такому форматі, щоб будь-хто зміг їх скопіювати до себе в проект – вони вам, швидше за все, навіть не потрібні. Я показав ці функції, щоб проілюструвати, наскільки легко можна вирішити проблему обходу DOM за допомогою вищезгаданих API.