Hyperapp微框架为何会火？因为体积仅 1kb ？

2023-11-26 今日头条高级前端进阶

今天给大家带来的主题是 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/