之前我在開發 FontFreeze 以及 FEN Tool 兩個工具的時候，為了求簡便，我都使用了 petite-vue 這個精簡框架。但是 petite-vue 自從尤雨溪開發完 0.4.1 版之後就不再維護了 1，所以後來我都不敢繼續再用它來做新的專案，甚至後來 FEN Tool 也因為規模越來越大而整個用 Vue 重新改寫了。
最近我因為有實務上的需要，而想要寫一個簡單的抽籤程式 2。像這種架構極為簡單的東西當然是不需要用上什麼大框架跟建置流程的，甚至就算要用 vanilla JS 來寫也一點都困難。但我想說既然有機會、就藉此來嘗試一下沒用過的東西好了。然而因為當時我有點急著要用那個程式，我也不打算採用需要花比較多時間才能摸索清楚的東西。
於是我就決定採用 Alpine.js。它其實最初是從 Vue 發展出來的一個輕量框架，所以它在概念上跟 Vue 非常類似，甚至它後來也反過來啟發了 petite-vue，但跟後者不同地、它是一直都有持續在維護的，成熟度也夠高，是值得試試看的東西。
先說結論：如果你想快速寫一個功能單純的一頁式程式、且平常最擅長使用 Vue，那 Alpine.js 確實是不錯的選擇。不過它跟 Vue 之間的差異又比起 petite-vue 跟 Vue 之間的差異大了一些，未來假如要遷移到 Vue 會比較麻煩，所以如果預期之後程式的規模會持續長大的話，我就比較不推薦使用。然而，petite-vue 因為不再維護的緣故、我也同樣地不推薦。加起來的話也就是說，就我的經驗所及的範圍來說，如果專案預期的規模大到一定的程度 3，那我就建議最好從一開始就選擇比較大一點的框架。反之，如果擺明就是要寫簡單的東西，那真的是可以試試 Alpine.js（特別是尤雨溪自己也在封筆 petite-vue 的時候這麼推薦了）。
對於慣用 Vue 的人來說，在使用 Alpine.js 的時候，除了像是「各種 v- 的指令都改名字變成 x- 開頭」以及「要用 alpine:init 事件來進行初始化設置」這種最基本的事情之外，大概只要記得兩個重點差異：
- Alpine.js 並沒有
{{...}}這種模板語法，動態的文字都必須用標籤的x-text來達成。 x-if、x-for和x-teleport都只能用在<template>標籤上，而不能直接使用在一般的標籤之上。
這兩個特性看似麻煩，但卻可以有效解決頁面載入的時候還要 cloak 模板語法的麻煩（雖然 Alpine.js 也是一樣有 x-cloak 的語法），倒也不失為是好的設計。
我對 Alpine.js 的初體驗評分如下：
- 文件清楚：⭐⭐⭐⭐
- 設置容易：⭐⭐⭐⭐⭐
- 概念易懂：⭐⭐⭐⭐⭐
-
儘管尤雨溪表示該專案已經「完成」了（出處），該專案仍舊確實累積了許多待解的 bug（在其討論區中，包括我自己很困擾的一個）以及沒人理會的 PR（也包括我自己的一個在內），所以我說它沒有被維護、純粹是陳述事實。 ↩
-
這個抽籤程式是為了一次聚會中我需要主持交換禮物的緣故才寫的。類似的程式也是有一些現成的，但是我想針對我自己的需求把做得更方便使用，所以就自己做了一個。 ↩
-
關於多大的規模才叫大到一定的程度，我想一個很好的指標就是、當專案開始需要進行元件化的時候就是夠大了，特別是 Alpine.js 本身並沒有內建元件化的功能（雖然有若干非官方解法存在，但總之都脫離了 Alpine.js 設定的目標範疇），而 petite-vue 雖然算是有、但是其元件寫法卻跟 Vue 相差甚大，所以不管是哪一種情況，要之後遷移到 Vue 差不多都要把元件重寫一次。既然如此，那在打算進行元件化的時候就直接遷移就好了。 ↩
留言