今天给大家带来的主题是 HyperApp.js，即一个用于构建超文本应用程序（hypertext applications）的微型、轻量级 JAVAscript 框架。话不多说，直接进入正题！

1.什么是 Hyperapp

Hyperapp 是一个用于构建超文本应用程序（hypertext applications）的微型、轻量级 JavaScript 框架，用于开发功能丰富的 Web 应用程序，本身用 ES5 编写。

The tiny framework for building hypertext applications.

Hyperapp 应用需要在系统上安装 Node.js、NPM、JSX 和 Webpack 模块，然后才能开始构建 Web 应用程序（可以在参考文献中查看如何开启Hyperapp应用之旅）。 Hyper App 框架背后的决策是最大限度地减少更简单软件代码的依赖和使用。

与市场上的其他框架，如： React、Preact、Vue、Ember、Mithril 等相比，HyperApp 框架有非常紧凑的 API，具有最小的包大小和内置状态管理，同时拥有坚实的基础和重要的社区支持。开发者还可以参与 Hyperapp 在线社区支持，以开发 Hyperapp 一个强大的前端 JavaScript 框架。

Hyperapp 框架的兴起主要基于以下理念：

• 事半功倍：Hyperapp 最大限度地减少完成工作所需学习的概念。 视图（Views）、操作（Actions）、效果（effects）和订阅（subscriptions）等概念都非常容易掌握并无缝协作。
• 写什么，而不是怎么写：Hyperapp 具有非常易于阅读且编写有趣的声明式 API，是使用惯用的 JavaScript 构建纯功能性、功能丰富、基于浏览器的应用程序的最佳方式。
• 框架体积比网站图标还小 ：Hyperapp 框架体积只有 1 kB左右，同时 Hyperapp 是一个超轻量级的虚拟 DOM、高度优化的 diff 算法和极简主义的状态管理库。

目前 Hyperapp 在 Github 上通过 MIT 协议开源，有超过 19k 的 star、0.8k 的 fork、2.7k 的项目依赖量，100+的代码贡献者，是一个值得关注的前端开源项目。

2.Hyperapp 框架构成与特性

2.1 Hyperapp 框架构成

Hyperapp 软件包以对 Hyperapp 有意义的方式提供对 Web 平台 API 的访问。

下面是不同 Hyperapp 包的具体功能：

• @hyperapp/dom ： 检查 DOM、focus 和 blur事件。
• @hyperapp/svg ： 使用简单函数绘制 SVG。
• @hyperapp/html ： 使用普通函数编写 HTML。
• @hyperapp/time ：订阅间隔，立即获取时间。
• @hyperapp/events ：订阅鼠标、键盘、窗口和框架事件。
• @hyperapp/random ： 声明性随机数和值。
• @hyperapp/navigation ：订阅并管理浏览器 URL 历史记录。

2.2 Hyperapp 特性

上文或多或少提到 HyperApp 框架的一些优秀特征，可以更加细致的拆分为以下几个点。

• 轻量级 Javascript 库 ： HyperApp 框架的构建大小为 1KB (1.3 KB)，实现了简单轻松构建 Web 应用程序的最终目的。
• 状态管理 ： 基于 Elm 架构的 HyperApp 框架，就像 React 和 Redux 一样，但它有内置的状态管理，不像 React 依赖 Redux 等进行状态管理。 因此，可以用更少的代码行高效地交付功能性 Web 应用程序。
• 最小（易于理解）： HyperApp 团队积极最小化用户需要遵循的概念以提高工作效率。 因此，由于它的外部依赖更少，对于新手来说更加容易。
• 独立 ： HyperApp 方法是用更少的资源做更多的事情，支持虚拟 DOM。HyperApp 通过虚拟 DOM 支持内置状态管理，虚拟 DOM 支持关键更新和生命周期事件 ， 所有这些都没有依赖关系。
• 函数式编程：HyperApp 在管理状态时坚持函数式编程，但遵循实用方法以允许副作用和 DOM 操作以及异步操作。
• 广泛社区支持 ： HyperApp 拥有广泛的基础和支持社区，这有助于框架每次都变得更好和灵活。

3.简要介绍 Hyperapp 如何工作

前文讲述过，Hyperapp 框架包含了三种相互关联的方法，即：状态、操作和视图。

• 状态：负责每次用户在用户界面上执行操作时更改
• 视图：负责用户界面上的渲染更改
• 操作：是一个一元函数，它保存期望有效 payload 的单个参数。 有效 payload 可以是用户想要传递到操作中的任何内容。 在每次操作调用时，状态都会发生变化，然后状态会将更改重新绘制到视图上。

下面是一个简单的 Hello World 示例:

import { h, app } from "hyperapp"
const state = { title: "Hi." }
const actions = {}
const view = state => {state.title}
app(state, actions, view, document.body)

代码绑定简单的 HTML 输入:

import { h, app } from "hyperapp"
const state = {
  text: "Hello!"
}
const actions = {
  setText: text => ({ text })
}
const view = (state, { setText }) => (
<mAIn>
{state.text.trim() === : state.text}
<input
autofocus
value={state.text}
oninput={e => setText(e.target.value)}
/>
</main>
)
app(state, actions, view, document.body)

用户在 Web 应用程序上触发操作，操作函数被调用，并负责用新状态替换先前状态并更新。 当操作触发并在用户界面（视图）上进行更改时，状态会异步更新。

HyperApp 包含无状态组件，这些组件是纯 JavaScript 函数，可渲染自身以及允许触发的操作。 这些函数与框架无关，非常易于测试和调试。

4.使用 Hyperapp 的简单示例

安装

npm install hyperapp

Hyperapp 示例

<script type="module">
  import { h, text, app } from "https://unpkg.com/hyperapp"
  const AddTodo = (state) => ({
    ...state,
    value: "",
    todos: state.todos.concat(state.value),
  })
  const NewValue = (state, event) => ({
    ...state,
    value: event.target.value,
  })
  app({
    init: { todos: [], value: "" },
    view: ({ todos, value }) =>
      h("main", {}, [
        h("h1", {}, text("To do list")),
        h("input", { type: "text", oninput: NewValue, value }),
        h("ul", {},
          todos.map((todo) => h("li", {}, text(todo)))
        ),
        h("button", { onclick: AddTodo }, text("New!")),
      ]),
    node: document.getElementById("app"),
  })
</script>

<main id="app"></main>

应用程序首先设置初始状态并在页面上渲染视图。 用户输入（ User input flows）流入操作（actions）进而更新状态，最终使得 Hyperapp 重新渲染视图。

当描述页面在 Hyperapp 中的视图时，开发者不是直接编写 markup。 相反，Hyperapp 使用 h() 和 text() 来创建 DOM（或简称为虚拟 DOM）的轻量级表示，而 Hyperapp 负责有效地更新真实 DOM。

5.本文总结

本文主要和大家介绍 HyperApp，即一个用于构建超文本应用程序（hypertext applications）的微型、轻量级 Javascript 框架。相信通过本文的阅读，大家对 HyperApp 会有一个初步的了解。

HyperApp 保持轻量级，易于使用，代码行数较少，对于不想编写代码或想快速创建应用程序的开发者值得考虑使用 HyperApp。 对于较小的应用程序来说，HyperApp 可能是更好的选择，但是不推荐将 HyperApp 用于复杂的应用程序。 与 Redux 相比，Hyperapp 中的事件处理和更改组件状态很容易。 如果用户熟悉 Redux 框架，HyperApp 很容易学习，同时HyperApp 的生命周期与 React 类似，即 ：oncreate、onupdate、onmove、ondestroy。

因为篇幅有限，关于 Radash 的更多用法和特性文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏，您的支持是我不断创作的动力。

参考资料

https://github.com/jorgebucaran/hyperapp

https://www.xenonstack.com/insights/what-is-hyperapp

https://www.digitalocean.com/community/tutorials/js-hyperapp

https://blog.eduonix.com/web-programming-tutorials/everything-need-know-hyperapp-js/