前端框架的新星-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上看看教程。

之后如果有时间的话，我会为大家详细讲解源码，在三大框架之外也学习一些新的东西。

硬广

这是本人的前端技术小程序，基本上所有的文章都会同步更新在小程序中。欢迎大家来凑热闹。