在这个 React, vue, Angular 三足鼎立的前端框架圈 (其实 React, Vue 也不能算是框架), 其实也出现了非常不错的库, 因为被前三者的光芒所掩盖, 所以并不太为人知今天就要向你们介绍其中一个: Hyperapp
历时了将近一年的时间, Hyperapp1.0 终于发布, 这也标志着它已经趋于稳定了, API 也趋于成熟
什么是 Hyperapp?
如果你还没有听说过 Hyperapp, 那我今天很荣幸成为第一个想你介绍这个库的人 Hyperapp 是一个为了搭建快速又有着丰富功能的网页应用而生的现代 JS 库它的大小仅有 1.3kB, 并且非常容易上手
Hyperapp 的架构借鉴了 ReactRedux 以及 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/htmlhyperxt7
Hyperapp 的初衷就是以尽量少的代码做尽量多的事作者也一直在尝试使用更少的依赖, 我想他这样的愿望终究能达成另外值得一提的是, Hyperapp 虽小, 但是仍然包含了状态管理虚拟 DOM 引擎, 所有这些都是无依赖的
Hyperapp 的下一步?
作者以及计划了很多要做的事, 其中就包括提交一个 Hacker News PWA 到 hnpwa.com, 也包括往 RealWorld 添加一个案例实现
另外作者也打算花更多时间在 Hyperapp 生态和工具的建设上, 包括: 脚手架构建开发工具的集成等等如果你们有任何的建议, 欢迎随时反馈
如果大家感兴趣, 可以去 Hyperapp 的 Github 上看看教程
之后如果有时间的话, 我会为大家详细讲解源码, 在三大框架之外也学习一些新的东西
硬广
这是本人的前端技术小程序, 基本上所有的文章都会同步更新在小程序中欢迎大家来凑热闹
来源: https://juejin.im/post/5a7c59716fb9a0635c046921