Alpine.js: the outsider Javascript framework

Alpine.js ti offre la natura reattiva e dichiarativa di grandi framework come Vue o React a un costo molto inferiore. La sua forza sta nella facilità di manipolazione del DOM (document object model).
Alpine.js non prevede alcun build step e fornisce tutti gli strumenti necessari per creare un'interfaccia utente di base.

1. PRIMARY
#2D3442
SECONDARY
#F90032
TERTIARY
#F3F3F3
use for text creation and items such as shapes and forms only use shapes and background items
delete this slide after read or if you don't need it

2. the outsider javascript framework

3. Claudio Bisconti

Principal Engineer @ MotorK

Technologyfanatic
Appleaddicted
Alpine.js
Tailwind%20CSS
lover
Vue.js
React
Laravel
expert
WordPressunfortunately expert

4. Alpine.js

Simple.
Lightweight.
Powerful as hell.

5. Alpine.js

The origins

6. State (JavaScript data that Alpine watches for changes)
How alpine.js work?
<section x-data="{ open: false }">
<button @click.prevent="open = !open">
Toggle button
</button>

<div x-show="open" x-cloak x-data="{ label: 'Content:' } ">
<span x-text="label"></span>

<p x-ignore>
Whathever you write here is ignored by Alpine.js lifecycle
</p>
</div>
</section>

7. Alpine is a collection of
●18 attributes
●9 magic properties
●3 global methods

Let’s check the docs together
Documentation
Documentation showcase

8. Official must to use plugins
Feature name NPM package name Alpine feature
intersection observer @alpinejs/intersect x-intersect
persist @alpinejs/persist
Save the Alpine.Store into the
localStorage
focus @alpinejs/focus x-trap
collapse @alpinejs/collapse x-collapse

9. Adding a new “Component”
window.myTabs = () => ({
selectedTab: 0,
setTabIndex: (i) => {
this.selectedTab = i
},
init: (i = 0) => {
this.setTabIndex(i)
}
})


<section x-data="myTabs(4)" x-init="init(2)">
<div class="tabs-header">
<button class="tab" @click="setTabIndex(0)">
…
</div>

<div class="tabs-content">
<div class="tab-0" x-show="selectedTab == 0">
...
</div>
...
</div>
</section>

10. Adding a new “Component”
const myTabs = () => ({
selectedTab: 0,
setTabIndex: (i) => {
this.selectedTab = i
},
init: (i = 0) => {
this.setTabIndex(i)
}
})

Alpine.directive(‘tabs’, myTabs);
<section x-tabs x-init="init(2)">
<div class="tabs-header">
<button class="tab" @click="setTabIndex(0)">
…
</div>

<div class="tabs-content">
<div class="tab-0" x-show="selectedTab == 0">
...
</div>
...
</div>
</section>

11. Adding a new “magic” component
Alpine.magic('clipboard', () => {
return subject => navigator.clipboard.writeText(subject)
})

// HTML usage

<button @click="$clipboard('hello world')">
Copy "Hello World"
</button>

12. Using in a ES6 context
import Alpine from 'alpinejs'

// Optional
window.Alpine = Alpine

// Register plugins and custom features
Alpine.start()

13. When you add HTML into the DOM,
all the Alpine.js components
will be automatically initialized
Surprised by the MutationObserver

14. Since Alpine it works directly into the HTML without bundlers…
You can use it also in production without hacks.

https://chrome.google.com/webstore/detail/alpinejs-devtools/fopaemeedckajflibkpifppcankfmbhk
Devtools

15. Livewire is a full-stack framework
for Laravel that makes building
dynamic front-ends as simple as
writing vanilla PHP (literally).

16. How we changed frontend
approach with alpine.js

19. We added the x-defer directive to Alpine
Dynamic modules
window.components = window.components || [];
window.components.push = function (obj) {
window.components[window.components.length] = obj;
loadModule(obj);
}

window.components.forEach(obj => loadModule(obj));

20. Alpine.js

Conclusions

21. Pro
●No bundlers needed
●Easy to use
●Near to Vue syntax
●It simplify the work on
small projects
Cons
●No SPA/Routing support
●It requires discipline
(to avoid spaghetti code)
●Is not a magic wand
Pro and cons table

22. That’s all.
Questions?

23. Software developer
Claudio Bisconti
[email protected]