به عنوان یک senior frontend developer که روی email infrastructure کار میکند، ساعتهای بیشماری را صرف مبارزه با پیچیدگیهای email HTML کردهام. اگر تا به حال email template ساختهاید، حتماً با این مشکلات دست و پنجه نرم کردهاید: nested table ها، inline style ها، Outlook-specific hack ها، و جنگ مداوم برای اینکه همه چیز در email client های مختلف درست کار کند.
اخیراً، کل سیستم email template خودمان را به MJML (Mailjet Markup Language) مهاجرت دادیم و نتایج واقعاً تحولآفرین بوده. در این پست، دلیل این تصمیم، مزایای ملموسی که دیدیم، و اینکه چطور MJML بزرگترین چالشهای email development ما را حل کرد—به خصوص در مورد minification، Outlook compatibility، و responsive design—را به اشتراک میگذارم.
MJML یک markup language است که به طور خاص برای email development طراحی شده. به جای نوشتن HTML table های پیچیده، شما tag های semantic MJML مینویسید که به email-safe HTML کامپایل میشوند.
یکی از killer feature های MJML تگ <mj-include> است که به ما امکان ایجاد component های قابل استفاده مجدد را میدهد. ما یک component library ساختهایم شامل:
Header ها (چندین زبان)
Footer ها با social link ها و app download button ها
بخشهای نمایش product/service
جدولهای breakdown قیمت
بخشهای جزئیات کاربر
قبل: بهروزرسانی footer یعنی ویرایش دستی ۵۰+ فایل HTML.
بعد: یک فایل component را بهروزرسانی کنید، و همه template ها به صورت خودکار footer جدید را میگیرند.
Outlook (به خصوص نسخههای desktop) از rendering engine مایکروسافت ورد استفاده میکند که... عجیب و غریب است. MJML اینها را به صورت خودکار handle میکند:
MSO conditional comment ها: به صورت خودکار در جایی که نیاز است اضافه میشوند
VML fallback ها: برای رنگهای background و gradient ها
Table-based layout ها: rendering صحیح در Outlook را تضمین میکند
Font fallback ها: font های missing را به صورت graceful handle میکند
ما قبلاً ساعتها را صرف debugging مشکلهای Outlook-specific میکردیم. حالا، template ها در Outlook "فقط کار میکنند" out of the box.
در mobile، این column ها به صورت خودکار stack میشوند. برای element هایی که باید کنار هم بمانند (مثل app download button ها)، از <mj-group> استفاده میکنیم:
۱. تغییرات را watch میکند در حالت development
۲. همه template ها را compile میکند با یک دستور واحد
۳. خروجی را minify میکند به صورت خودکار
۴. ساختار folder را حفظ میکند برای سازماندهی آسان
# Build همه template ها
npm run build
# حالت watch برای development
npm run watch
اسکریپت build به صورت recursive همه فایلهای .mjml را پیدا میکند، آنها را به HTML minified کامپایل میکند، و در یک folder dist/ با همان ساختار خروجی میدهد. تغییرات component به صورت خودکار rebuild همه template های وابسته را trigger میکند.
MJML workflow توسعه email ما را متحول کرده. ما template ها را سریعتر ship میکنیم، با باگ کمتر، و compatibility بهتر cross-client. سرمایهگذاری در یادگیری MJML در همان ماه اول جواب داد.
✅ MJML کد را ۸۰-۹۰٪ کاهش میدهد در حالی که maintainability را بهبود میبخشد
✅ Minification خودکار حجم فایلها را کاهش میدهد و deliverability را بهبود میبخشد
✅ Outlook compatibility داخلی ساعتها debugging را حذف میکند
✅ Responsive design out of the box کار میکند بدون media query
✅ سیستم component اصول DRY را فعال میکند و بهروزرسانیهای سریعتر را ممکن میسازد
Email development نباید دردناک باشد. MJML به ما یک رویکرد مدرن و maintainable برای ساخت email template هایی داده که به صورت سازگار در همه email client های اصلی کار میکنند. ترکیب minification خودکار، Outlook compatibility، و responsive design ساعتهای بیشماری را برای ما صرفهجویی کرده و کیفیت ارتباطات email ما را بهبود بخشیده.
اگر در حال ساخت email template در مقیاس بزرگ هستید، به شدت توصیه میکنم MJML را امتحان کنید. learning curve ملایم است، و مزایا فوری هستند.
آیا MJML را امتحان کردهاید؟ تجربه شما چه بوده؟ دوست دارم نظرات شما و هر tip ای که در طول راه کشف کردهاید را بشنوم.
این پست تجربه شخصی من در مهاجرت سیستمهای email template به MJML را منعکس میکند. دیدگاهها و نظرات بیان شده متعلق به خود من است.