Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Chroniqueur Actualités
    Avatar de Michael Guilloux
    Homme Profil pro
    Consultant
    Inscrit en
    juillet 2013
    Messages
    2 091
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 28
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Consultant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juillet 2013
    Messages : 2 091
    Points : 67 419
    Points
    67 419
    Billets dans le blog
    2

    Par défaut Hyperapp, une bibliothèque JavaScript de 1 ko pour la création d'applications Web front-end

    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
    Contribuez au club : Corrections, suggestions, critiques, ... : Contactez le service news et Rédigez des actualités

  2. #2
    Futur Membre du Club
    Inscrit en
    avril 2011
    Messages
    8
    Détails du profil
    Informations forums :
    Inscription : avril 2011
    Messages : 8
    Points : 8
    Points
    8

    Par défaut un peu de légereté

    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

Discussions similaires

  1. Zepto 1.1.3 : une bibliothèque JavaScript minimaliste
    Par vermine dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 15/12/2014, 12h16
  2. Trouver une bibliothèque JavaScript en fonction d'un besoin
    Par Kaamo dans le forum Bibliothèques & Frameworks
    Réponses: 14
    Dernier message: 11/02/2014, 12h20
  3. Réponses: 0
    Dernier message: 06/03/2013, 10h21
  4. Holla : une bibliothèque JavaScript facilitant l'utilisation des API WebRTC
    Par FirePrawn dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 21/02/2013, 11h03
  5. Réponses: 0
    Dernier message: 14/02/2013, 14h03

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo