點燈坊

失くすものさえない今が強くなるチャンスよ

Alpine Overview

Sam Xiao's Avatar 2022-02-10

Alpine is a lightweight framework for pure HTML pages. It is very small, and only 6kb is required. We can implement Alpine by TailwindCSS, Vue or Svelte style.

Version

Alpine 3.8

TailwindCSS

overview000

  • Use TailwindCSS style to implement the classical counter
  • JavaScript is integrated into HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/alpinejs" defer></script>
    <title>Alpine</title>
  </head>
  <body x-data="{ count: 0 }">
    <button @click="count++">+</button>
    <span x-text="count" />
  </body>
</html>

Line 6

<script src="https://unpkg.com/alpinejs" defer></script>

Just mount CDN on <script> :

  • defer : make Alpine execute after HTML content is parsed

Line 9

<body x-data="{ count: 0 }">

Define data in x-data directive.

Line 10

<button @click="count++">+</button>
  • Access data directly on @click
  • We don’t have to use this to access data

Line 11

<span x-text="count" />

Display data by x-text directive.

Vue

overview000

  • Use Vue style to implement the classical counter

  • JavaScript is separated from HTML. Data and function is encapsulated in Object

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/alpinejs" defer></script>
    <title>Alpine</title>
    <script>
      let counter = {
        count: 0,
        onClick() {
          this.count++;
        },
      };
    </script>
  </head>
  <body x-data="counter">
    <button @click="onClick">+</button>
    <span x-text="count" />
  </body>
</html>

Line 17

<body x-data="counter">
  • Data is not defined in x-data
  • Bind an Object to x-data directive

Line 9

let counter = {
  count: 0,
  onClick() {
    this.count++;
  },
};

Create counter Object by JavaScript :

  • count : define count state
  • onClick :
    • Define onClick event handler to increase count state
    • Use this to access data like Vue

Svelte

overview000

  • Use Svelte style to implement the classical counter

  • JavaScript is separated from HTML. Data is in HTML. Only Function is in JavaScript

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/alpinejs" defer></script>
    <title>Alpine</title>
    <script>
      let onClick = (x) => x.count++;
    </script>
  </head>
  <body x-data="{ count: 0 }">
    <button @click="onClick($data)">+</button>
    <span x-text="count" />
  </body>
</html>

Line 12

<body x-data="{ count: 0 }">
  <button @click="onClick($data)">+</button>
  <span x-text="count" />
</body>
  • Define data in x-data directive
  • Pass $data to onClick. $data is a proxy of data in x-data

Line 10

let onClick = (x) => x.count++;
  • Since $data is a proxy, we can use x.count to access count state
  • We don’t have to use this to access data so that we can use arrow function instead of function expression

Conclusion

  • Alpine was inspired by TailwindCSS; in fact, it was previously called TailwindCSS for JavaScript
  • There are many coding styles for Alpine :
    • TailwindCSS : just coding JavaScript on HTML like TailwindCSS. JavaScript is integrated with HTML
    • Vue : JavaScript is separated from HTML. Data and function is encapsulated in Object
    • Svelte : JavaScript is separated from HTML. Data is integrated with HTML, but function is written in JavaScript

Reference

Alpine, Installation

# Alpine