Alpine.js – сильна альтернатива React/Vue та JQuery

Чому поряд стоять React, Vue та… JQuery? Досвідчений розробник знає, що JQuery і React/Vue це зовсім різні вагові категорії. Але Alpine.js вдалося посісти місце між ними. Розберемося як.

Коротко:

• Alpine.js має локальний стейт «компонента»,
• Має ефекти при зміні стейта,
• Має оператори для показу та схову DOM елементів, рендеру списків,
• Має розвинуту систему обробки подій,
• Розмір Alpine.js всього 6.4kb,
• Стейт працює як в Реакті/Vue,
• Стане в пригоді як заміна JQuery.

На даний момент фреймворк складається з 15 атрибутів, 6 властивостей і 2 методів.

Підключити можно так само як JQuery:

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@latest/dist/alpine.min.js"></script>

В Alpine.js все обертається навколо стейта, щоб створити стейт достатньо використати атрібут x-data:

<div x-data="{ count: 0 }"></div>

Тепер всі вкладені в div елементи отримают дотсуп до змінної count.

Зазвичай ми хочемо відрендерити це значення, для цього є атрібут x-text:

<div x-data="{ count: 0 }">
    <h1 x-text="count"></h1>
</div>

В середену тега h1 відрендериться 0. Змінити count можно через клік по кнопці +1 або -1:

<div x-data="{ count: 0 }">
    <h1 x-text="count"></h1>
    <button x-on:click="count = count + 1">+1</button>
    <button x-on:click="count = count - 1">-1</button>
</div>

Окрім x-on:click можно використовувати будь-які стандартні JS-події, або навіть не стандартизовані CustomEvent.

А як щодо работи з інпутами? Для цього є атрібут x-model, який переносить все що введено в інпуті в змінну:

<div x-data="{ count: 0 }">
    <h1 x-text="count"></h1>
    <button x-on:click="count = count + 1">+1</button>
    <button x-on:click="count = count - 1">-1</button>
    <input type="number" x-model="count" />
</div>

Атрібут x-model працює і в зворотньому напрямку, переносячи значення змінної в інпут. Це дуже зручно, коли треба мати справу зі складними формами.

Живий приклад як це працює:

У читача може виникнути питання, що писати інлайн-JS незручно, так ніхто не робить у сучасній розробці.

Як що до компонентів?

В Alpine.js компонент – це просто функція-конструктор, яка вертає обʼєкт-стейт:

window.counter = ({ initialCount }) => {
    return {
        count: initialCount,
        increase() {
            this.count++;
        },
        decrease() {
            this.count--;
        },
    };
};

В свою чергу в HTML буде така конструкція:

<div x-data="counter({ initialCount: 0 })">
    <h1 x-text="count"></h1>
    <button x-on:click="increase()">+1</button>
    <button x-on:click="descrease()">-1</button>
    <input type="number" x-model="count" />
</div>

Окрім стейту в Alpine.js є методи ініціалізації, деініціалізації та повноцінний доступ до DOM через спеціальні зміну $el, та доступ до вкладених елементів через x-ref:

<div x-data="{
    init() {
        console.log('Component inited: ', this.$el, this.$refs.h1);
    },
    destroy() {
        console.log('Component destroyed');
    },
}">
    <h1 x-ref="h1"></h1>
</div>

Треба зазначити, що ініціалізація компонентів взагалі не потребує втручання програміста, відбувається все на льоту, навіть якщо DOM вставляється через innerHTML. Це завдяки вбудованому в JS інтерфейсу MutationObserver.

На цьому я закінчу обзор, більше інформаціі у документації до Alpine.js. Далі я порівняю Alpine з найпопулярнішими бібліотеками:

Чим Alpine.js схож на JQuery, чим відрізняється

JQuery дуже стара бібліотека, яка проєктувалася з ціллю невілювати різницю між браузерами IE, Firefox, Chrome, Safari. Зараз ця ціль втратила актуальність, але розробники досі використовують JQuery тому що для неї написано багато UI компонентів та вона досі вшита у велику кількість проєктів.

Відрізняється Alpine.js від JQuery тим, що Alpine.js сфокусований на роботі через стейт, а JQuery на роботі з DOM на пряму. На JQuery треба писати багато коду який сильно залежить від DOM елементів, що робить код дуже не надійним, а стейт врешті решт все одно опиняється в DOM, але він меньш структурований.

Гарні новини, Alpine.js можно використовувати разом з JQuery. Це може вдихнути нове життя у ваш легасі.

Чим Alpine.js схож на React, чим відрізняється

React.js сфокусований на стейті, так само як і Алпайн. Головна відмінність – реакт працює через VirtualDOM і робота з DOM в реакті завжди мала статус виключення ніж правила.

Головним недоліком VirtualDOM є те що він будується з JS, тобто спочатку необхідно завантажити JS, побудувати VirtualDOM, а вже потім відрендерити сторінку. Це займає багато часу і при виникненні помилки, навіть мінорної – додаток падає. Звісно, є інструменти для вирішення цих проблем типу React Error Boundary, але це додатковий час на читання док та інтеграцію, який можно витратити на корисний функціонал.

Чим Alpine.js схож на Vue/Angular.js, чим відрізняється

Якщо ви помʼятаєте перші версії Vue та Angular.js, то вони були майже тим самим що і Alpine.js, але вони пішли по шляху ускладнення і перейшли в категорію де зараз конкурують з React.

Vue так само вміє обробляти атрібути в DOM і набор атрібутів навіть схожий. Тож Vue самий близький до Alpine.js за виключенням того, що Alpine.js більш легкий і має просту, інтуітивну документацію, з якою розбереться навіть новачок.

Висновок

Alpine.js має простий API з яким розбереться вчорашній студент. Ця ліба має щось від кожного з популярних фреймверків. На мою думку, Алпайн може 100% замінити JQuery. Він може скласти вагому конкуренцію Vue і у багатьох тривіальних випадках замінити React.

На додачу, фронтенд цього сайту використовує Алпайн.

Якщо у вас виникли питання, то задавайте їх в коментарях – з радістю поділюся своїм досвідом!