Hyperapp V2 in Under 5 Minutes
A very quick walk through of Hyperapps’ UI system for those coming from the React, Vue, Angular, Riot, Elm, Infurno or Ember communities.
Hyperapp is a very tiny ~1.5kb user-interface library which uses a single-state model (akin to redux or Elm) and a virtual dom (akin to React) in close harmony to bridge your user-interface with the DOM. You can view Hyperapp as a complete replacement for all user-interface libraries, if your clever. Also note, the Hyperapp community is small and the V2 documentation is still under development.
Hyperapp has 5 primary concepts: immutable state, the view (h tag elements), actions, effects and subscriptions (reactions). The state model is akin to Elm but without the linguistic and conceptual baggage. It’s core tagging system is compatible with JXS but is often written in pure JS.
Philosophically, Hyperapp will give you the tools build complex UI without ever needing to rely on DOM lifecycle listeners such as *when was X element created, updated or destroyed*, instead opting for a simplistic bondage between state + UI models that is as or more efficient than all other mainstream UI systems where in-theory all UI corner cases are covered.
Import:
import { h, app } from "hyperapp";State / Actions:
You have the initial default state object that actions will change overtime. Below we have the counter example initial state.
const init = {
counter: 0,
};Let’s make two actions to change the above state (i.e. add / subtract)
const add = state => ({ ...state, counter: state.counter + 1 });
const subract = state => ({ ...state, counter: state.counter - 1});Elements (in JSX):
Here you can see Hyperapp is very akin to writting JSX / React like tagging, but instead of DOM event properties fed through the onclick listener, the state object is passed.
const view = state => (<div> <div>{state.counter}</div> <button onclick={add}>Add</button>
<button onclick={subract}>Subtract</button></div>);
Subscriptions:
Subscriptions are used to dispatch actions in response to external events like window events, URL changes, time ticks, and web socket messages.
Let’s listen to keyboard events to dispatch add/sub actions
const KeyDownSubscription = (dispatch, { onup, ondown }) => {
let handler = ev => {
if (ev.key === ‘ArrowUp’) dispatch(onup)
if (ev.key === ‘ArrowDown’) dispatch(ondown)
}; window.addEventListener(‘keydown’, handler); // subscriptions return a cleanup method
return () => window.removeEventListener(‘keydown’, handler)
});
Effects
When you want to change something besides the state, your actions must return both the new state as well as any effects you want to happen. Note, effects don’t actually execute code per sey, they represent code that needs to be executed (this is akin to commands in Elm).
Let’s make an alert happen when the counter reaches 13. First, define the alert effect
const alertFx = (dispatch, message) => window.alert(message);Now, let’s incorporate alertFx into the add action (note, we now return an array, the first item is the state, the rest are effects we want to add).
const add = state => [
{ ...state, counter: state.counter + 1 }, state.counter + 1 === 13 && [alertFx, 'Thirteen is unlucky!'],
];
Lastly, let’s put it all together (via the app ) function, and bond it to an existing HTML node (akin to react.render).
// index.jsapp({
init,
view,
subscriptions: state => [
[KeyDownSubscription, { onup: add, ondown: sub }],
],
node: document.querySelector('#container'),
});// index.html<html>
<body>
<div id="container"></div>
<script src="index.js"></script>
</body>
</html>
The Grand Finally..
That’s it!
Now you understand the basic Hyperapp V2 concepts, from here you can add in more complex asyncronous changes (async/await or promises), styling using hyperapp-styled-components, routing using hyperapp-router and much more.
I hope you enjoyed my 5 minute crash course on Hyperapp V2!
Special Thanks to Zacharias Enochsson for his corrections and Jorge Bucaran for building Hyperapp.
