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.
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
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).
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