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 пра­цює і в зво­ро­тньо­му напрям­ку, пере­но­ся­чи зна­че­н­ня змін­ної в інпут. Це дуже зру­чно, коли тре­ба мати спра­ву зі скла­дни­ми формами.

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

Edit fiddle - JSFiddle - Code Playground jsfiddle.net

У чита­ча може вини­кну­ти пита­н­ня, що писа­ти інлайн-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.

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

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