Introduction to Alpine.js

Alpine.js - TLDR

• A simple JS framework
  • 15 attributes
  • 6 properties
  • 2 methods
  • 36kb minified, 13kb min+gz
• Dynamically render data in HTML
• Bind data and form fields
• Easily handle events

Alpine.js - TLDR

• https://alpinejs.dev
• Initial release: November 2019
• Version 3.13.7
• Created by Caleb Porzio

Alpine.js - TLDR

• Vue "like"! 😀 & 🚩
• Great for progressive enhancement
• Not for "apps"
• 🧂

Let's Go!

Step One

<script defer 
src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
				

Step Two

Figure out "your area of concern"

    



<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
				

Step Three

x-data

• Let's you define variables
• Let's you implement event handlers
• Let's you listen for Alpine initialization
• Let's you define ad hoc methods
• You *can* do everything here

Render Data

• x-text
• x-html

	My name is  and 
	I'm  years old.

				

See the Pen Alpine Preso 1 by Raymond Camden (@cfjedimaster) on CodePen.

Conditionals

• x-show (hides/unhides from DOM)
• x-if (adds/removes from DOM)
• x-if must use <template> and have one root element.

	My name is .


	

		Hi Ray!
	

	

				

See the Pen Alpine Preso 2 by Raymond Camden (@cfjedimaster) on CodePen.

Attribute Binding

• x-bind
• x-bind:something="someval"
• :something="someval"

See the Pen Alpine Preso Attr by Raymond Camden (@cfjedimaster) on CodePen.

Looping

• x-for
• Can get an index too
• Must use <template> with one root element
• :key if you will be re-ordering (attribute binding)

See the Pen Alpine Preso 2 by Raymond Camden (@cfjedimaster) on CodePen.

See the Pen Alpine Preso 4 by Raymond Camden (@cfjedimaster) on CodePen.

Form Binding

• x-model
• Works on all form fields^*
• Supports modifiers (for ex, .number)

	

		Your name is 
		Your new name is 
	

				

See the Pen Alpine Preso 5 by Raymond Camden (@cfjedimaster) on CodePen.

See the Pen Alpine Preso 5 by Raymond Camden (@cfjedimaster) on CodePen.

Getters

• Use a function that makes use of this scoped variables
• Alpine will recognize when changed
• JavaScript get modifier is not required.

	

	

		First Name: 

		Last Name: 

	

				

See the Pen Alpine Preso 6 by Raymond Camden (@cfjedimaster) on CodePen.

Events

• x-on
• <button x-on:click="someFunc">
• <button @click="someFunc">
• Modifiers: Specific keys, prevent default, etc
• <button @click.prevent="someFunc">

	
	Upper Case

				

See the Pen Alpine Preso 7 by Raymond Camden (@cfjedimaster) on CodePen.

This is cool...

JavaScript in HTML???

Photo credit: Aqua Mechanical

Moving JavaScript to JavaScript!

• Listen for alpine:init event...
• Alpine.data(' name of app... ')

	
	Upper Case


				

See the Pen Alpine Preso 8 by Raymond Camden (@cfjedimaster) on CodePen.

Lifecycle

• init or x-init
• $watch or x-effect
  • $watch('someData', (value, oldValue) => { .... })
  • x-effect="doSomething(someData)"
• alpine:init
• alpine:initialized

document.addEventListener('alpine:init', () => {
	Alpine.data('myApp', () => ({
		async init() {
			let resp = await fetch('some cat api url');
			let data = await resp.json();
			this.cats = data.cats;
		},
		cats:[]
	}))
})
				

See the Pen Alpine Preso 9 by Raymond Camden (@cfjedimaster) on CodePen.

Magics

(their term, not mine, but I 💖 it)

• $el -> Current DOM element
• $refs -> Associates with x-ref DOM element
• $dispatch -> Shortcut for event dispatching
• $nextTick -> Runs after Alpine does reactive stuff
• $root -> Pointer to top level DOM of app
• $data -> Top level of Alpine data
• $id -> Generate unique IDs

See the Pen Alpine Preso 3 by Raymond Camden (@cfjedimaster) on CodePen.

See the Pen Image Preview in Alpine.js by Raymond Camden (@cfjedimaster) on CodePen.

Resources

• Main site: https://alpinejs.dev/
• Discord: https://alpinejs.codewithhugo.com/chat/
• Twitter: @Alpine_JS
• Preso CodePen samples
• My posts: raymondcamden.com/tags/alpinejs

Stuff I didn't cover...

• x-transition - Docs
• Plugins
• Extending
• Docs

Questions?