Arale 背後的一些設計理念

作者：玉伯

拔赤提到的一些問題，不少是在做 arale 的過程中，反複糾結過的。在 qcon 的分享上，因為考慮聽衆更多的是想了解 arale 和 spm，是以有些地方省略或簡單帶過了。這篇博文嘗試講講 arale 背後的一些故事和設計理念。

就如拔赤所說，看到 arale 的 widget 繼承圖時，咋一看，和 kissy 沒什麼本質差別。為什麼有了 kissy，還要開發 arale 呢？兩者的差別究竟在哪？

首先，arale、kissy，包括著名的 yui 等類庫，都是前端元件庫，通過一定的方式，對外提供了一套元件集。在 ui 元件（widgets）層面，這些類庫要解決的問題，以及解決問題的方式都是類似，表面上看沒什麼差別。

但在工具元件（utilities）層面，arale 與 kissy、yui 有着很大的不一樣。arale 裡的工具元件，比如 jquery、handlebars、moment 等，都直接來自業界，并且一定程度上是可替換的，比如在移動端，jquery 可以被替換成 zepto 庫。

除了工具元件，部分 ui 元件，比如編輯器、月曆等，arale 裡也可以直接來自業界，甚至可以直接移植部分成熟的 jquery 插件過來。這在 yui 和 kissy 裡，是不怎麼被考慮的。

arale 是真心開放的一個元件解決方案，這種開放性，我相信會是 arale 的最大活力。

這個的确如拔赤所說，幾乎所有類庫都會這麼标榜自己，但是有些隻是标榜，并未真正做到。比如 kissy 最開始很推崇 kiss 原則。但随着後續的發展，個人覺得目前其實已經背離 kiss 原則，沒有做到保持簡單。就如拔赤說的 switchable 元件，裡面超細的分層和功能點是否真的有必要？前不久在群裡還讨論過延遲加載元件的一個 bug，在某種特殊場景下，該元件存在一個 bug，作為程式員，好像會毫不猶豫的把 bug 就修複掉了，覺得天經地義，但我直覺裡卻覺得是否值得？即便也許隻需要增加幾行代碼。

在簡單面前，還有一個比 kissy 更明顯的反例是 yui3。拔赤已經說了自定義事件搞那麼複雜，理論上看起來很完美，但實際上卻什麼人去用。yui3 是個典型的學院派風格類庫，不光自定義事件，很多其他元件的設計上，都存在學院派式的完美主義情節。這個不多說，喜歡 yui3 的可以繼續用，但我的感覺和拔赤一樣，類 yui3 的類庫路子隻會越來越窄，最後自己把自己幹掉。（當然，所有預言都是不靠譜的。）

回到 kiss 原則上來，回到經常提起的簡單之美上來。對于 kiss，自從概念提出來就一直存在了解上的分歧，下面是一篇我讀到過多次每次讀都感慨的一篇文章：

文字比較多，還是不貼過來，請移步閱讀：簡單之美——系統設計黃金法則

中間有個故事很有意思：

一位 mit 的教授一直困惱于 syscall 處理時間過長出現中斷時如何保護使用者程序某些狀态，進而讓使用者程序能繼續執行。他問紐澤西人，unix 是怎麼處理這個問題。紐澤西人說，unix 隻支援大多數 syscall 處理時間較短的情況，如果時間太長出現中斷 syscall 不能完成，那就會傳回一個錯誤碼，讓使用者重新調用 syscall。但 mit 人不喜歡這個解決方案，因為這不是“正确的做法”。

這兩個流派非常典型，我還是忍不住再摘抄過來：

我相信 mit 的這套理念，是絕大部分程式員的預設意識。這這套哲學裡，簡單性不能破壞正确性、一緻性和完整性。很多程式員見 bug 就改的習慣，潛意識裡感覺是受完整性的影響。

來看另一種了解：

上面這套理念，剛接觸時，簡直有點邪教的感覺。比如實作的簡單比接口簡單重要，以及正确性居然可以讓步于簡單性，還有最不重要的是接口的一緻性。

new jersey approach 初看有點 naive，但我個人的感覺，通過 kissy 的開發、seajs 的開發，越來越覺得 new jersey approach 可貴性。

可以說，yui3、kissy 等類庫，遵循的都是 mit 哲學，但 seajs、arale 嘗試的是 new jersey 哲學。

這會帶來很多不同。舉一個例子簡單說下，比如 overlay 元件，在 old ie 下需要增加 iframe 墊片，在傳統的元件設計裡，會允許在 config 裡關閉或打開 shim 配置。但在 arale 裡，直接沒這個配置，發現是 old ie 時，預設就打開，否則則關閉。不給使用者這層選擇，使用者也就不用去操心還有這麼回事。這個設計，在内部讨論時，曾經被挑戰過，比如使用者有可能為了性能優化，希望在 ie6 下也不建立這個 iframe，因為使用者很明确知道沒墊片也不會出問題。arale overlay 的設計看起來是無法滿足這個需求的，對完整性是種破壞，但是我們最後還是決定不添加這個配置，因為這樣更簡單。完整性可以為簡單性做出犧牲。

這隻是其中一個小例子，arale 的元件配置與 yui3 等相比，都會偏少，很多都是出于簡單性考慮。但在 kissy 和 yui3 裡，很多時候是恨不得把所有配置都暴露出來。

在簡單性上，我們甚至會優先考慮實作上的簡單性，比如 mask 元件，就全局單例，因為這樣實作最簡單。

開放、簡單，我個人覺得這在 arale 裡，是非常非常實在的東西。

支付寶的業務特征是，需要穩定、高效、靈活。我們的了解是，因為開放，是以穩定，比如 jquery 的穩定性比自己折騰一個 dom 操作類庫會更靠譜，高效來自簡單、易用，用起來爽，效率自然就高了。

至于靈活，更多時候也是通過開放來解決的，是以開放，同一類型的元件可以有多個不同定制版本，這一點，和 kissy 通過 component 實作的靈活有很大不同。在 arale 裡更追求元件的獨立性，下面細說下。

這個在 ppt 裡沒說，在 arale 元件開發裡，是時時被強調的：

适度靈活

适量重複

适度靈活不多解釋，arale 裡不會去建構萬能元件，隻會讓元件适當的具備一定的可擴充性。比如 arale 的 switchable 元件，肯定不會去增加建立 tab 的功能。需要複雜功能時，去使用另一個 tabview 元件就好。

第二個适度法則是适量重複。這個是我的切身體會，有悖于傳統的軟體開發思想，但我覺得在前端界，适量重複比 dry 更實用。

是個程式員可能都聽過 dry （don’t repeat yourself），這條法則非常好，在大部分情況下都是對的。

然後在建構前端類庫時，我覺得遵守 dry 會很危險。

如果你追求代碼的不重複，那麼你在寫 a 和 b 元件時，會把公用部分抽取為 c，不斷重複這個追求，最後就會得到一個非常龐大的依賴結構圖，比如 yui3 就是這樣。yui3 追求顆粒化，表面上看顆粒化可以讓自定義打包更靈活更優秀，但實際上，顆粒化的粒度非常關鍵，像目前 yui3 的粒度太小，導緻的問題是，實際上你若真去把 dom / event / node 等子產品打包出來，其實會比 jquery 大出不少，不光達不到實際的期望效果，還牽三挂四，開發起來并不友善。（雖然 combo 服務可以緩解一點）

對于 dry 法則，我的了解是，必須要非常小心的把握好兩點：

究竟不應該重複的是什麼？

粒度如何？

在 arale 裡的答案是，不應該重複的是元件的職責，而不是元件的代碼。 比如：

jquery 的職責是 dom 操作類庫，那麼在 arale 裡就不會再有第二個 dom 操作類庫。

underscore 的職責是語言增強，那麼在 arale 裡就不會有第二個語言增強元件。

jquery 和 underscore 是不重複的，他們的職責不同，主體功能不同。

但 jquery 和 underscore 兩個元件，可以存在部分相同的輔助功能，比如 each 等方法。

在這種對 dry 的了解下，arale 裡的元件甯可 copy 一些代碼，也會保持元件的獨立性，而不會特意去追求代碼級别的不重複。

這一點我們糾結過不少時間，但目前來看，适量重複帶來的簡單性是很不錯的。

粒度的問題，在 arale 裡，實踐的是粗粒度法則。 如果要複用某些代碼，那麼會以獨立工具元件的形式提供，比如 position 工具元件，就提供一個靜态定位方法，其他 ui 元件想用時，直接采用引用的方式調用靜态方法就好，而不會像 yui3 或 kissy 一樣，采用 mixin 的方式去做。arale 的工具元件，推崇：

組合 > 混入 > 繼承

這篇部落格有點長了，回到拔赤的幾個問題。大部分問題已經回答了，再來回答這個問題：到底誰才會開發出真正高品質的元件？這引出了本篇部落格想談論的最後一個議題。

在《支付寶前端技術之路》裡，無論 arale 部分，還是 spm 工具部分，都非常強調生态圈的概念。對于元件的開發、貢獻、篩選，在 cmd 子產品生态圈裡，就如 nodejs 社群一樣，是開放自由的，同時又是非常殘忍自然的。

殘忍自然是因為我們想打造的是生态圈， 生态圈是自然的，同時也是物競天擇、适者生存。 一個元件是否優秀，完全取決于它能否被生态圈認可。這和 github 也是一樣的，github 上這麼多項目，但通過一些簡單的次元，我們還是可以比較容易的篩選出一套精品元件。

arale 隻是 cmd 生态圈裡的一套子產品精選集，并且這個精選集，目前是基于支付寶的需求去選擇的。其他公司完全可以從 cmd 生态圈裡，選取另一套子產品精選集，比如叫做 coollib 什麼的。

cmd 生态圈目前還沒正式對外運作起來，目前隻在支付寶和 b2b 初步嘗試，等時機成熟後，會徹底開放出來。

我相信生态圈是解決元件品質的不錯選擇。

在 arale 裡， 開放、簡單、易用、适度靈活、适量重複、生态圈 ，這些概念是實實在在的，也正是這些理念，使得 arale 與 yui3、kissy 等類庫不同，我相信這份嘗試會成功，并期待你的加入，一起為夢遠航。