HTML Email in the React World

HTML Email in the React World ResearchGate Luis Merino Apr
20, 2017

Agenda ResearchGate Mailing in HTML[4] Background Architecture Solution Design Usage

Mailing in HTML[4] Let’s journey back to the 90’s

We are dependant on CSS+HTML support • We’ve been sending
HTML in emails for about 2 decades • In 1997 HTML4 was released; in 1999 Outlook came to life

HTML status-quo in Email clients • Apple iPhone: no support
for max-width in media queries • Gmail : preprocesses to strip out any code that could be insecure • Google Android: lack of support of CSS and Gmail lacks media-queries • Outlook: TL;TR • ( here be dragons )

Global Email Client Market Share • Apple iPhone 31% •
Gmail 20% • Apple iPad 11% • Google Android 10% • Apple Mail 7% • Outlook 6% • Outlook.com 5% • Yahoo! Mail 2% • Windows Mail 1%

Email rendering in Outlook = Outlook 2000–2003 Internet Explorer (IE6–IE7)

Email rendering in Outlook = Outlook 2007/2010/2013 Microsoft Word

“Email Development Time” • Valuable • Limited • Averaging 1-2
days

“Faster Email Development Time” • Resources and know-how: blog, CampaignMonitor
• Use responsive email frameworks: Foundation for Emails, MJML • Use testing tools: Litmus instant API

Background Email template construction

Logo / Header Something interesting happened: Make research open to
a ! We are changing how scienti " c knowledge is shared and discovered. - Unsubscribe link. - Footer, disclamer, legal notes. HeaderModule AvatarModule CustomItemModule FooterModule

Architecture Addressing quality problems

Building a guarantor system • Writing JS via JSX ensures
no malformed HTML • Virtual DOM allows server side rendering • Component philosophy: reuse and update common styles • PropType validation help notify the developer of mistakes

Building with React • Advantages: ⁃ Simple, explicit and modular
⁃ Ability to conﬁgure component output ⁃ Automatic inline of styles ⁃ Able to use with bundler (webpack) ⁃ Existing solutions in and out of RG (npm)

Building with React • Drawbacks: ⁃ React only supports HTML5
tags and attributes ⁃ React mounts to an element ⁃ React provides helpful warnings for a modern website

Oy-vey “Oy provides the tools necessary to ﬁll the gaps
that React can’t (and probably shouldn’t) to help us render email templates on the server” github.com/revivek/oy

Solution Design

Design Principles • Provide a great developer experience • Easy
and predictable API • Means for reliable layout construction • Visual Testing: Litmus instant preview

Design Principles • Desired Outcome: ⁃ No more black box
development ⁃ Easy construction via components ⁃ Deal with garbage table code only once ⁃ Ensured level of consistency

MailModule PHP Renderer V8 Renderer Output Broken HTML File Litmus
screenshots Entry Point start <…> <html> end ? Black box

Visual Output JS Dev Server MailModule V8 Renderer HTML Source
Litmus screenshots start <…> <html> end √ Feedback: HMR, warnings, stacktrace… Entry Point

type: Table ce!spacing: 0 ce!padding: 0 border: 0 type: Button
width: ‘fu!’ theme: ‘solid’ width: 100% background: nova-blue-600 type: TR type: TD

type: Button CTA Text width: ‘fu!’ theme: ‘solid’ children: ‘CTA…’
<Button width=“full” href=“resea….com”>CTA Text</Button>

Thank you github.com/Rendez researchgate.net/proﬁle/Luis_Merino_Garcia ResearchGate

HTML Email in the React World

HTML Email in the React World

Luis Merino

Other Decks in Programming

Featured

Transcript