Discussion :

[Michael Guilloux]

Hyperapp, une bibliothèque JavaScript de 1 ko pour la création d'applications Web front-end
En quoi diffère-t-elle des bibliothèques existantes ?

Annoncé en version 1.0 fin décembre 2017, Hyperapp est une bibliothèque JavaScript de 1 ko pour la création d'applications Web riches en fonctionnalités. Il s'agit d'une API à deux fonctions : hyperapp.h et hyperapp.app. La première fonction - hyperapp.h - retourne une nouvelle arborescence de nœuds de DOM virtuel et hyperapp.app monte une nouvelle application dans l'élément DOM spécifié.

Pour en venir aux applications Hyperapp, elles se composent de trois parties interconnectées : l'état, la vue et les actions.

L'état est un objet JavaScript qui décrit le modèle de données de votre application. Il comprend toutes les données dynamiques de l'application pendant son exécution. L'état ne peut être muté une fois qu'il est créé. La seule façon de le changer est au moyen d'actions. Sur la page GitHub du projet, une action est définie comme une fonction unaire (acceptant un seul argument) qui attend une payload. La payload ou charge utile peut être tout ce que vous voulez transmettre dans l'action. Chaque fois que l'état de votre application change, la fonction de vue est appelée afin que vous puissiez spécifier la manière dont vous souhaitez que le DOM apparaisse en fonction du nouvel état. La vue renvoie votre spécification sous la forme d'un objet JavaScript (un DOM virtuel) et Hyperapp prend soin de mettre à jour le DOM réel pour refléter le changement d'état.

L'exemple de code ci-dessous donne un aperçu du fonctionnement de la bibliothèque JavaScript. Il s'agit du code d'un compteur qui peut être incrémenté (en cliquant sur le bouton +) ou décrémenté (en cliquant sur le bouton -).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
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)

Le code ci-dessus est plus ou moins ce à quoi ressemble chaque application Hyperapp. Un seul objet d'état, des actions pour modifier l'état et une vue qui traduit l'état et les actions dans une interface utilisateur. En guise de description, notons qu'avec la fonction app(), Hyperapp fait une copie de votre état et de vos actions et les transmet à la vue :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Ci-dessous l'état initial de l'application. Dans le code exemple, le compteur est à zéro :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
const state = {
  count: 0
}

L'état étant un objet immuable, pour le changer, vous devez définir des actions et les appeler. Il y a ici deux types d'actions. Une action down pour décrémenter le compteur, et une action up pour incrémenter le compteur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
const actions = {
  down: value => state => ({ count: state.count - value }),
  up: value => state => ({ count: state.count + value })
}

Dans la vue, vous pouvez définir les propriétés de l'état, l'utiliser pour déterminer quelles parties de votre interface utilisateur doivent être affichées ou masquées, entre autres. Vous pouvez également attacher des actions aux événements DOM…

Ici, le premier niveau de titre est appliqué à la valeur du compteur. Deux évènements sont également définis : cliquer sur le bouton + incrémente d'une unité la valeur du compteur et cliquer sur le bouton - décrémente d'une unité la valeur du compteur.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
    <h1>{state.count}</h1>
    <button onclick={() => actions.down(1)}>-</button>
    <button onclick={() => actions.up(1)}>+</button>

Vous pouvez essayer le code directement en ligne.

Dans une interview, Jorge Bucaran, le créateur d'Hyperapp en dit plus sur sa bibliothèque JavaScript. « Hyperapp offre un modèle unique et immutable. L'état est toujours un objet JavaScript et peut contenir tout ce qui a un sens pour votre application », a-t-il expliqué. Avec Hyperapp, « les utilisateurs interagissent avec votre application pour déclencher des actions. Les actions peuvent être utilisées de diverses manières, mais leur but ultime est de mettre à jour l'état. Elles le font en retournant un nouvel état (ou état partiel) qui fusionne avec celui en cours et le remplace », dit-il. Hyperapp permet également l'utilisation de composants sans état, « des fonctions pures qui ne savent que se rendre elles-mêmes et quelles actions elles sont autorisées à déclencher ».

En quoi Hyperapp diffère-t-il des autres solutions ? À cette question, Jorge Bucaran explique que sa bibliothèque JavaScript est inspirée de l'architecture d'Elm (un langage fonctionnel compilant en JS) pour la gestion d'état et ne s'appuie pas sur des bibliothèques externes telles que Redux, « ce qui vous permet de créer des applications fonctionnelles presque pures out of the box ». Il estime également qu'Hyperapp se différencie des autres par le fait qu'il est facile à comprendre : « Si vous pouvez lire les 300 lignes de code, vous verrez tout ce que vous devez savoir sur Hyperapp. » La taille de la bibliothèque (environ 1 ko) est également mise en avant, mais aussi la performance. Jorge Bucaran explique en effet que l'attention est toujours portée sur la performance, et les derniers benchmarks, au moment de l'interview, suggéraient qu'Hyperapp n'était pas loin derrière les grands noms comme React ou Vue.

Sources : GitHub, Annonce de la sortie d'Hyperapp 1.0, Interview avec Jorge Bucaran, Site officiel Hyperapp

Et vous ?

Que pensez-vous d'Hyperapp ? L'avez-vous déjà testé ?
Pour ce que vous savez d'hyperapp, comment le jugez-vous par rapport aux alternatives ?

Voir aussi :

Rubrique JavaScript : accueil, forums, FAQ, tutoriels, sources
Quels EDI utilisez-vous en 2018 dans le cadre de vos activités de développement Web ? Pourquoi ce choix ? Partagez vos avis
Quel est l'intérêt d'écrire ou réécrire un logiciel en JavaScript ? Partagez votre expérience
Angular : la version 6.0.0 du framework JavaScript de Google est enfin disponible, mais sans le nouveau moteur de rendu Ivy
Sortie de Node.js 10.0.0 avec le support officiel de N-API et OpenSSL 1.1.0, la version LTS de la série 10.x est prévue pour octobre 2018

[oduhart]

Bonjour,

J'ai testé rapidement hyperapp sur codepen.io. Par rapport aux frameworks habituels du moment, quelle légereté ! au delà du poids de la lib, c'est la compacité du code à produire qui me plait et l'absence de "boilerplate" excessif. A voir dans le cadre d'une vrai appli évidemment et je doute qu'hyperapp puisse détroner les superstars vue.js angular et react avant un moment.


Olivier