Alpine.js Laravel frontend
Laravel 前端工程

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

FB公開社團 Larry的午茶時光
加入不需審核,歡迎讀者加入~
我的IG帳號: larry.time.taste。剛剛起步,歡迎大家追蹤~

這幾年到目前 (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-ifx-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,而不是那些大型框架。

FB公開社團 Larry的午茶時光
加入不需審核,歡迎讀者加入~
我的IG帳號: larry.time.taste。剛剛起步,歡迎大家追蹤~