unviewed

Un mini-framework JS inspiré de "hyperapp" (jorgebucaran/hyperapp) dans son fonctionnement - mais pas une copie pour autant ^^

Préambule

Il y a quelques années, déjà, j'ai découvert le projet de "jorgebucaran", nommé Hyperapp, consistant en un micro-framework d'à peine 1Kb une fois minifié et gzippé.

Je l'ai largement utilisé dans mes petits projets, mais je voulais créer ma propre version, dépourvue du système de vue, d'où le nom de ce projet (Unviewed -> pas de vue).

En effet, le recours à JSX, bien que je l'apprécie, implique d'avoir du code "HTML-like" au milieu de son code JS, ce que je regrette.

Les framework plus gros, tels que Vue ou évidemment React, ne me satisfont pas sur ce point, dans la mesure où là encore, le code de la vue, se retrouve dans un template, parfois noyé au sein de notre JS.

L'approche "Unviewed"

L'idée de ce framework, est de rester fidèle dans l'esprit à ce qui a été mis en place dans React ou même Hyperapp, avec un State stockant les variables, des Actions gérant les fonctions de raffraichissement de la donnée, et un Container dans lequel sera appliqué ce code.

La différence, c'est qu'au lieu de recharger un template entier à chaque fois que le State change, on applique une succession de fonctions JS, comme on le ferait sans framework.

Mini-démo

Lancez simplement npm i unviewed depuis votre projet. Premier constat: aucune dépendance n'est nécessaire.

Dans le répertoire node_module/unviewed, vous trouverez un fichier index.html. Ouvrez-le tel quel dans votre navigateur! Le code d'Unviewed se trouve dans le fichier index.js, tandis que le code de la démo est dans demo.js

Installation

Exécutez simplement npm i unviewed puis dans votre code javascript, importez avec import App from 'unviewed', et vous êtes prêts! Aucune dépendance, pas besoin de bundler (Webpack, Parcel ou autre), le code est écrit en pure Javascript, et tient dans un seul fichier de 82 lignes de codes!

Tutoriel

Construisons une mini-application, comprenant un tableau, dans lequel nous insérerons des utilisateurs en cliquant sur un bouton "ajouter"

NOTE Cet exemple ne portant pas sur le style de l'application, vous pouvez appliquer la cinquantaine de lignes de CSS contenu dans index.css, ou appliquer votre propre style.

Créons un fichier HTML contenant:

• une <div> englobante (container)

• un bouton "+" permettant d'ajouter un utilisateur

• l'élément <table>

 <div class="row" id="table-ctnr"> <!-- notre Container applicatif-->

    <div class="col s3">
      <button id="create"> <!-- le bouton "ajouter" -->
        +
      </button>
    </div>

    <table class="col s12" id="users-table"> <!-- la table -->

      <thead>
        <th>
          Action
        </th>
        <th>
          Index
        </th>
        <th>
          Nom
        </th>
        <th>
          Prénom
        </th>
        <th>
          Âge
        </th>
      </thead>
      <tbody id="users-table--tbody">
        <tr> 
<!-- 
Notez une rangée permettant d'indiquer qu'il n'y a encore aucun utilisateur 
-->
          <td id="no-result" colspan="4">
            Aucun résultat
          </td>
        </tr>
      </tbody>
    </table>
  </div>

Dans le fichier demo.js, commençons par importer le code de Unviewed:

import App from 'unviewed';

Puis, créons l'app liée à notre table:

let j = 0;

const users_table = new App({

    container: 'table-ctnr', /* <== l'id de notre Container */

    users: [], /* <== le State est très simple, un tableau d'users! */

    /* une seule Action ici, nommée CreateUser */
    createUser({ users }) {
      users.push(
        user_row(
          { id: j++, 
          { nom: 'doe', prenom: 'john', age: 30 },
          parent: users_table
          }
        ));
      App.update(nb_users);
    },

    /* et enfin, en lieu et place de l'élément View ou d'un template habituel, nous trouvons ci-dessous le code JS à appliquer en cas d'évènement */

    events: {
      onclick: actions => ({

        /* ici, c'est très simple:
        si un click survient sur le bouton "+" (dont l'id est "create"),
        on appelle notre action "createUser" */

        '#create': (state) => {
          actions.createUser(state);
        }
      }),

      /* cette partie est peut-être moins compéhensible de prime abord:
      -> lorsque notre action "createUser" sera appelée, on raffraichira la vue HTML en efectuant une série de fonctions sur les élements HTML */
  
      onupdate: () => ({

        /* la rangée indquant que le tableau est vide est affichée / masquée si on a des utilisateurs insérés
        '#no-result': ({ target, users }) => target.classList[users.length ? 'add' : 'remove']('hidden'),

        /* à chaque user ajouté, on insère une rangée dans le tbody notre table */
        '#users-table--tbody': ({ target, users }) => users.forEach(user_row => target.prepend(user_row.container))
      })
    }

  });

Et là, normalement... ça ne fonctionne pas!

En effet, nous n'avons pas encore défini comment représenter un utilisateur.

Créons donc une nouvelle app, nommée user_row:

1. Nous n'avons pas encore représenté, dans notre HTML, ce qu'est un utilisateur. Bonne nouvelle, la balise <template> est faite pour ça!
2. Idem, en javascript, nous n'avons pas défini la variable user_row (notre mini-app supplémentaire).

HTML

<template>
    <tr>
      <td>
        <button class="del-this"> <!-- le bouton permettant de supprimer cet utilisateur -->
          -
        </button>
      </td>
      <td class="user_id"></td>
      <td class="user_nom"></td>
      <td class="user_prenom"></td>
      <td class="user_age"></td>
    </tr>
  </template>

JS

Nous n'avons pas encore d'utilsateur à présenter. Créons donc une fonction qui génèrera une app, en prenant le State en paramètre.

Insérons ce code, avant la déclaration de notre app users_table

const user_row = (state) => new App({

    /* cette fois, le Container est un élément HTML */
    container: document.querySelector('template'),

    /* le State n'est pas encore connu */ 
    ...state,

    /* là encore, une seule Action, permettant de supprimer un utilisateur lorsque l'on clique sur le bouton "-" */
    
    remove(state) {
      const //
        { parent, entity } = state; /* <== 
        le State contient une référence à l'app courante, mais aussi à l'app parente (la table)! 
        */
      App.remove(entity); // supprime l'app courante
      App.update(parent); // supprime l'app parente
    },

    events: {
      onclick: actions => ({
        '.del-this': actions.remove // click sur le bouton "-"
      }),

      /*
      On peuple les colonnes avec les éléments contenu dans le state passé en paramètre 
      */
      onupdate: () => ({
        '.user_id': ({ target, id }) => target.innerText = id,
        '.user_nom': ({ target, nom }) => target.innerText = nom,
        '.user_prenom': ({ target, prenom }) => target.innerText = prenom,
        '.user_age': ({ target, age }) => target.innerText = age,
      }),
    }

  });

Pour finir, affichons un petit récap' du nombre d'utilisateurs insérés:

<p id="nb-users">
    Vous avez créé
    <span id="nb">
      0
    </span>
    utilisateur<!--
    no-space 
    --><span id="pluriel"></span><!-- no-space -->!
</p>

Créons une mini-app, gérant le nombre d'utilisateur

const nb_users = new App({

    container: 'nb-users', /* la balise p dont l'id est "nb-users"

    events: {

      /* 
      aucun évènement "click", "keyup" ou autre, puis qu'il n'y a aucune action possible (pas de bouton) 
      */
      onupdate: () => ({
        '#nb': ({ target }) => target.innerText = users_table.state.users.length,
        '#pluriel': ({ target }) => target.innerText = users_table.state.users.length > 1 ? 's' : ''
      })
    }

  });

Vous aurez noté que l'on indique le nombre d'utilisateurs en se basant sur le State de notre table users_table!

Et voilà...

Ce projet n'a aucune prétention, ne veut "concurrencer" aucun framework JS existant. Il s'agit plus pour moi d'une sorte de proof-of-concept que je voulais réaliser depuis quelques temps déjà.

Il s'agit aussi d'un hommage au travail colossal qu'accomplissent les développeurs chaque jours, que ce soit pour réaliser d'énormes et incroyables frameworks (Vue, React, Meteor, Angular, etc...), ou pour apporter sa petite pierre à l'édifice, comme Hyperapp l'a fait en son temps.

Vive l'open source!