Introduction to Hyperapp.js

WRITTEN BY GARETH DUNNE @JSDIARIES

Oh no, not another frontend library I hear you say? I thought we already established that JavaScript Fatigue is very much alive and kicking ?

All these concerns are very valid, however, Hyperapp.js allows a developer to use all the popular functional programming based concepts from popular frameworks like React.js, using a simliar pattern to Redux while also including SVG support, inline CSS, JSX and fully implemented lifecycle events.

If you wanted to know about more about functional programming in the context of React.js check out this learning resource here.

It ticks all these boxes for what a developer really needs from a frontend library while also being the smallest frontend library available with next to no configuration or setup. An intriguing prospect no?

With no dependencies included and totalling the grand size of 1 KB it comes as quite a surprise that Hyperapp.js is able to pack in all the functionality that it does but thats the beauty of it really.

Think about the amount of time you are potentially spending choosing a stack, setting up your environment, choosing what bundler you want to use, as well as planning your styling pre processors. The time taken to do this can really add up and can be especially overkill for small scale applications or personal projects. And this is where Hyperapp.js really starts to shine.

Oh, and did I mention it even comes with its own built in Router system? So web apps can be created out of the box. Very impressive altogether.

As I mentioned, Hyperapp utilises state management based on the Elm architecture. Also included in this small package is its own virtual dom used to in a simliar way as React and Elm.

Included in the Github page is a simple example demonstrating how state is tracked.

In this particular example from the docs, we hold our state information in an object. Our state contains properties that describe what is likely to change for our component. Our actions object contains two different actions down and up that will manipulate our state to be increased or decremented depending on which button is pressed.

If you are looking for a more ES6 compliant way to write JSX you can also use Hyperx with Hyperapp. Check it out here.

And as with most JavaScript state management libraries we always want to keep our state immutable. In otherwords, when our state changes, we don’t want to edit the old version of the state but rather create a new object for the new one.

Immutability is a very important concept for state management and can prevent bugs and errors in your application.

This is very much the way you want to structure your state when using Hyperapp beyond simple demonstrative applications.

In the next section I will mention some resources that display how immutability can be used with Hyperapp.js.

While I will do plan on writing a post with some various code snippets demonstrating some of the capabilities of Hyperapp.js, I wanted to share two very good and free learning resources that you can use to get yourself familiar with it.

The first is a informative video series by Joe Santos Garcia from CodingPhase:

This is a great step by step course that includes setting up your environment while also teaching about state, actions and immutability.

Joe also makes this course quite accessible to a wide range of developers with clear and concise breakdowns and explanations.

Check out the full course here.

For a more advanced look at the Hyperapp.js paradigm, I discovered a very useful post by Dr. Gleb Bahmutov.

He goes on to discuss more advanced concepts such as reactivity and debouncing using some very nice examples.

There is a lot to be said about simplicity but there can be even more said about simplicity that doesn’t compromise functionality. For me, this describes what Hyperapp.js does for a developer.

I believe that substantial growth is inevitable for this tiny framework. It can be used for small to mid range projects and beyond.

I am considering rewriting the frontend of JSdiaries with Hyperapp. This is due to the fact that it’s so lightweight and hassle free to setup. The simple approach has enticed me somewhat and I would like to use it in combination with the WordPress API to transform this site into a web app.

Be sure to check it out the repo here.

More on this to come!