Emailing çilesine son — MJML!

Email teması oluşturmak her arayüz geliştiricinin en önemli sıkıntılarından bir tanesidir herhalde. Farklı mail sağlayıcıları, farklı mail uygulamaları ve bunlardan en önemlisi ilkel HTML ve yine inline yazılmış ilkel CSS yazım zorunluluğu.

Günümüzde standart bir HTML sayfası geliştirirken div ya da ondan türemiş semantik bir etiket (section, figure vb.) kullanmadan tablolar ile bunu yapmak zorunda olduğunuzu düşünsenize. Düşünmesi bile ne kadar acı verici değil mi?

Biz de günün sonunda bunun böyle olamayacağını ve uzun dönemli olarak sürdüremeyeceğimizi düşündük. Farklı alternatif ve yöntemler üzerinde araştırma süreçleri gerçekleştirdik.

Hepsinin sonucunda kararımız MJML oldu.

MJML nedir?

Mail teması oluşturmak için geliştirilen açık kaynak bir HTML oluşturma moturu. Daha önce pug, nunjucks, handlebars, moustache benzeri template engineler ile ilgili bilginiz varsa MJML’i anlamanız daha kolay olacaktır. İşini daha iyi yapması için geliştirilmiş kendisine özgü XML formatında bir syntax a sahip. En güzel noktası ise çıktılarının farklı cihazlarda responsive olarak çalışabilmesi.

Nasıl kullanılır?

Genel yapısı aşağıdaki gibi;

Bir işaretleme dili davranışı gösterecek şekilde çalışıyor. Açılan her etiket kapanıyor. Başlangıç etiketi <mjml>. Bunun içerisinde HMTL’de body etiketine denk gelen <mj-body> mevcut. <mjml-section> ile temamız içerisinde satırlarımızı oluşturuyoruz. Satırların içerinde <mj-column> ile sütunlar oluşuyor. Section içerisinde kaç adet column etiketiniz var ise satırınız otomatik olarak o kadar sütuna bölünüyor. Yani section içerisinde art arda iki tane <mj-column> var ise genişlikleri birbirine eşit 2 sütununuz oluşacak demektir.

Çok güzelsin “include”.

Bunlarla beraber benim en sevdiğim özelliği include için destek veriyor oluşu. Hayatınızı kolaylaştıran çok güzel bir artı bana göre. Header bölümü aynı olacak 100 tane mail temanız olduğunu düşünün. Bu headerı tek bir yerden yönetmek işte bu kadar kolay;

header.mjml

<mj-section>
  <mj-column>
    <mj-text>Header yazısı...</mj-text>
  </mj-column>
</mj-section>

main.mjml

<mjml>
  <mj-body>
    <mj-include path="./header" /> <!-- or 'header.mjml' -->
  </mj-body>
</mjml>

<mj-include path=”./header” /> ile hazırlamış olduğumuz header komponentini tema dosyalarımıza include/import etmiş oluyoruz. Böylece gerekli olduğu durumlarda tek bir dosyada değişiklik yaparak 100 tane temamızın da headerını aynı anda değiştirmiş olacağız.

Nasıl çalışır ve çıktısı ne olacak?

Öncelikle yaptığınız her şey günün sonunda tamamen tablo ve inline CSS’lerden oluşan bir HTML dosyası olacak. Bu dosyayı alıp gönül rahatlığı ile kullanabilirsiniz.

Peki bu çıktıyı nasıl alacağız derseniz aslında bir kaç farklı yöntem bulunmakta.

Öncelikle MJML kodlarını derlemek için bilgisayarınızda ilgili nodejs paketini kurmanız gerekmekte. Yarn ya da npm ile bilgisayarınıza kurulumu yapabilirsiniz. Biz npm üzerinden akışı gerçekleştiriyoruz.

npm install mjml -g

komutu ile global olarak MJML paketini kurabilirsiniz. Bundan sonra üzerinde çalıştığınız dosyanın dizininde bu komutu çalıştırmanız çıktıyı almanız için yeterli olacaktır.

mjml kaynak.mjml -o sonuc.html

Tabi bu süreç biraz yorucu. Her seferinde bu komutu çalıştırmak pek hoş olmuyor. Daha kolay bir yöntem oluşturmak için bir adet gulp taskı yazdık biz de. MJML dosyalarımız üzerinde yapılan her kayıt işleminde MJML dosyalarımızı HTML’e dönüştürür hale getirdik. Bu sayede çok hızlı ve pratik olmaya başladı herşey.

İlgili gulp kodları;

Bize ne kazandırdı?

Yeni gelecek tema isteklerini büyük oranda komponentleri include edip bir kaç minimal değişiklik ve ekleme ile eskisine göre çok daha hızlı bir şekilde oluşturabiliyoruz.

İç içe girmiş CSS ve tablo kodları arasında uğraşmıyoruz. Temiz ve komponent bazlı geliştirme ortamımızda yenilikleri ve düzeltmeleri yapıyoruz.

Her zaman mükemmel olmasa da, her zaman ilk çıktıda bizim oluşturduğumuz temalardan daha fazla cihaz ve istemcide aynı aynda sorunsuz çalışan çıktılar alıyoruz. Bir nevi cross browser oranımız artıyor.

Denemek ve daha fazla bilgi almak isterseniz buradan detaylı bilgileri bulabilirsiniz. Hazır temalar ile uğraşıp daha hızlı ve detaylı öğrenim için ise buraya tıklayabilirsiniz.

Bizim için zamandan ve karışıklıktan oldukça tasarruf ettiğimiz bir altyapı çalışması oldu. Bu konuyla ilgili sıkıntılarınız ve problemleriniz varsa mutlaka denemenizi öneririz.

Görüşmek üzere, sağlıcakla kalın!

İletişim için : dev@hesapkurdu.com