Alpine.js - kilka słów o nowym frameworku

Ten wpis poświęcony będzie AlpineJs. Jest to nowy minimalistyczny framework JSa. Projekt ten jest bardzo młody (początek prac w listopadzie 2019) i bardzo szybko zyskuje popularność (w momencie, w którym to piszę 3.7k gwiazdek na githubie - miesiąc temu było ich 200, jeśli dobrze pamiętam).

A rugged, minimal framework for composing JavaScript behavior in your markup.

Alpine oferuje reaktywną i deklaratywną naturę znaną nam z Vue czy Reacta przy minimalnym koszcie - zapewnia twórca frameworka Caleb Porzio. Czym więc Alpine wyróżnia się na tle Vue czy Reacta? Według mnie główną zaletą jest możliwość zastosowania Alpine w aplikacjach SSR - chodzi tu o aplikacje stworzone we frameworkach typu Django czy Laravel, gdzie możemy wyrenderować template z danymi z serwera, a do manipulacji naszym UI możemy użyć tylko czystego JSa. Alpine.js ułatwia nam w takich przypadkach budowanie UI. Składnia zapożyczona z Vue, możliwość tworzenia mikro komponentów oraz deklaratywność sprawiają, że tworzenie takich elementów jak modale, dropdowny czy slidery jest o wiele przyjemniejsze w porównaniu do zwykłego JS. Ponadto nowy framework jest świetny do mniejszych projektów - będąc jednocześnie niezbyt dobrym wyborem do projektów większych, a to głównie dzięki temu, że Alpine używamy na pliku html i cały kontekst naszych działań ogranicza się do tego pliku. Nie możemy rozdzielić więc logiki na mniejsze części co oznacza, że w większych projektach może być ciężko z odnalezieniem się w kodzie.

Syntax

Na ten moment framework oferuje nam 13 dyrektyw oraz 5 właściwości. Wszystkie dyrektywy zaczynają się od literki ‘x’, a samo repozytorium przez chwilę nosiło nazwę ‘Project X’ - mamy podobieństwo do Vue czy Angulara, natomiast twórca zapewnia, że pierwotna nazwa frameworka nie miała nic wspólnego z filmem o tej samej nazwie.

Mam wrażenie, że Alpine pozwala na bardzo dużo i wypełnia pewną lukę jeśli chodzi o frameworki JSa (“nikt o to nie prosił, każdy potrzebował”). Framework na pewno jeszcze pojawi się na blogu, może tym razem już w akcji.

Przydatne linki

Repozytorium Alpine

Rozmowa z twórcą

Alpine Toolbox - zbiór wartych uwagi materiałów o Alpine.js