Hyperapp est une bibliothèque JavaScript ultra légère qui ne pèse que 1,4 Ko. Elle permet de développer des applications web frontales. Son architecture emprunte à React, Redux et Elm.

La devise de Hyperapp est : faire plus avec moins. Hyperapp combine la gestion d'état avec un moteur DOM virtuel prenant en charge les mises à jour par clé et les événements de cycle de vie, le tout sans aucune dépendance.

Une application Hyperapp est constituée de trois parties interconnectées : l'état, la vue et et les actions. L'état est un objet JavaScript qui ne peut être modifié qu'au moyen d'actions. La modification est alors reflétée dans le DOM réel de la page web par la partie vue.

Voici un exemple de code :

import { h, app } from "hyperapp"

const state = {
  count: 0
}

const actions = {
  down: value => state => ({ count: state.count - value }),
  up: value => state => ({ count: state.count + value })
}

const view = (state, actions) => (
  <div>
    <h1>{state.count}</h1>
    <button onclick={() => actions.down(1)}>-</button>
    <button onclick={() => actions.up(1)}>+</button>
  </div>
) 

app(state, actions, view, document.body)

Ce code affiche un compteur qui peut être incrémenté ou décrémenté par des clics sur des boutons. Le code définit clairement chacune des trois parties de l'application. Après quoi la dernière ligne qui lance effectivement l'application, attache la vue à un élément du DOM réel.

Ce code peut-être testé sur une démonstration en ligne.

Hyperapp est open source, sur GitHub.