hyperapp

Hyperapp

Hyperapp is a JavaScript micro-framework for building web applications.

Getting Started

This is our first example to get started. Right off the bat, I'll show you the hard stuff. If you survive this you basically win.

import { h, app } from "hyperapp"
import { delay } from "@hyperapp/time"

const changeName = (state, name) => ({ ...state, name })

app({
  init: [
    { name: "Hello" },
    delay([changeName, "World"], {
      duration: 1000
    })
  ],
  view: state => <h1>{state.name}</h1>,
  container: document.body
})

What's that delay magic? Glad you asked. Here's a way it can be implemented. Hyperapp ships with effects and subscriptions out of the box, so you don't have to create your own, but like they say: knowledge is power!

// hyperapp/time.js
export const delay = (fx => (action, { duration }) => [
  fx,
  { action, duration }
])((props, dispatch) =>
  setTimeout(() => dispatch(props.action), props.duration)
)

Installation

npm i hyperapp

Then with a module bundler like Rollup or Webpack, use as you would anything else.

import { h, app } from "hyperapp"

If you don't want to set up a build environment, you can download Hyperapp from a CDN like unpkg.com and it will be globally available through the window.hyperapp object. We support all ES5-compliant browsers, including Internet Explorer 10 and above.

<script src="https://unpkg.com/hyperapp"></script>

Links

• Slack
• Twitter
• Examples
• /r/hyperapp

License

MIT