580 reads
Building a Design System for Email Templates (React)
by ArthurMay 12th, 2022
Too Long; Didn't Read
Arthur Tkachenko is releasing a React component-based design system for email templates. He hopes to use these open-sourced modules as a gateway to hearts of developers. The idea is to create a set of components that will help other developers to generate email templates easily and didn't hit the wall, as we did. Email templates has old, boring and fragile HTML4 structure with inline styles. Most of them sucks and was not updated for the last 10 years. So let's start with basics and move forward from it later.People Mentioned
This Slogging thread by Arthur Tkachenko occurred in slogging's official #programming channel, and has been edited for readability.
Building Design System for Email Templates (React)
From April 2021 I'm pushing forward a few repositories that are part of LLazyEmail organization
- https://github.com/LLazyEmail/react-email-letter-components
- https://github.com/LLazyEmail/react-email-typography-components
- https://github.com/LLazyEmail/react-email-miscellaneous-components
- https://github.com/LLazyEmail/react-plain-template-example
- https://github.com/LLazyEmail/react-email-table
- https://github.com/LLazyEmail/templates-battlefield
- https://github.com/LLazyEmail/react-email-template
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
Let's explore a few email template from developers perspective. they different from design standpoint, but still similar from the code perspective
This type of systematization helped me to understand how i want to organize layouts and components
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.
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>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
all those components are tables with different set of attributes.
RowRowsSectionand yeah, nothing hard inside. as we have organization name LLazyEmail - everything should be very simple...
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
i didnt finish my readme file, so i cant put more screenshots 🙂
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
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?
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.
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
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!
cool huh?
So it's a top-level of abstraction.
like
TemplateHeaderFooterContentLayoutmost of small components-wrappers will be put into
InteriorComponentsI 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
Here is a list of other articles that connected to this topic
Email Marketing:
Building Email Tool in Public:
- https://hackernoon.com/introducing-a-simple-npm-module-with-email-templates
- https://hackernoon.com/how-i-started-to-build-react-components-for-email-templates
- https://hackernoon.com/organizing-an-advanced-structure-for-html-email-template
- https://hackernoon.com/open-sourcing-regular-expressions-for-markdown-syntax-module
L O A D I N G
. . . comments & more!
. . . comments & more!
