3256 sujets

Critiques de vos sites: code et design

Refonte complète de TemplateEngine (plus malin)

Modérateur
Salut les amis,

Je viens de passer plusieurs soirées (et quelques nuits) à retravailler TemplateEngine, ma petite librairie de templates JavaScript, et je suis trop content de vous présenter le résultat à nouveau !

Pour ceux qui ne connaissent pas : c’est un moteur de templates ultra-léger, avec échappement HTML automatique, cache intelligent, et un système de plugins modulaires. En gros, il fait le café sans prendre de place.

Ce qui a changé :
- Syntaxe épurée et évite les conflits avec d'autres moteurs de template (jinja, twig, etc.)

[[= variable ]], [[ if (cond) { ]], [[> partial ]]

- Plugins optionnels : partiels, helpers, mode strict, i18n, async… vous payez que ce que vous utilisez !
- Performances boostées : cache LRU intégré, compilation unique, rendu en ~0.3ms après la première fois.
- Sécurité renforcée :Mode strict pour attraper les variables undefined (parfait pour les refactorings hasardeux).

Un petit exemple pour la route :

npm i @niuxe/template-engine



import { TemplateEngine } from '@niuxe/template-engine'

const engine = new TemplateEngine()
const html = engine.render(`
  <h1>[[= title ]]</h1>
  [[ if (user.admin) { ]]
    <button>Panier secret de l’admin</button>
  [[ } ]]
`, { title: 'Bonjour le forum !', user: { admin: true } });


Taille comparative (pour les curieux) :
TemplateEngine (core) : 950 bytes
TemplateEngine (full plugins) : ~2150 bytes
Handlebars : 20 KB

Ce moteur de template tient dans un Tweet ou dans un SMS.

Ça vous tente ?
Il est parfait pour les SPAs/PWA, les emails, les petits projets où chaque octet compte. À éviter si vous voulez laisser vos utilisateurs écrire leurs templates. (Sécurité, quand tu nous tiens…)

N’hésitez pas à tester, ouvrir des issues, proposer des plugins, ou simplement rigoler de ma bataille avec npm.

Merci à ceux qui m’ont inspiré : EJS, Underscore, et tous les minimalistes du JavaScript.

Signaler un bug ? ouvrez une issue avec un exemple minimal, je vous offre un gif de chat en retour.

Bon code à tous
Modifié par Niuxe (16 Jan 2026 - 17:27)
Modérateur
Bonjour,

KassanWebQuizz a écrit :
Super effort !


Merci

KassanWebQuizz a écrit :

La syntaxe est bien moins intuitive que Handlebars ou Mustache.


C'est ma syntaxe.

KassanWebQuizz a écrit :
Un dimanche ou on s'ennuie ?

Non pas du tout. Initialement, c'était un besoin simple. Avoir un moteur de template simple et léger.

KassanWebQuizz a écrit :
Pourquoi faites vous ça alors que c'est inutile ?


Il suffit de voir la capture écran dont le contenu provient du README

Comparons Handlebar et TemplateEngine (core + partial) :
Handlebar 4.7.8 = 26kio¹
TemplateEngine (core + partial (que je vais encore améliorer)) = 1.2 kio

Soit 21 fois plus léger et plus rapide. À ma connaissance, Handlebar n'a pas de système de cache intégré. Donc, une fois que le template est chargé et réaffiché, je suis plus rapide . 

import { TemplateEngine } from '@niuxe/template-engine'
import { PartialsPlugin } from '@niuxe/template-engine/plugins/partials'

const engine = new TemplateEngine().use(PartialsPlugin)

engine.partial('header', '<header><h1>[[= title ]]</h1></header>')
engine.partial('footer', '<footer>© 2025</footer>')

const html = engine.render(`
  [[> header ]]
  <main>[[= content ]]</main>
  [[> footer ]]
`, { title: 'Mon Site', content: 'Bienvenue !' })

_____

¹ mon calcul pour connaître le poids environ : 

wget  https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.8/handlebars.min.js  && gzip -c handlebars.min.js | wc -c

Modifié par Niuxe (19 Jan 2026 - 02:34)
Prévenir un modérateur
Répondre au sujet
Aller à