A JavaScript micro framework-HyperAppJS

Hyperapp 是最近討論度頗高的一款微型 JS 框架。與其他框架相比，Hyperapp 的API非常簡單，原始碼容易理解。此外，專注於 Render View 的核心部分，使得 Hyperapp 的體積非常輕巧，並且在設計上並無涉及太多的複雜情境，很適合用於行動裝置開發。

三大前端框架比較

Angelos Chalaris 在下述文章中提供簡單的範例比較「撰寫語法」、「非同步處理方式」、「生命週期方法」、「效能」。

Javascript Framework Comparison with Examples (React, Vue & Hyperapp)

雖然Vue允許的編寫方式具有較高的靈活性，但在相同功能下的編碼長度也無法表示程式的可讀性，所以若以文章中的範例來比較，客觀來說並優劣之分。除了可讀性與撰寫技巧之外，效能也是大部分開發人員考量的項目之一，如果是複雜的 Web 應用程式，Vue 和 React 最適合，而 Hyperapp 更適合較少量的資料處理，或者需要具備快速啟動、在低端硬體上運作的 Web 應用程式。

像 React，Vue 和 Angular 這樣的框架在過去一年中風靡一時，Hyperapp 與其他框架相比原始代碼更短、複雜度更低，代碼更容易維護，並且只需1KB的檔案容量即可完成很多工作。如果想依照專案需求改寫框架，或是學習底層的基礎知識，相信 Hyperapp 可以提供更方便的客製化功能項目，並且減少在未來切換框架的學習成本。

簡單的生命週期

初始化/更新後

oncreate(DOMElement)
onupdate(DOMElement)

onremove(DOMElement, action)
可以控制非同步移除節點，但需要調用 action

ondestory(DOMElement)
不能控制自已被移除，在移除前處理內存泄漏、釋放第三方類別庫等操作

使用

官方文件有一個範例應用 online demo

state 用於保存整個應用的資料，只有 action 中的方法能夠修改 state 的資料，state 中的資料修改後，view 會自動進行更新。

環境準備

開發環境使用 ES6，搭配 webpack，參考下述文章實作。

Hyperapp - 麻雀雖小五臟俱全的微型前端框架 | Robby - 全端的 Front-End Engineer

下載專案

git clone https://github.com/explooosion/webpack-es6-boilerplate.git

安裝套件/啟動

cd webpack-es6-boilerplate
npm install
npm start

安裝 Hyperapp 以及 babel-plugin-transform-react-jsx

npm add hyperapp -S
npm add babel-plugin-transform-react-jsx -S

引入 JSX 的編譯套件

安裝 transform-react-jsx 套件後，在 .babel.rc 中指定該套件，同時將 pragma 設定為 h。

清空檔案內容引入 Hyperapp

Hyperapp 對外只顯示兩個函數 : h 和 app。其中 app 用於將應用載入到 DOM節點上，相當於啟動函數。而 h 則用於處理 view，返回虛擬的 DOM 節點。由於瀏覽器並不能理解上面範例中 view 使用的 JSX 語法，因此需要通過Babel 等編譯工具進行處理。

Get Chirung Yu (aron)’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

虛擬的 DOM 節點實際上就是用 JavaScript 中的 Object 去描述一個 DOM 節點，因為保存在 RAM 中，所以更新修改很快，同時加上一些 diff 算法的優化，能夠最大程度地降低 DOM 節點 Render View 的資源耗損。

DOM-diff 原則

由於對 tree 進行完整的 diff 需要的時間複雜度是 O(n^3) ，所以必須有一些原則來加快速度。

1. 相同層級關係的節點比對並更新當前元素的差異，其他層級新增節點。
2. 只更新同類型節點，非同類型新增節點。
3. 盡可能利用現有 DOM ，節省額外刪除或建立節點的資源耗損。
4. 如果定義了 key，可以根據 key 找到 index進行比較。

在 Render View 的時候 Hyperapp 嚴格要求 DOM 提供對應的 key 屬性，
如果沒有對應的 key，相當於每次都是全新的 view，產生效能問題。

原始碼分析

詳細的分析在下述文章

hyperapp@f6c2622

hyperapp/hyperapp