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 app to demonstrate how Hyperapp works.
To get started, we can create a new Node application and install hyperapp
. We’ll then serve this application using parcel:
We can then draft out a standard index.html
page that includes app.js
which will contain our hyperapp
code.
State-driven applications always start with a Counter example. This allows us to get used to how the data flows within our application. Let’s start off by defining some state
:
We can then define a view
based on that state
. This can be displayed by using standard template syntax:
Finally, we can attach this to a particular element inside of the DOM. I’ve elected to add this to a div
with the id
of app
:
Here’s what our simple app looks like:
As state
is immutable and should not be directly updated, we can now add actions
to manipulate our state
like so:
This can be wired-up inside of our main
and view
to give it access to our actions
:
Now if we select Increment or Decrement, we’ll see the total count go up or down.
What if we wanted to make this go up or down by a particular number? Let’s add this functionality.
Firstly, we can add a new item to our state
object. I’ve elected to call this diff
, as this represents the difference between to added or subtracted:
Then, we can update our actions
to increment or decrement based on this:
And finally, we can update our view
:
Now we have the ability to take advantage of input data to update our state.
Let’s now look at how we can make components out of our Hyperapp project. We’ll make a Counter
component and look at how we can embed this inside of a Page and route.
Create a new file at components/Count.js
and add a counter that takes in a count
from props
:
We can then import
this inside of app.js
:
Then we can pass the count
in as props to our Count
within the view
:
I’ve also updated our state
and actions
to be a simple increment
and decrement
of count
:
We can also take advantage of routing within Hyperapp. Let’s install the router package (@hyperapp/router
) like so:
We can then import
the routing components inside of app.js
:
Now we can create two different pages, Home
and Blog
:
The Home
page contains our counter example from before, and the Blog
page is simply just some text. Let’s assign these as a Route
and Link
and inside of the view
:
Next, we need to give the router access to the location
, as it’s based off the History API. Add the following to your state
and actions
:
Finally, we need to subscribe to the location
itself:
Now we’re able to select between different pages inside of our application!
Here’s the full code for the routing example:
With this, you should be off to the races! 🏇 And also, keep an eye out for Hyperapp 2.0, which should be out soon.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!