Il y a peu, 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.
Alors, ai-je été convaincu ou pas ? Laissez-moi vous raconter…
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.
Besoin d'aide ?
Lire du contenu ne fait pas tout. Le mieux, c’est d’en parler avec nous.
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, je vais encore creuser cet outil. Je l’ai testé et j’ai créé quelques POC, mais je souhaiterais l’éprouver en condition réelle. 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 semble certainement être 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, 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).
*On pourrait traduire ces termes en français, mais ça me ferait mal de franciser à ce point :-p
