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 simple counter app. We include the Hyperapp library using the Unpkg link: https://unpkg.com/hyperapp and then attach it to our page on the window.main global.

To build a counter, we only need to add a bit of state and a couple actions to our application to get it to work.

https://app.egghead.io/api/v1/lessons/javascript-interact-with-the-state-object-through-hyperapp-action-functions/subtitles

Interact with the State Object through Hyperapp Action functions

Instructor: [00:00] Let's make a counter app with Hyperapp. Let's start by making a static view. The view function takes the state and actions, and returns our virtual DOM. In order to build our virtual DOM, we need to use our H method.

[00:14] Let's start by making a wrapping div. It'll have no properties, but it will have children, so we'll return an array. The children are also H functions. In this case, we'll have an H1 with no properties. It'll eventually show our state count, but right now, we'll just display a string of zero.

[00:34] It'll also have two buttons, one for decrementing, and one for incrementing our state. Let's start with a button that has no properties, and we'll give it the minus symbol. Then we'll make another button that will have the plus symbol.

[00:52] If we save our file, and we refresh the page, we should see a non-functioning counter. Let's make it functional. Let's start by adding count to our state. State, in a Hyperapp, in just a plain JavaScript object of key and value pairs.

[01:07] In this case, we'll add a key of count, and the value of zero. In our view, we will update this string here to be our state.count. If we save, and we refresh the page, nothing changes. It's still not interactive. Just to prove that our count works, let's change it, save it, and refresh. You can see our initial value changed.

[01:30] Let's set it back to zero. Let's make these buttons interactive now. We do this by creating methods on the actions object. Let's make a decrement method and an increment method. Decrement can take a value, and then it'll be passed the state.

[01:50] Then what we want to return is a plain JavaScript object of our next state. In this case, we'll have count. That'll be state.count, minus our passed-in value. We'll also have increment action. It'll be very similar, except instead of subtracting, we will add our value.

[02:14] We've created our actions, but if we refresh the page, nothing happens yet, because we haven't bound them in our buttons. We'll come to our buttons, and on the onClick handlers, we will add functions to fire our actions.

[02:31] This is where we'll pass our initial value. We'll decrement by one right now, and we'll increment by one on this other button. If we save this, we should have a working counter.

Interact with the State Object through Hyperapp Action functions

Share this video with your friends