Regular.js : Minifier votre code html

coucougael94 Le 4 juin 2017 à 14:13 (Édité le 25 janvier 2019 à 17:53)

Salut,
En bossant sur un projet, je me suis confronté a une situation : Le code html était beaucoup trop répétitif pour un code
quasi identique; Cela alourdie également la bande passante d'un site.
J'avais donc besoin d'un framework front-end comme Angular.js, mais celui-ci avait l'air trop lent et trop complexe.
Je me suis donc lancé dans mon propre projet : Regular.js
Pourquoi ce nom ?
Ce nom ressemble fortement a Angular.js, également un framework. Regular
représente aussi mon problème : le code est régulièrement le même.
Comment ce servir de ce framework ?
Exemple 1 (valable pour toutes les versions) :

<tr class="regular" data-make="(data-art=Jus de citron;title=Limonade)" data-art="{%data-art%}">
<td>{%title%}</td>
</tr>

Retourne avec le framework :

<tr class="regular" data-make="(data-art=Jus de citron;title=Limonade)" data-art="limonade">
<td>Jus de citron</td>
</tr>

Exemple 2 (depuis la version 0.1) :

<div class="regular" data-make="(data-art=Jus de citron)" data-art="{%data-art%}">
<h1>{%data-art%}</h1>
<p>{%data-art%}</p>
</div>

Retourne avec le framework :


<div class="regular" data-make="(data-art=Jus de citron)" data-art="Jus de citron">
<h1>Jus de citron</h1><p>Jus de citron</p></div>

Exemple 3 (depuis la version 0.2) :

<tr class="regular" data-make="(data-art=limonade;title=Limonade)(data-art=diabolo;title=Diabolo)(data-art=morito;title=Morito)" data-art="{%data-art%}">
<td>{%title%}</td>
</tr>

Résultat :


<tr class="regular" data-make="(data-art=limonade;title=Limonade)(data-art=diabolo;title=Diabolo)(data-art=morito;title=Morito)" data-art="limonade">
<td>Limonade</td>
</tr>
<tr class="regular" data-make="(data-art=limonade;title=Limonade)(data-art=diabolo;title=Diabolo)(data-art=morito;title=Morito)" data-art="diabolo">
<td>diabolo</td>
</tr>
<tr class="regular" data-make="(data-art=limonade;title=Limonade)(data-art=diabolo;title=Diabolo)(data-art=morito;title=Morito)" data-art="morito">
<td>Morito</td>
</tr>

Remarque : la classe et l'attribut "data-make" ont été copié sur les deux autres noeuds. Ceci est modifiable très facilement.
Exemple 4 (depuis la version 0.3) :

<tr class="regular" data-make="(Nom de l'animal=patate)">
<td>{%Nom de l'animal%}</td>
</tr>
<tr class="regular" data-make="(Légumes=limonade)(Légumes=limonade)">
<td>{%Légumes%}</td>
</tr>

Donne :


<tr class="regular" data-make="(Nom de l'animal=patate)">
<td>patate</td>
</tr>
<tr class="regular" data-make="(Légumes=limonade)(Légumes=limonade)">
<td>limonade</td>
</tr>
<tr class="regular" data-make="(Légumes=limonade)(Légumes=limonade)">
<td>limonade</td>
</tr>

Télécharger
Le téléchargement est disponible sous license MIT, a cet adresse : https://github.com/coucougael94/Regular.js.
Merci de vos commentaire.

Balatharas Le 4 juin 2017 à 19:57

Salut tu pourrais poster un code suivi du résultat qu'il donne ?

coucougael94 Le 4 juin 2017 à 20:14

C'est fait (C'est mieux fait que tout a l'heure). Malheureusement, l'éditeur n'est pas très permissif, il ne permet pas de changer la taille du texte (pour faire des titres et des sous-titre).
Je te laisse donc voir sur la page du framework le mode d’emploi correctement stylisé.

TheOldNoob Le 4 juin 2017 à 23:05

Salut Coucougael,

Cool d'avoir créer un framework ! c'est du boulot.

Par contre je ne suis pas d'accord avec toi sur angular que j'utilise et qui est certes lourd a apprendre car pas forcément évident, mais reste ultra rapide et les pages se charges pratiquement instantanément.

coucougael94 Le 5 juin 2017 à 12:21 (Édité le 5 juin 2017 à 12:22)

Par contre je ne suis pas d'accord avec toi sur angular que j'utilise et qui est certes lourd a apprendre car pas forcément évident,
mais reste ultra rapide et les pages se charges pratiquement
instantanément.

Je pense que163ko pour un seul FW (v1.6.4) c'est trop lourd, alors que par exemple JQuery n'en fait que 84 (v3.2.1) et regular.js non minifié ne fait que 1ko.

TheOldNoob Le 5 juin 2017 à 16:56

Sauf que jquery est une librairie et qu'Angular est un framework.
Les deux ne font pas la même chose. C'est d'ailleurs pas comparable. Surtout que j'utilise pratiquement toujours les deux en même temps.
Après, il ne faut pas comparé deux outils par leur poids. C'est ce que je faisais au début. Par exemple, je peu comparé deux framework CSS comme Knacss et Bootstrap, l'un fait 2000 lignes, l'autre en fait presque 7000€ au chargement d'une page avec une petite connexion, ça peu se ressentir.
Et pourquoi, c'est pas comme ça qu'il faut voir la chose? mais, qu'est-ce que peu apporter l'un ou l'autre? Knacss m'offre une grille simple et légère une syntaxe simple alors que bootstrap va être plus complet et offrir plus d'outils, mais la prise en main sera plus longue.

Chaque outils apporte forcément des choses différentes et en fonction de ce que tu doit faire, tu doit aussi faire un choix de techno.

coucougael94 Le 5 juin 2017 à 18:34

Oui, c'est pas toujours "lourd", dans le sens ou l'utilisation compense mais les personnes qui sont en bas débit...

Échange

Articles / Vidéos

Ressources