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

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

在這個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上看看教程。

以後若是有時間的話，我會爲你們詳細講解源碼，在三大框架以外也學習一些新的東西。

硬廣

這是本人的前端技術小程序，基本上全部的文章都會同步更新在小程序中。歡迎你們來湊熱鬧。