Maizzle, un framework HTML dédié à l’emailing

Mise à jour 06/03/2025 : Cet article a été mis à jour avec notre retour d’expérience sur la version 5 de Maizzle. Aller directement à la mise à jour concernant la v5.

Il y a quelques temps, on m’a demandé d’investiguer le framework pour email Maizzle ; pour un client et pour voir si cela pourrait être utile pour nous en interne. J’avoue que je m’y suis mis un peu avec des pieds de plombs… Je n’y croyais pas beaucoup. En tant que développeur email, je fais surtout confiance à ma manière de coder, et pas trop à un framework qui écrira une partie du code à ma place.

Mais deux ans plus tard, nous utilisons Maizzle pour la production d’une grande partie des emails de l’agence Badsender. Je n’aurais pas imaginé passer d’un simple test d’un outil à expert Maizzle ou développeur Maizzle en deux ans.

Un framework, c’est quoi ?

Dans ce cas-ci, on pourrait définir un framework (littéralement : cadre de travail) comme suit: un ensemble de composant structurels qui sert à créer les fondations ainsi que les grandes lignes de tout ou partie d’un logiciel.

L’objectif d’un framework est de gagner du temps, en évitant aux développeurs de passer du temps sur des choses redondantes, pour se concentrer sur d’autres points (fonctionnalités, ergonomie, …). Car oui, vous l’aurez compris, ici nous allons parler technique et un tel framework s’adresse avant tout aux équipes de production intégration et développement.

S’il permet de gagner du temps, il faut dans un premier temps en consacrer pas mal afin de le prendre en main. Ça demande d’apprendre la nomenclature du framework en question, ainsi que son fonctionnement. De plus, ça demande certaines compétences techniques afin de l’installer et de le personnaliser en fonction de ses besoins. Si ces compétences sont des compétences de base pour un développeur, elles sont moins répandues chez les développeurs email qui ont souvent des profils de designer ou d’intégrateur HTML reconverti.

Ça peut faire peur à certains, ça peut en amuser d’autres. Personnellement, j’avais l’impression de retomber dans ma jeunesse où c’était toujours la galère d’installer un jeu vidéo, avec les programmes additionnels associés (genre DirectX) dans la bonne version, puis, une fois qu’on a réussi à lancer le jeu, comprendre comment il fonctionne. Bref, pour moi, c’était plutôt fun :-p

Tailwind le framework CSS utilitaire

Avant de parler de Maizzle, il faut aborder Tailwind, qui est un autre framework, lui-même utilisé par Maizzle.
Tailwind est un framework centré autour des CSS créé à la base pour le Web. Il permet la gestion automatique des CSS via l’utilisation de la nomenclature spécifique Tailwind. Sa force, n’en déplaise au partisans des class sémantiques, est de proposer une librairie de class utilitaires qui permettent de styler un élément en les additionnant.
En gros, au lieu d’écrire

<div class=”boutton”>
Mon bouton
</div>

Avec une CSS qui ressemblera à

.button { font-size: 20px; border-radius: 5px; padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; background-color: purple; color: white; }

L’idée sera d’écrire

<div class=”f20 br5 px20 py10 white bg-purple”>
Mon bouton
</div>

Et Tailwind s’occupe lui-même de générer la feuille CSS contenant les styles appropriés :

.f20 { font-size: 20px; }
.br5 { border-radius: 5px; }
.px20 { padding-left: 20px; padding-right: 20px; }
.py10 { padding-top: 10px; padding-bottom: 10px; }
.bg-purple { background-color: purple; }
.white { color: white; }

L’opération permet donc, en connaissant la nomenclature Tailwind, de faire appel à des classes qui seront générées automatiquement sans devoir se soucier de la mise en place des CSS soi-même.

Maizzle utilise Tailwind avec un fichier de configuration qu’il adapte à l’email. Par exemple, là où les appels de base de Tailwind font généralement appel à des valeur en rem (une bonne pratique pour le Web), avec Maizzle elles seront appelées en px.

De la même manière, au lieu de générer une feuille CSS (idéal pour le web, mais à proscrire pour l’email), les styles seront placés en inline.

Et pour ceux qui ont peur de devoir apprendre le nom des classes Tailwind par coeur, ne vous en faites pas, il existe des feuilles de triches. Gardez juste à l’esprit que ces feuilles sont pour le Tailwind de base, celui qui est fait pour le web, mais elles s’adaptent facilement au Tailwind configuré pour Maizzle.

Email responsive, Tailwind pense aussi au mobile

Bien évidemment, les media queries pour le rendu mobile a été pris en compte. L’utilisation est la même que pour le style inline, il suffit simplement de préfixer le nom de la classe pour qu’en sortie le style ne soit pas placé en inline, mais dans les media queries.

Maizzle un framework pour industrialiser sa production d’email

On l’a vu, Tailwind s’occupe de rationaliser les styles. Maizzle, lui, va s’occuper de rationaliser le code HTML à proprement parler. Le framework offre un environnement de production pensé pour optimiser votre workflow. C’est pourquoi il est entièrement configurable et peut s’adapter à vos besoins.

Côté templating HTML il existe 3 niveaux d’imbrication : Les layout, les templates et les composants.

Layout

Un layout est un fichier de structure, qui a pour objectif d’être réutilisable, et dans lequel vous allez écrire tout ce qui encapsule votre contenu. Typiquement, il s’agira de la doctype, des balises meta, éventuellement de classes CSS spécifiques (comme un appel à une typo spécifique), et l’ouverture et la fermeture de votre contenu HTML.

Template

Le template est votre contenu HTML à proprement parler. Ce sur quoi les développeurs se concentrent en général. Par exemple, un header, un bloc de couverture, un bloc colonnes, et un footer. Tout ce que vous pourrez retrouver dans le body, mais également le Front matter que nous aborderons un peu après.

Composant

Un composant est un élément qui est généralement réutilisé plusieurs fois. Une fois le code du composant écrit, il suffit alors de l’appeler pour éviter à chaque fois de réécrire le même code. Typiquement, un bouton. Au lieu de réécrire chaque fois le code du bouton, il suffit d’appeler le composant et de lui passer les paramètres prévus (par exemple un lien et le texte du bouton)

L’élément central est donc le template. C’est lui qui contient votre contenu. Il va étendre un layout, c’est à dire que votre template va s’entourer du contenu d’un layout donné, et il va utiliser en son sein des composants, en leur passant un ou plusieurs paramètres.

Front Matter

Front Matter est l’entête de votre fichier de template. C’est une syntaxe YAML qui permet de définir simplement et rapidement un ensemble de contenus via des variables. Vous pouvez aussi bien y définir des éléments de texte, que des couleurs, des variables de langues, des listes, etc.
Une fois instanciés, il est possible d’appeler à loisir ces variables ou de les utiliser comme condition.

Balises logiques

Maizzle inclut également des balises spécifiques qui permettent de mettre en place différentes opérations logiques.

Conditions

Dans les balises de conditions nous retrouvons le grand classique, la balise <if> qui permet d’afficher du contenu si la condition est remplie.
On peut faire des choses plus élaborées avec des <if>, <elseif>, <else>.
On a également la possibilité de très rapidement écrire du contenu pour Outlook ou pour tout sauf Outlook avec <outlook> et <not-outlook>.
Dernière balise conditionnelle présente, la balise <switch>.

Boucles

La balise <each> permet de boucler sur un tableau ou sur des objets.

Scope^*

La balise <scope> permet d’accéder à des variables rapidement en définissant un contexte.

Fetch^*

le balise <fetch> permettent d’aller chercher des contenus distants .

Raw^*

la balise <raw> permet d’éviter de parser le contenu qui est à l’intérieur de la balise.

Bref, vous pouvez voir que le framework Maizzle offre une belle boîte à outil pour coder les emails. Je ne détaille pas ici toutes les utilisations possibles de ces balises ainsi que leur nomenclature détaillée, mais vous pouvez consulter la documentation technique de Maizzle à ce sujet, elle est complète et bien fichue

Tout ça, c’est pour la base. Après, il y a le reste…

Advanced mode

L’avantage des framework, c’est que ce sont des bacs à sable. Ils offrent un contexte et tout une série d’outils, et libre au développeur d’en faire ce qu’il veut. Il est donc par exemple possible d’utiliser plusieurs layout, d’avoir des composants dans des composants, de personnaliser via un fichier de configuration la nomenclature des tags (si par exemple vous souhaitez changer les <each> en <for>), la configuration de Tailwind (pour ajouter une classe Tailwind m-0-auto pour margin: 0px auto; par exemple), l’ajout automatique d’attributs sur des balises (transformer un <table class=”m-0-auto”> en <table cellpadding=”0” cellspacing=”0” border=”0” role=”presentation” style=”margin:0px auto;”>), etc.

Bref, vous l’aurez compris, les possibilités sont nombreuses. Une fois l’outil pris en main, la configuration des différents processus réalisé, Maizzle peut faire gagner beaucoup de temps en production.

Output

En sortie, Maizzle va fournir un beau fichier HTML, avec un dossier image associé (pour les images qui étaient en chemin relatif dans le fichier de template) et tout le code HTML compilé selon les fichiers de configuration, pour obtenir au final un fichier HTML unique exploitable pour n’importe quel routeur.

To Maizzle or not to Maizzle, that is the question

Maizzle est-il la solution, celle qui vous permettra de fluidifier votre production email et le seul outil de développement dont vous aurez à jamais besoin ? Cela dépendra grandement de votre type de production. Tout d’abord, il faut garder en tête que Maizzle est un outil de développeur pour les développeurs. Il demande donc des compétences techniques afin de l’installer, de le configurer et de l’utiliser. Ensuite, si votre production email est très hétéroclite, il sera compliqué de la rationaliser en la découpant en éléments réutilisables. Malgré tout, Maizzle reste très efficace en tant que framework pour simplifier et accélérer l’écriture de votre code HTML pour email.

Du côté de Badsender, nous sommes avons passé une grande partie de nos intégration html d’email sur Maizzle. Et être experts Maizzle, ça nous fait gagner plein de temps. En tant qu’agence, notre production email est très hétéroclite, mais nous devons parfois produire de nombreuses déclinaisons d’emails en peu de temps pour certain client, et Maizzle est un outil efficace pour nous aider à cela.

Dans un avenir plus ou moins proche, nous mettrons en ligne une doc pour la mise en place du framework pour email Maizzle. En attendant, pour les anglophones, n’hésitez pas à aller voir la doc officielle qui est très complète!

Retour d’expérience sur Maizzle, un an après

Un an après avoir découvert ce framework, je peux vous dire que je ne jure (pour le moment) que par lui. Nous l’avons mis définitivement en place chez Badsender comme outil de production depuis janvier. Je ne peux que vous inviter encore une fois à creuser ça, car l’essayer, c’est l’adopter!

J’ai également eu la chance de participer à l’EMDay 2023 et de présenter Maizzle là-bas. En substance, j’ai raconté ce qui est écrit plus haut dans cet article, et j’en ai profité pour en faire une vidéo avec Jonathan que vous pouvez trouver en suivant ce lien (spoiler alert: une deuxième vidéo suivra pour une démo d’utilisation plus avancée).

Si ça vous intéresse, voici également la présentation utilisée:

Et enfin, le lien vers le Github contenant les fichiers démo utilisés dans la vidéo si vous souhaitez voir à quoi ça ressemble (n’oubliez pas d’installer la librairie Node pour chacun des 3 projets démo si vous souhaitez faire tourner l’ensemble).

Les nouveautés de la version 5 de Maizzle

Temps de génération

Si la version 5 apporte beaucoup de nouvelles choses, pour l’usage que nous en avons chez Badsender c’est surtout sous le capot que les améliorations ont eu lieu. Le cœur de cet update, c’est le temps de génération des emails. Si pour un email simple la différence est pour ainsi dire nulle, pour des emails complexes, le gain de temps peut s’avérer énorme. Un gain de temps qui tourne, suivant les cas, autour d’un facteur 10 ou plus. Et passer de 2h à 10min, ça fait plaisir!

ESM, CSS et autre

Pour le reste et ben… mouais. Le fichier de config est désormais au format ESM, et si vous souhaitez mettre à jour vos anciens projets, cela vous demandera de réécrire une bonne partie de vos fichiers config, et parfois de faire des modifications au sein même des emails. Pas hyper pratique tout ça. Heureusement, il existe un guide très bien fait (en anglais) pour vous aider à faire la transition entre la version 4 et la version 5.

En plus du temps de génération, il existe d’autres améliorations plus mineures: meilleur support CSS, réaménagement des instructions de config, etc. Rien de révolutionnaire pour l’utilisation que nous avons de Maizzle chez Badsender.

Par contre, le changement des fichiers de config et du format ESM nous a posé quelques problèmes… Dans les fichiers config de la version 4, on pouvait cibler les fichiers emails que l’on désire générer ainsi que les dossiers images, pour aller exporter le tout dans un dossier précis. Dans la version 5, on peut toujours cibler les images pour l’export, ainsi que leur destination, mais il n’est plus possible de cibler les fichiers html précis que l’on souhaite exporter. L’ensemble de l’architecture des dossiers et tous les fichiers HTML sont exportés. Ce qui peut provoquer pas mal d’ennuis e fonction de votre manière de travailler. Il existe des solutions de contournements: Pierre par exemple a écrit un petit script qui vient prendre les fichiers exportés, les range à l’endroit souhaité avec l’architecture souhaitée, et supprime le reste.

Une autre modification de cette version 5 entre également en conflit avec le code qu’on utilise pour écrire nos templates LePatron. Là aussi, Pierre a trouvé un contournement grâce à l’ajout de parenthèse.

Support

Bref, si nous avons gagné beaucoup de temps sur la génération de quelques énormes fichiers, la transition ne s’est pas faite sans douleur. Si je suis bien conscient de la dépendance aux autres technologies et de la nécessité de faire évoluer le framework, je trouve toujours cela dommage d’avoir des changements qui modifie structurellement la manière dont le framework jongle avec l’architecture des dossiers et la nomenclature.

Heureusement, on s’en sort, mais on ajoute une couche de complexité, ce qui est dommage. Par contre, tout ces changements indiquent que le développeur est actif et maintient son projet à jour. De plus, il y a toujours la possibilité d’ouvrir des tickets pour signaler les problèmes que vous rencontrez ou faire des demandes! D’ailleurs, peut-être notre problème d’export sera modifié par la suite, un ticket est ouvert à ce sujet.

Malgré tout, au final, nous avons trouvé des solutions à tous les points qui étaient bloquants pour nous. Maizzle est une telle boîte à outil et nous facilite tellement la vie que nous ne sommes pas prêt de nous en passer…

_{*On pourrait traduire ces termes en français, mais ça me ferait mal de franciser à ce point :-p}