现在使用 React+Redux "全家桶"的方式构建一个前端应用使用得十分广泛，但是当我们在构建一个简单的小应用的时候，使用 React+Redux "全家桶"的话，引入的 js 文件体积和构建配置等都会觉得有点复杂，但是不要慌，hyperapp 可以让你开发得快又开发得爽。

基本介绍

hyperapp 是一个小巧的类 Elm 架构的 web 应用构建框架。

  1. 和 react 一样支持 JSX ，因此对组件的创建十分方便，同样组件书写方式也和 react 相近
  2. 支持服务端渲染，有助于 SEO
  3. 构建在 virtual dom 之上性能有保证
  4. 支持组件生命周期

如何使用

在这里给你一段代码，保存为一个 *.html 文件打开它就能看到最基本的效果了。

<html>
<body>
<script src="https://unpkg.com/[email protected]/dist/hyperapp.js"></script>
<script>

const { h, app } = hyperapp

const state = {
  count: 0
}

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

const view = (state, actions) =>
  h("div", {}, [
    h("h1", {}, state.count),
    h("button", { onclick: () => actions.down(1) }, "–"),
    h("button", { onclick: () => actions.up(1) }, "+")
  ])

window.main = app(state, actions, view, document.body)

</script>
</body>
</html>

而你看到引入的 https://unpkg.com/[email protected]/dist/hyperapp.js 这个文件解压后只有 4k 左右，十分轻量。并且不需要使用任何的前端工程构建工具，只要直接引入 js 即可，十分适合快速开发上线的小应用。

如果你感兴趣，想继续深入可以看看它的文档，如果你是一个前端小白,那尝试去理解文档中的一些概念，然后顺势去寻找相关资料，会让你对的眼界和知识带来非常大的提升，由此框架引申出去的概念都是目前前端开发的 fashion。

周边生态

显然周边生态相对于 react, vue 等来说是比较薄弱的，开源社区也没有相关的组件库，react,vue 等框架有应用开发的全套服务是 hyperapp 无法比拟的，但是恰恰正符合 hyperapp 的风格。hyperapp 适用于构建简单小巧的应用，如果有更复杂更工程化的就让 react,vue 一类去干吧。

但是官方也有 router，logger，html 等一些功能上的增强库，可以去 github 搜索一下还可以看看有没有其他相关的项目

试用与案列

在 reddit 淘到一个 demo 来展示使用 hyperapp 的效果.

你也可以直接在线上编辑代码进行运行查看效果，地址戳我

hyperapp demo

 

 

关于

hyperapp 目前在 github 有一个 organization ，里面有好多开发者在维护，如果你有兴趣可以先看看如何对项目做贡献。

hyperapp 从第一次 commit 到现在才过去一年左右的时间，正在不断地发展其生态，肯定会越来越棒，值得一试，小编正在想如何基于此搞点事情~，如果您有兴趣的话赶快去官网看看它的动态吧