簡單高性能的 JavaScript 組件框架 - Ale.js

老實說，寫這篇文章實際上是爲了宣傳個人框架，目前（在寫這篇文章時）是beta.1版，尚未正式版發出。

那麼接下來咱們就來詳細對比一下 React 和 Vue：

客觀來講，做爲 Ale 的核心開發者，咱們確定會更偏心 Ale，認爲對於某些問題來說用 Ale 解決會更好。可是在此，咱們想盡量地公平和準確地來描述一切。其餘的框架也有顯著的優勢，例如 React 龐大的生態系統，或者像是 Angular 和 Vue 有着衆多應對大型項目的解決方案。咱們會嘗試着把這些內容所有列出來。

React

React 和 Ale 幾乎極其類似。事實上，React 就是初期 Ale 的靈感來源，它們都有：

• 在狀態（數據）更新時只更新必要的【使用 diff 算法】
• 提供了 響應式 和 組件化 的視圖組件。
• 將注意力集中保持在覈心庫，而將其餘功能交給相關的庫。

因爲有着衆多的類似處，咱們會用更多的時間在這一塊進行比較。這裏咱們不僅保證技術內容的準確性，同時也兼顧了平衡的考量。咱們須要認可 React 比 Ale 更好的地方，好比更豐富的生態系統。

性能

這裏咱們僅針對 組件定義 和 組件渲染 作了測試，因此測試結果不能表明所有性能。可是能夠肯定的是，Ale 在這兩個方面要賽過 React：（定義一次組件並渲染1000個元素）

• Ale: 46~52 (ms)
• React: 307~336 (ms)

固然，咱們還作了關於響應式動態渲染的測試，結果展現 Ale 再執行動態渲染時比 React 要快 2.5 倍。

形成 React 的速度這麼慢的緣由，固然多是由於咱們用Babel進行動態渲染。可是不要忘記，Ale 並不須要編譯，若是提早編譯好 React，這對 Ale 就有一些不公平了。

HTML & CSS

在 React 中，一切都是 JavaScript。不只僅是 HTML 能夠用 JSX 來表達，如今的潮流也愈來愈多地將 CSS 也歸入到 JavaScript 中來處理。這類方案有其優勢，但也存在一些不是每一個開發者都能接受的取捨。

Ale 的總體思想是擁抱經典的 Web 技術，並在其上進行擴展。咱們下面會詳細分析一下。

JSX vs Templates

在 React 中，全部的組件的渲染功能都依靠 JSX。JSX 是使用 XML 語法編寫 JavaScript 的一種語法糖。

使用 JSX 具備下面這些優點：

• 你可使用完整的編程語言 JavaScript 功能來構建你的視圖頁面。好比你可使用臨時變量、JS 自帶的流程控制、以及直接引用當前 JS 做用域中的值等等。
• 開發工具對 JSX 的支持相比於現有可用的其餘 Ale 模板仍是比較先進的 (好比，linting、類型檢查、編輯器的自動完成)。

可是事實上，Ale 也提供了渲染函數，甚至 Ale 拋棄了傳統的 Mustache(JSX) 模板，選擇了不是那麼普及的渲染函數，這其中包括如下幾個方面：

• 依賴於 JavaScript 自身完整的編譯器，使得咱們再也不須要手動編寫模板渲染函數，這樣作能夠有效提升 Ale 模板編譯的總體速度，由於渲染函數比模板引擎更加接近 JavaScript 編譯器自己。
• 當你在 JSX 模板裏添加 JavaScript 表達式時，一些編譯器並無相應的語法提示。同時，在一些場景中，你真的須要 JavaScript 徹底編程的能力。

規模

向上擴展

好吧，說句實話，Ale 真的不是針對大型應用設計的，咱們設計它的初衷就是但願它可以處理幾乎所有的中小型應用需求。

相比之下，React 提供了強大的路由來應對大型應用。而且 React 社區在狀態管理方面很是有創新精神 (好比 Flux、Redux)，這一點是 Ale 所不能比擬的。

向下擴展

React 學習曲線陡峭，在你開始學 React 前，你須要知道 JSX 和 ES2015，由於許多示例用的是這些語法。你須要學習構建系統，雖然你在技術上能夠用 Babel 來實時編譯代碼，可是這並不推薦用於生產環境。

不過 Ale 向下擴展後就極其相似於 jQuery。由於你只要把以下標籤放到頁面就能夠運行：

<script src="ale.js"></script>
複製代碼

而後你就能夠編寫 Ale 代碼並應用到生產中，你只要用 min 版 Ale 文件替換掉就不用擔憂其餘的性能問題。

因爲 Ale 的起步階段不需學習任何複雜的知識點，好比 ES2015 以及 JSX，因此開發者只需不到半小時的時間閱讀指南就能夠當即創建簡單的應用程序。

原生渲染

React Native 能使你用相同的組件模型編寫有本地渲染能力的 APP (iOS 和 Android)。能同時跨多平臺開發，對開發者是很是棒的。相比之下，Ale 在這方面就顯得薄弱一些。可是咱們並無就此收手，隨着 Ale 慢慢發展起來，這些構建系統會相應發佈，敬請期待。

體積

和 React 相比，Ale 顯得極其輕量，Ale的壓縮文件（非g-zip）【包含操做DOM的API】只有大約 8kb 大小，而 React 的核心庫加 DOM 庫則有着驚人的 108kb。

Preact 和其它類 React 庫

類 React 的庫們每每儘量地與 React 共享 API 和生態。所以上述比較對它們來講也一樣適用。它們和 React 的不一樣每每在於更小的生態和更高的性能。可是由於這些庫沒法 100% 兼容 React 生態中的所有，因此部分工具和輔助庫可能沒法使用。或者即便看上去能工做，但也有可能隨時發生不兼容，除非你用的這個類 React 庫官方與 React 保持嚴格一致。

Vue

到了對比最重要框架的時候了。以前咱們說過 React 是早期 Ale 的靈感來源。事實上，Ale 的更多靈感來源於 Vue，這也是爲何 Ale 提供的部分特性和 API 都極其相似 Vue。

不過，儘管 Ale 與 Vue 在某些地方有類似之處，可是咱們仍是推薦你同時安裝 Ale 和 Vue，由於 Vue 可使 Ale 的開發變得更加高效。不過若是你不想這麼作，也能夠只安裝一個框架。

複雜性

在 API 與設計兩方面上 Ale.js 都比 Vue 簡單得多，而且更加適合初學者學習，所以你能夠快速地掌握它的所有特性並投入開發。

靈活性和組件化

與 Angular 相比之下，Vue.js 是一個更加靈活開放的解決方案。可是在 Ale 中，這種狀況將會發生改變。

事實上，Vue 在不一樣組件間強制使用單向數據流，這使應用中的數據流更加清晰易懂，可是同時也限制了組件之間的靈活操做。在 Ale 中，只存在複合組件，並不存在父子組件，而複合組件中的任何組件均可以互相操做，由於它們共用一套數據。

性能

這裏咱們和 React 同樣，也僅針對 組件定義 和 組件渲染 作了測試，因此測試結果不能表明所有操做的性能。可是能夠肯定的是，Ale 在這兩個方面要賽過 Vue：（定義一次組件並渲染1000個元素）

• Ale: 46~52 (ms)
• Vue: 181~228 (ms)

TypeScript

Vue 爲 TS 提供了官方的 類型聲明 和 組件裝飾器，但並非全部人都想用 TS。在中小型規模的項目中，引入 TS 可能並不會帶來太多明顯的優點。在這些狀況下，用 Ale 會是更好的選擇。

體積

單獨的 vue.min.js 文件體積有 88kb 大小，而 Ale 僅有大約 8kb 大小，相比 Vue 來講還算是比較輕量的。

學習曲線

就這點來講，兩個框架都差很少，無非就是須要你具備良好的 HTML 和 JavaScript 基礎。有了這些基本的技能，你就能夠很是快速地經過閱讀指南投入開發。

可是具體來講，Vue 的 API 面積比起 Ale 要大得多，你也所以須要理解更多的概念才能開始有效率地工做。固然，Vue 自己的複雜度是由於它的設計目標就是針對大型的複雜應用。但不能否認的是，這也使得它對於經驗不甚豐富的開發者至關的不友好。

Angular

固然，編者對於 Angular 的瞭解並非不少，因此並不能很好地作出對比。在此，咱們但願更多有經驗的開發者可以幫助咱們撰寫對比 Angular 的文章，具體你能夠點擊下方 編輯頁面，而後前往 Github 作出提交，感謝你的支持與理解！

補充

其實以前在性能方面還有一點須要補充，由於 Vue 和 React 採用虛擬 DOM 和 diff 算法。而 Ale 其實是直接遍歷真實 DOM 樹，而後採用 diff 算法對比差別，這一點相似於 Angular 的髒檢查，性能會受到一些影響。不過，這種方式也免除了須要建立虛擬 DOM 樹的麻煩。

若是你看完了這篇文章，想更深刻地瞭解 ale.js，請訪問：Github 、 Gitee 或 cn.alejs.org