MJML

le nouveau standard pour écrire nos emails ?

Par Thomas DENEULIN - @TDeneulin

KiwiParty 2018 - Strasbourg

Qui suis-je ?

  • Software Engineer chez Weglot
  • Blogueur sur Essential Developer Skills
  • Entrepreneur (DeliPress, WP GoD, ...)

DeliPress

Ecrivons un email

Hello world

En version HTML

Il faut penser

  • Au responsive
  • Aux différents clients email
  • ...

On en veut toujours plus

  • Un menu (responsive aussi ?)
  • Un carousel
  • Un accordion
  • ...

Et si on avait un langage dédié à ça ?

MJML

Markup language développé en JavaScript

Open source et totalement gratuit

L'historique

  • February 4th, 2016: MJML is released open source (after having been used for ~1 year inside Passport)
  • April 27th, 2016: MJML v2
  • May 3rd, 2016: MJML Slack
  • October 18th, 2016: MJML v3
  • February 14th, 2017: MJML API
  • February 2018 : MJML v4 !

Evolution des ★

Stars

Nombre de téléchargement

Stars

Comment ça marche ?

Structure de base



  
    ...
  
  
   
     
       ...
     
    
  

						

Une approche
section / colonne

mj-head

Informations génériques

Attributs par défaut



  
    
      
      
      
      
    
  

  					

Styles par défaut



  
   @media all and (max-width: 480px) {
     div[style*="color:#F45e46;"] {
       text-align: center !important
     }
   }
  
  
    .link-nostyle {
      color: inherit;
      text-decoration: none
    }
  

						

Les fonts



  

                        

mj-body

On utilise des composants

  • text
  • image
  • social
  • divider
  • spacer
  • table
  • button
  • raw

Mais encore...

Navbar



  Getting started
  Try it live
  Templates
  Components
  

                        

Carousel



  
  
  

                        

Accordion



  
    Why use an accordion?
    
        Lorem ipsum
    
  
  
    How it works
    
        Lorem ipsum dolor
  

                        

Hero



    
    
        GO TO SPACE
    
    
        ORDER YOUR TICKET NOW
    

                        

Vous pouvez créer le votre !

Le guide

Les contributions Open Source autour de MJML

Plus d'une centaine de repository sur Github

Package pour les éditeurs

Application desktop

mj-chart

Avec image-charts.com

Image Charts

Des constructeurs d'emails

Topol

DeliPress

GrapesJS

Pour les développeurs

Une ligne de commande


npm install -g mjml
						

mjml myEmail.mjml -o myEmail.html
						

mjml2html


import mjml2html from 'mjml'

mjml2html({
  tagName: 'mjml',
  attributes: {},
  children: [{
    tagName: 'mj-body',
    attributes: {},
    children: [{
        tagName: 'mj-section',
        attributes: {},
        children: [{
          tagName: 'mj-column',
          attributes: {},
          children: [{
              tagName: 'mj-image',
              attributes: {
              'width': '100px',
              'src': '/assets/img/logo-small.png'
              }
            },
            {
              tagName: 'mj-divider',
              attributes: {
                'border-color' : '#F46E43'
              }
            },
            {
            tagName: 'mj-text',
            attributes: {
              'font-size': '20px',
              'color': '#F45E43',
              'font-family': 'Helvetica'
            },
            content: 'Hello World'
          }]
        }]
    }]
  }]
})
						

Une API


curl \
-X POST "https://api.mjml.io/v1/render" \
--user "APPLICATION-ID:SECRET-KEY" \
-d '{ "mjml":"

  
    
      
       Hello World
      
    
  
" }'
						

L'email devient plus simple !

Vous n'avez plus de raison de refuser d'en faire.

Merci à tous