HyperApp 是一个用于构建前端应用的 JavaScript 库，体积十分轻量，仅 1KB。具有以下特性：
-
声明式：HyperApp 的设计基于 Elm Architecture。使用函数式范例创建可扩展的基于浏览器的应用程序。你不必学习一种新的语言。
-
自定义标签：使用自定义标签构建复杂的用户界面。自定义标签是无状态的，易于调试。
-
Batteries-included：开箱即用，HyperApp 具有类 Elm 的状态管理和虚拟 DOM 引擎；但它仍然只有 1kb 的大小，没有依赖关系。
示例：Hello World
Hello World
Try it online
app({
state: 0,
view: (state, actions) => (
<main>
<h1>{state}</h1>
<button onclick={actions.add}>+</button>
<button onclick={actions.sub}>-</button>
</main>
),
actions: {
add: state => state + 1,
sub: state => state - 1
}
})
简介
安装
npm i -S hyperapp
在 Node.js 中
import { h, app } from "hyperapp"
在浏览器中通过 CDN
const { h, app } = hyperapp
示例
Hello world
app({
model: "Hi.",
view: model => html`<h1>${model}</h1>`
})
Counter
app({
model: 0,
update: {
add: model => model + 1,
sub: model => model - 1
},
view: (model, msg) => html`
<div>
<button onclick=${msg.add}>+</button>
<h1>${model}</h1>
<button onclick=${msg.sub} disabled=${model <= 0}>-</button>
</div>`
})
Input
app({
model: "",
update: {
text: (_, value) => value
},
view: (model, msg) => html`
<div>
<h1>Hi${model ? " " + model : ""}.</h1>
<input oninput=${e => msg.text(e.target.value)} />
</div>`
})
Drag & Drop
const model = {
dragging: false,
position: {
x: 0, y: 0, offsetX: 0, offsetY: 0
}
}
const view = (model, msg) => html`
<div
onmousedown=${e => msg.drag({
position: {
x: e.pageX, y: e.pageY, offsetX: e.offsetX, offsetY: e.offsetY
}
})}
style=${{
userSelect: "none",
cursor: "move",
position: "absolute",
padding: "10px",
left: `${model.position.x - model.position.offsetX}px`,
top: `${model.position.y - model.position.offsetY}px`,
backgroundColor: model.dragging ? "gold" : "deepskyblue"
}}
>Drag Me!
</div>`
const update = {
drop: model => ({ dragging: false }),
drag: (model, { position }) => ({ dragging: true, position }),
move: (model, { x, y }) => model.dragging
? ({ position: { ...model.position, x, y } })
: model
}
const subs = [
(_, msg) => addEventListener("mouseup", msg.drop),
(_, msg) => addEventListener("mousemove", e =>
msg.move({ x: e.pageX, y: e.pageY }))
]
app({ model, view, update, subs })-
hyperapp 共享 Hyperapp is a very small micro-framework used to build declarative web applications. It’s only 1kB in size and the API is similar to React’s, perfect, right?! We’ll build a small counter a
-
原文链接：https://hackernoon.com/introducing-hyperapp-1-0-dbf4229abfef 在这个React, Vue, Angular三足鼎立的前端框架圈（其实React, Vue也不能算是框架），其实也出现了非常不错的库，因为被前三者的光芒所掩盖，所以并不太为人知。今天就要向你们介绍其中一个：Hyperapp。 历时了将近一年的时间，Hyperapp1.
-
Hyperapp是一个JavaScript库，用于构建功能丰富的Web应用程序。 它结合了实用的Elm启发式状态管理方法和支持键更新和生命周期事件的VDOM引擎-所有这些都无需依赖。 提供或占用几个字节，将整个源代码缩小并压缩到大约1 KB。 在本教程中，我将向您介绍Hyperapp，并引导您完成一些代码示例，以帮助您立即上手。 我假定对HTML和JavaScript有所了解，但是不需要具有其他框
-
hyperapp 是什么鬼？ hyperapp 是一个前端的应用构建库。初见写法，很有一种写react的亲切的感觉（其实就是一个套路），不过这肯定不能成为吸引广发gay友从而在短短两个月拿到 8K star的理由。更重要的一个原因是 官方宣称的1kb。是的， hyperapp 的核心代码只有1kb，这对早已习惯react全家桶，同时对当今web应用一个页面动辄3、4M毒害的gay友来说，的确是一个
-
Hyperapp is an ultra lightweight (1kb), minimal, functional, JavaScript library for building UIs. It comes with a VDOM engine and state management without any dependencies. In this lesson, we learn ho
-
写在前面 没错，又是一个新的前端框架，hyperapp非常的小，仅仅1kb，当然学习起来也是非常的简单，可以说是1分钟入门。声明式：HyperApp 的设计基于Elm Architecture（这也意味着组件更多的是纯函数），支持自定义标签以及虚拟DOM。下面先来看下怎么使用： hello world import { h, app } from 'hyperapp'; app({ st
-
Hyperapp is an ultra lightweight (1kb), minimal, functional, JavaScript library for building UIs. It comes with a VDOM engine and state management without any dependencies. In this lesson, we build a
-
Q：一句话解释为什么要前端构建？ A：因为前端资源都存放在远程服务器上。 构建哪些资源 JS 内容（包括<script/>直接引入的 JS 和 JS 模块）：压缩、合并、版本管理。 CSS 内容（包括<link/>直接引入的 CSS 和 JS 模块引入的 CSS 模块）：压缩、合并、版本管理。 HTML 内容（包括 HTML 模板文件和 JS 模块引入的 HTML 模块）：压缩。 资源文件（如 C
-
本文向大家介绍前端框架Vue.js构建大型应用浅析，包括了前端框架Vue.js构建大型应用浅析的使用技巧和注意事项，需要的朋友参考一下 真正的模块化 前端模块化很早就开始了，无论是 require.js，browserify 进行模块化打包， 还是 Angular 进行依赖注入，我们都可以把JS代码分成一个个小的模块并组装起来。然后我们还会通过 less 或者 sass 来把CSS文件也拆成一个个
-
前端应用架构设计 JavaScript Web 应用开发 [read][RMB] 用 React & Ampersand 构建 APP [watch][$] Human JavaScript [read] JavaScript 应用程序编程 [read] 构建现代单页应用 [watch][$] JavaScript 函数式编程 [watch][$] JavaScript: 模块 [read] We
-
前端构建配置就是 coolie-cli 的配置文件，文件命名为coolie.config.js，使用 coolie init -c 生成一个前端构建配置文件的模板。 /** * ====================================================== * coolie-cli 配置文件 `coolie.config.js` * 使用 `coolie.in
-
虽然我们跑通了一个最简单的MVC，但是页面效果肯定不会让人满意。 对于复杂的HTML前端页面来说，我们需要一套基础的CSS框架来完成页面布局和基本样式。另外，jQuery作为操作DOM的JavaScript库也必不可少。 从零开始写CSS不如直接从一个已有的功能完善的CSS框架开始。有很多CSS框架可供选择。我们这次选择uikit这个强大的CSS框架。它具备完善的响应式布局，漂亮的UI，以及丰富的
-
虽然我们跑通了一个最简单的MVC，但是页面效果肯定不会让人满意。 对于复杂的HTML前端页面来说，我们需要一套基础的CSS框架来完成页面布局和基本样式。另外，jQuery作为操作DOM的JavaScript库也必不可少。 从零开始写CSS不如直接从一个已有的功能完善的CSS框架开始。有很多CSS框架可供选择。我们这次选择uikit这个强大的CSS框架。它具备完善的响应式布局，漂亮的UI，以及丰富的