Main menu

Post navigation

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

The problem is creating sophisticated web applications and dealing with the complexity of the tools we have at our disposal.

HyperApp was born out of the attempt to do more with less. We have aggressively minimized the concepts you need to understand while remaining on par with what other frameworks can do. What makes HyperApp unique among the alternatives like React, Preact, and Mithril, is its compact API, built-in state management, and the unrivaled, small bundle size.

In this article, I’ll introduce you to HyperApp and walk you through a few code examples to help you get started. Experience with other frameworks is not required, but since you are interested in HyperApp, I’ll assume you have some knowledge of HTML and JavaScript.

What is HyperApp?

HyperApp helps you build interactive web applications. It follows many of the principles popularized by React like one-way data flow, JSX, and Virtual DOM.

HyperApp is based on the Elm Architecture. This means that application design is like application design in Elm or React/Redux.

Notice that neither actions.add or actions.sub update the state directly, instead, they return a new state.

add: state => state + 1,
sub: state => state - 1

When the state is updated as a result of calling an action, the view function is called and the application is rendered again.

Visualizing the architecture

Users call actions by interacting with the application and they are the only available mechanism to update the state. Under the hood, HyperApp injects actions with code that knows when to render the application.

Actions that have no side effects are also known as reducers. If you are coming from Redux, this will make sense right away. A reducer is a pure function that receives the current state of the application and some data to compute a new state.

Visualize a chain in which each link represents a state configuration. The most recent link in the chain is the current state. The view function receives the current state and actions and uses them to construct the DOM tree. When an action is called, a new link in the chain is created.

Side effects

You can call multiple actions inside an action. You can call actions inside a callback passed to an asynchronous function like fetch too.

HyperApp knows that if an action returns null or undefined the state does not need to change and it skips the render pipeline. Incidentally, if an action returns a Promise, HyperApp does not update the state either and leaves it up to the resolve callback to figure out what to do, e.g., call other actions.

Examples

GIF search box

Let’s build a GIF search box using the Giphy API. In this example, we’ll demonstrate how to update the state asynchronously.