整体实现上,Hyperapp 的思路与 React 比较类似,都是借助 Virtual DOM 来实现高效的 DOM 更新。在探究 Hyperapp 背后的实现原理之前,我们先看一下如何使用它。 注:本文基于 Hyperapp 1.2.5 版本。 当然,Hyperapp 也支持 @hyperapp/html, hyperx 等其他可以生成 Virtual DOM 的库,此处不表。 当然,Hyperapp 并没有去 “observe” state,而是通过对 actions 中的方法进行包装实现了这个功能(这也是 Hyperapp 规定只有 actions 中的方法能够修改 state 我们来看 Hyperapp 是如何做的。新旧节点的 diff 和更新都由 patch 函数完成。
兼容 ● 更小尺寸,9Kb gziped ● 支持客户端与服务端同构渲染 ● 支持 React 16 的新特性,例如错误处理,Portals,自定义 DOM 属性等等 十二、JavaScript 库hyperapp https://github.com/hyperapp/hyperapp Star 10585 HyperApp 是一个用于构建前端应用的 JavaScript 库,体积十分轻量,仅 1KB。 具有以下特性: ● 声明式:HyperApp 的设计基于 Elm Architecture。使用函数式范例创建可扩展的基于浏览器的应用程序。你不必学习一种新的语言。 ● Batteries-included:开箱即用,HyperApp 具有类 Elm 的状态管理和虚拟 DOM 引擎;但它仍然只有 1kb 的大小,没有依赖关系。
在这 18 个框架当中,Svelte、Stencil、AppRun、Dojo、HyperApp 和 Elm 的网络传输负载最低(低于 30KB)。 前 13 个框架中包括已经很成熟的框架(如 Elm、Dojo、Vue、Angular、Aurelia、Stencil、Svelte 和 React)、简约型框架(如 AppRun、Hyperapp)、较少被使用的框架 在性能最好的 13 个框架中,有 6 个(Svelte、Stencil、AppRun、Dojo、HyperApp 和 Elm)的传输大小小于 30KB: ! * AppRun 和 HyperApp 的体积非常小(分别为 3KB 和 1KB)。 * Dojo 最近推出了自动代码拆分特性,并针对 PRPL 性能模式进行了优化。
hyperapp hyperapp的目的只有一个就是打包src/index.js文件,因此功能也不要太强大,所以作者直接使用命令行即可。 ?
codeweb不仅支持原生HTML、JS、CSS,更为难得的是,它涵盖了市面上众多热门的前端框架,如Vue(Vue2,3 以及单文件组件(SFC)均支持)、React、Angular、Svelte、Preact、hyperapp
本文刚发表时 Hyperapp 的代码行数计算有误,感谢 Mateusz Kwasniewski 指出正确的代码行数。
注意 Hyperapp:文章发布时代码行数不正确,感谢 Mateusz Kwasniewski 指出错误并提供了正确计算方法。
但如果你是普通公司,你每天实打实,脑子里不要考虑做轮子哥(原因——轮子太多了Parcel、Moon、hyperapp.js、Fastify…)但是一定要理解内部机制是怎么样的,要理解后面的东西,不是天天一顿摆
SolidJs简介 SolidJs作为一个新星)可谓是各个厂牌的集大成者,它支持JSX、Fragments、Context、Portals、Lazy等等,而且是继HyperApp和Svelte后,第三个比纯
hyperapp - 用于构建前端应用程序的1kb JavaScript库。 preact - 使用相同的ES6 API快速3kb React替代方案。组件和虚拟DOM。
hyperapp - 用于构建前端应用程序的1kb JavaScript库。 preact - 使用相同的ES6 API快速3kb React替代方案。组件和虚拟DOM。