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

以后若是有时间的话，我会为你们详细讲解源码，在三大框架以外也学习一些新的东西。

硬广

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