HyperApp: The 1 KB JavaScript Library for Building Front-End Apps

Hyperapp is a JavaScript library for building feature-rich web applications. It combines a pragmatic Elm-inspired approach to state management with a VDOM engine that supports keyed updates & lifecycle events — all without dependencies. Give or take a few bytes, the entire source code minified and gzipped sits at around 1 KB.

In this tutorial, I'll introduce you to Hyperapp and walk you through a few code examples to help you get started right away. I'll assume some familiarity with HTML and JavaScript, but previous experience with other frameworks is not required.

Hello World

We'll start with a simple demo that shows all the moving parts working together.

You can try the code online too.

import { h, app } from "hyperapp"
// @jsx h

const state = {
  count: 0
}

const actions = {
  down: () => state => ({ count: state.count - 1 }),
  up: () => state => ({ count: state.count + 1 })
}

const view = (state, actions) => (
  <div>
    <h1>{state.count}</h1>
    <button onclick={actions.down}>-</button>
    <button onclick={actions.up}>+</button>
  </div>
)

app(state, actions, view, document.body)

This is more or less how every Hyperapp application looks like. A single state object, actions that populate the state and a view that translates state and actions into a user interface.

Inside the app function, we make a copy of your state and actions (it would be impolite to mutate objects we don't own) and pass them to the view. We also wrap your actions so they re-render the application every time the state changes.

app(state, actions, view, document.body)

The state is a plain JavaScript object that describes your application data model. It's also immutable. To change it you need to define actions and call them.

const state = {
  count: 0
}

Inside the view, you can display properties of the state, use it to determine what parts your UI should be shown or hidden, etc.

<h1>{state.count}</h1>

You can also attach actions to DOM events, or call actions within your own inlined event handlers.

<button onclick={actions.down}>-</button>
<button onclick={actions.up}>+</button>

Actions don't mutate the state directly but return a new fragment of the state. If you try to mutate the state inside an action and then return it, the view will not be re-rendered as you might expect.

const actions = {
  down: () => state => ({ count: state.count - 1 }),
  up: () => state => ({ count: state.count + 1 })
}

The app call returns the actions object wired to the state-update view-render cycle. You also receive this object inside the view function and within actions. Exposing this object to the outside world is useful because it allows you to talk to your application from another program, framework or vanilla JavaScript.

const main = app(state, actions, view, document.body)

setTimeout(main.up, 1000)

A note about JSX

I'll be using JSX throughout the rest of this document for familiarity, but you are not required to use JSX with Hyperapp. Alternatives include the built-in h function, @hyperapp/html, hyperx and t7.

Here is the same example from above using @hyperapp/html.

import { app } from "hyperapp"
import { div, h1, button } from "@hyperapp/html"

const state = { count: 0 }

const actions = {
  down: () => state => ({ count: state.count - 1 }),
  up: () => state => ({ count: state.count + 1 })
}

const view = (state, actions) =>
  div([
    h1(state.count),
    button({ onclick: actions.down }, "–"),
    button({ onclick: actions.up }, "+")
  ])

app(state, actions, view, document.body)

Virtual DOM

A virtual DOM is a description of what a DOM should look like, using a tree of nested JavaScript objects known as virtual nodes.

{
  name: "div",
  props: {
    id: "app"
  },
  children: [{
    name: "h1",
    props: null,
    children: ["Hi."]
  }]
}

The virtual DOM tree of your application is created from scratch on every render cycle. This means we call the view function every time the state changes and use the newly computed tree to update the actual DOM.

We try to do it in as few DOM operations as possible, by comparing the new virtual DOM against the previous one. This leads to high efficiency, since typically only a small percentage of nodes need to change, and changing real DOM nodes is costly compared to recalculating a virtual DOM.

Continue reading %HyperApp: The 1 KB JavaScript Library for Building Front-End Apps%

by Jorge Bucaran via SitePoint