初探 Alpine.js — Laravel 預設的前端框架從 Vue.js 改為使用 Alpine.js

本站的主題是商業，創業，美食，葡萄酒，閱讀，網路科技。

這是我的 FB粉專以及 IG，我比較常使用 Threads，歡迎大家追蹤互動~

這幾年到目前 (2021年5月) 為止，最受歡迎的 JavaScript framework 主要還是三大家：Angular, React, Vue.js。

Laravel 從 5.x 版開始用 Vue.js 當預設的前端框架，Laravel 5 的那一段時間，開發者數量成長很快，相信也間接推動了 Vue.js 的普及。

接下來 Laravel 6 和 7 是使用一個 laravel/ui 套件來建構前端，laravel/ui 建構時可以選擇 bootstrap, vue, react 三選一。納入更多選擇，也可以解讀為 Laravel 漸漸脫離 Vue.js 的相依性。

目前 (2021年5月) Laravel 8 則是用一個 laravel/breeze 套件來建構前端，laravel/breeze 預設是使用 Alpine.js，但也可以指定要用 vue 或 react。

所以可以看出來，從 Laravel 5 預設是 Vue.js，到 vue 只是一個選項，到 Laravel 8 預設使用 Alpine.js。就 Laravel 的態度而言，整個趨勢是從 Vue.js 轉到 Alpine.js。

本篇我們就來聊一下 Alpine.js

Alpine.js 是一個相對非常年輕的前端框架，1.0 版是 2019 年 12 月釋出。作者是 Caleb Porzio，他是 Laravel 開發者和 Laravel 框架本身的開發者。所以他當時也是用 Vue.js，後來才創作了 Laravel Livewire 及 Alpine.js。

因爲作者 Caleb Porzio 的背景是 Laravel 開發者，想要簡化前端的工作，所以 Alpine.js 的創作精神就是輕量、簡化。Alpine.js 的檔案size很小，安裝及使用簡單，不會因為簡單功能就需要寫一堆 JS code，更沒有編譯 TypeScript 等事情。

Alpine.js 官方網頁 https://github.com/alpinejs/alpine

Alpine.js 的使用首先用 x-data 宣告一個 component scope。x-data 裡宣告的變數，在這個 component scope 裡都能存取。

<div x-data="{ foo: 'bar' }">
...
</div>

用 x-text, x-html 可以將變數填入DOM。x-html 因為內容可以是 html，沒有 escape，所以使用者編輯的內容，不要使用 x-html

<span x-text="foo"></span>
<span x-html="foo"></span>

使用 x-on:[event] 可以設定 event handler，例如 x-on:click，也可以縮寫成 @click

<button x-on:click="foo = 'bar'"></button>
// 縮寫
<button @click="foo = 'bar'"></button>

使用 x-model 可以雙向綁定 DOM 上顯示的值和 component scope 裡變數的值

<input type="text" x-model="foo">

x-if 可以達成 if else 的功能，注意 x-if 需要搭配 <template> 使用。官方文件有說，因為 Alpine.js 不使用虛擬 DOM (virtual DOM)，而是使用真實的 DOM (real DOM)，使用 <template> 以達成輕量、簡化的效果。

另外注意 x-if 和 x-show 的差別，x-if 判斷式是 false 時，整個 DOM 都會拿掉。x-show 判斷式是 false 時，該 DOM 還會在，只是 css 設成 display: none

<template x-if="foo">
	<div>Some Element</div>
</template>

x-for 可以達成迴圈的功能，注意 x-for 也需要搭配 <template> 使用。如果 x-for 中的 array 資料有可能增減、變換順序，記得要指定 :key。照官方文件的說法，每次 iterate 都會標記一個 key，這樣 array 資料有增減、變換順序時，DOM 的變化才會正確。

<template x-for="item in items" :key="item.id">
    <div x-text="item.content"></div>
</template>

// 如果迴圈中要取用 index, 這樣寫. 而且 index 也可以當 key
<template x-for="(item, index) in items" :key="index">
    <div x-text="item.content"></div>
</template>

x-show 與上方 x-if 比較，保留了 DOM，只是 css 設成 display: none。直接使用在 DOM 上，不需要 <template>。另外可以使用 transition 來讓 show/hide 更流暢。

/* x-show.transition.in, x-show.transition.out, x-show.transition.scale, x-show.transition.duration …
*/
<div x-show.transition="open">
    These contents will be transitioned in and out.
</div>

x-bind 可以填入 html 屬性，例如

// 填入圖片來源
<img x-bind:src=”yourImageUrl”>
// 縮寫
<img :src=”yourImageUrl”>

// 指定 input type
<input x-bind:type="inputType">
// 縮寫
<input :type="inputType">

CSS class 的 x-bind 寫法不同

// foo==true 時才會填上 'hidden'
<div x-bind:class="{ 'hidden': foo }"></div>
// 縮寫
<div :class="{ 'hidden': foo }"></div>

二元屬性 x-bind 的寫法也不同 (二元屬性例如：disabled, readonly, required …)

// myVar==true 時才會填上 disabled, myVar==false 時整個 disabled 屬性拿掉
<button x-bind:disabled="myVar">Click me</button>
// 縮寫
<button :disabled="myVar">Click me</button>

結論

本篇文章主要是想聊一下 Alpine.js 的來龍去脈，以及整個 Alpine.js 的運作邏輯，因此並沒有包含太多細節。

跟其他 JavaScript framework 相比，Alpine.js 很大的特點是不使用虛擬 DOM (virtual DOM)，一來輕量、簡化；二來不會因為要寫個簡單功能，就要額外再寫一大堆 JS code。

如果讀者是 Laravel 的開發者，可以研究一下 Alpine.js 的使用，因為畢竟目前 (2021年5月) Laravel 8 的前端預設是用 Alpine.js。甚至 larry 覺得，一般應用如果要做簡單的前端 templating，也可以考慮使用 Alpine.js，而不是那些大型框架。