前端框架的新星-Hyperapp 1.0簡介

旭霸發表於2018-02-08
前端框架APP

原文連結：https://hackernoon.com/introducing-hyperapp-1-0-dbf4229abfef

image

在這個React, Vue, Angular三足鼎立的前端框架圈（其實React, Vue也不能算是框架），其實也出現了非常不錯的庫，因為被前三者的光芒所掩蓋，所以並不太為人知。今天就要向你們介紹其中一個：Hyperapp。

歷時了將近一年的時間，Hyperapp1.0終於釋出，這也標誌著它已經趨於穩定了，API也趨於成熟。

什麼是Hyperapp？

如果你還沒有聽說過Hyperapp，那我今天很榮幸成為第一個想你介紹這個庫的人。Hyperapp是一個為了搭建快速又有著豐富功能的網頁應用而生的現代JS庫。它的大小僅有1.3kB，並且非常容易上手。

Hyperapp的架構借鑑了React、Redux以及Elm，同樣也包含了作者和社群其他程式碼貢獻者的思想精髓。下面就是一個非常精簡的例子：

import { h, app } from "hyperapp"

const state = {
  count: 0
}

const actions = {
  down: () => state => ({ count: state.count - 1 }),
  up: () => state => ({ count: state.count + 1 })
}

const view = (state, actions) => (
  <main>
    <h1>{state.count}</h1>
    <button onclick={actions.down}>-</button>
    <button onclick={actions.up}>+</button>
  </main>
)

export const main = app(state, actions, view, document.body)
複製程式碼

對於Hyperapp來說，JSX並不是必須的。但是鑑於大家都很熟悉，所以在例子和文件中我們始終都用到JSX。

Hyperapp也提供了一些JSX的替代方案，比如h函式（Hyperapp的首字母）、hyperapp/html、hyperx、t7。

Hyperapp的初衷就是以儘量少的程式碼做盡量多的事。作者也一直在嘗試使用更少的依賴，我想他這樣的願望終究能達成。另外值得一提的是，Hyperapp雖小，但是仍然包含了狀態管理、虛擬DOM引擎，所有這些都是無依賴的。

Hyperapp的下一步？

作者以及計劃了很多要做的事，其中就包括提交一個Hacker News PWA到hnpwa.com，也包括往RealWorld新增一個案例實現。

另外作者也打算花更多時間在Hyperapp生態和工具的建設上，包括：腳手架、構建、開發工具的整合等等。如果你們有任何的建議，歡迎隨時反饋。

如果大家感興趣，可以去Hyperapp的Github上看看教程。

之後如果有時間的話，我會為大家詳細講解原始碼，在三大框架之外也學習一些新的東西。

硬廣

這是本人的前端技術小程式，基本上所有的文章都會同步更新在小程式中。歡迎大家來湊熱鬧。

image
image

相關文章