Formateur Glimmer

Formatez vos templates Glimmer pour Ember.js et applications autonomes.

Template Glimmer

Formatage

Options

Glimmer Formaté

Guide Glimmer

Qu'est-ce que Glimmer

Glimmer est le moteur de rendu de composants d'Ember.js. Il utilise une syntaxe basée sur Handlebars avec des améliorations modernes : composants, arguments nommés, modificateurs et helpers. Glimmer peut aussi être utilisé de manière autonome pour des applications légères.

Syntaxe Glimmer

<AngleBrackets>

Composants invoqués avec <MyComponent /> au lieu de {{my-component}}.

@args

Arguments nommés préfixés @ : <Button @label="Click" />.

{{this.property}}

Accès explicite aux propriétés locales avec this.

{{on "event"}}

Modificateur pour les événements : {{on "click" this.handleClick}}.

Bonnes pratiques

  • Angle brackets : Préférez <Component> à {{component}} pour la lisibilité
  • Splattributes : ...attributes pour passer tous les attributs HTML
  • Tracked : Utilisez @tracked pour la réactivité automatique
  • Modifiers : Préférez les modifiers aux lifecycle hooks pour le DOM

Questions fréquentes

Glimmer vs React : quelles différences ?

Glimmer sépare template et logique (fichiers distincts), React les combine (JSX). Glimmer utilise Handlebars étendu, React utilise JSX. Glimmer a une réactivité basée sur @tracked, React sur useState/setState. Glimmer est moins répandu mais très performant.

Peut-on utiliser Glimmer sans Ember ?

Oui ! Glimmer.js est un framework autonome, plus léger qu'Ember. Il est idéal pour des widgets ou des micro-frontends. Cependant, l'écosystème est limité. Pour des projets complets, Ember avec Glimmer intégré offre plus de structure.

Comment fonctionne la réactivité dans Glimmer ?

Glimmer utilise @tracked pour marquer les propriétés réactives. Quand une propriété @tracked change, seuls les composants qui l'utilisent sont re-rendus. C'est plus efficace que le virtual DOM de React : Glimmer sait exactement ce qui a changé.

Quel formatter utiliser pour Glimmer dans l'IDE ?

Prettier avec le plugin prettier-plugin-ember-template-tag pour les fichiers .hbs et .gjs/.gts. Ember Language Server pour VS Code offre l'autocomplétion et le linting. eslint-plugin-ember pour les règles de style.