Building a Design System for Email Templates (React) by@arthur.tkachenko

Building a Design System for Email Templates (React)

image

This Slogging thread by Arthur Tkachenko occurred in slogging's official #programming channel, and has been edited for readability.

Arthur TkachenkoMay 1, 2022, 1:23 AM

Building Design System for Email Templates (React)

Arthur TkachenkoMay 1, 2022, 1:30 AM

From April 2021 I'm pushing forward a few repositories that are part of LLazyEmail organization


As you see - a lot of links and repositories. Yes it was necessary. Before it was located in one featured branch. And i realized that it's a rabbit hole that sucking a lot of energy. This is why at some point I start to split core into pieces.

main goal is simple: to create a set of components(right now it's React components, but i'm not married to it).
Components that will help other developers to generate email templates easily and didn't hit the wall, as we did.

before picking react as a main framework i was thinking for a few weeks. React was the best choice. I reviewed the progress of other tools that can be used as Template Engine. Most of them sucks and was not updated for the last 10 years.

I can't put everything into one thread - one article. So let's start with basics and move forward from it later

Arthur TkachenkoMay 1, 2022, 1:34 AM

Let's explore a few email template from developers perspective. they different from design standpoint, but still similar from the code perspective

image
image
image
image
Arthur TkachenkoMay 1, 2022, 1:35 AM

This type of systematization helped me to understand how i want to organize layouts and components

Arthur TkachenkoMay 1, 2022, 1:36 AM

plus i decide to test my components on different templates at the same time. while it's adding some chaos - i be able to really understand how to make these components useful for different cases. not to just one template. but it's draining my energy for sure.

Arthur TkachenkoMay 1, 2022, 1:40 AM

At some point i stuck πŸ™‚ and i decide to add even more templates.
but much simple one. Email templates has old, boring and fragile HTML4 structure with inline styles. And

<tables>
is a huge part of building layouts for email templates.

this is why i moved all components, related to table into this repository: https://github.com/LLazyEmail/react-email-table
While we need only one
TableComponent
inside of it - i create a few child components from it

Arthur TkachenkoMay 1, 2022, 1:40 AM
image
Arthur TkachenkoMay 1, 2022, 1:41 AM

all those components are tables with different set of attributes.

Row
,
Rows
and
Section
are components that can help to shape layouts for email templates

Arthur TkachenkoMay 1, 2022, 1:41 AM

and yeah, nothing hard inside. as we have organization name LLazyEmail - everything should be very simple...

Arthur TkachenkoMay 1, 2022, 1:49 AM

at the same time, by separating things we can create a system that might lasts for a few years.
there are few libraries on github that was doing the same/similar things. But as their maintainer get busy or less interested in his project - it's actually pretty hard to grab and use as i want it. So yes, i'm reinventing the wheel, but there is more behind it.

i hope to use these open-sourced modules as a gateway to hearts of developers πŸ™‚
Plus, by doing it this way - I can get some street cred from communities like IndieHackers, ProductHunt and for sure, Hackernoon

Arthur TkachenkoMay 1, 2022, 1:49 AM
image
Arthur TkachenkoMay 1, 2022, 1:50 AM
image
Arthur TkachenkoMay 1, 2022, 1:50 AM
image
Arthur TkachenkoMay 1, 2022, 1:57 AM

i didnt finish my readme file, so i cant put more screenshots πŸ™‚

Arthur TkachenkoMay 1, 2022, 1:59 AM

one of the reasons of expanding TableComponent was changes in my coding workflow.

Each template that I shared before has at least 1000 lines of code. and as cases are different, it's hard to just sit down, code for X hours and get done a few different email templates

Arthur TkachenkoMay 1, 2022, 2:02 AM

during my work, sometimes i imagine myself as a wave, i can move forward and i also can step back and take some time to think.

as i stuck, trying to attack complex email templates, i decide to start converting few more templates πŸ™‚ I dont think it was a bad idea to try to bite a big piece in the begining. It helped me to face different issues and it was a reason of why i decide to cut components into pieces and make them independend as fuck.

so from evolutional standpoint - it was a great idea. But i dont have enough resources to perform it.


yeah, bad for productivity, but who is judging, right?

Arthur TkachenkoMay 1, 2022, 2:09 AM

So i go to Really Good Emails and find a few Billing emails aka invoices/order confirmations.

they are simple. they still have some important information inside. They are SIMPLE. and mostly build with Tables.

image
image
image
Arthur TkachenkoMay 1, 2022, 2:13 AM

At this time i realized that our system and logic of how to organize components into folders is not ideal.

A new challenge to solve. mindmapping and writing on a real board helped a lot. I still have that schema - it helps to dig into it pretty quickly, when i need a refresher.

Like we have a typography folder. and it collecting things like Links, Headings(h1,h2,h3), Paragraphs, etc. and it's pretty isolated.
But how to separate blocks, related to whole template, but still be able to re-use them? not an easy thing to be honest

Arthur TkachenkoMay 1, 2022, 2:24 AM

and it can be a separate article related to organization of folders and components. I'm sure that my experience can help other frontend developers that trying to build a design system.

so i go to a drawing board again. let me to present you my results!

image
image
Arthur TkachenkoMay 1, 2022, 2:26 AM

cool huh?

So it's a top-level of abstraction.

like

Template
will contain both
Header
and
Footer
inside.
ContentLayout
will contain everything related to content of these email templates.
most of small components-wrappers will be put into
InteriorComponents
folder

Arthur TkachenkoMay 1, 2022, 2:28 AM

I think its enough for the first article...
but i can tease you about what is coming next πŸ™‚

here is a schema that i build in order to explain react components to other teammates

image
Arthur TkachenkoMay 1, 2022, 2:31 AM

Here is a list of other articles that connected to this topic

Email Marketing:


Building Email Tool in Public:


Comments

Signup or Login to Join the Discussion

Tags

Related Stories