This Slogging thread by Arthur Tkachenko occurred in slogging's official #programming channel, and has been edited for readability. Arthur Tkachenko May 1, 2022, 1:23 AM Building Design System for Email Templates (React) Arthur Tkachenko May 1, 2022, 1:30 AM 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 Arthur Tkachenko May 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 Arthur Tkachenko May 1, 2022, 1:35 AM This type of systematization helped me to understand how i want to organize layouts and components Arthur Tkachenko May 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 Tkachenko May 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 is a huge part of building layouts for email templates. this is why i moved all components, related to table into this repository: While we need only one inside of it - i create a few child components from it <tables> https://github.com/LLazyEmail/react-email-table TableComponent Arthur Tkachenko May 1, 2022, 1:40 AM Arthur Tkachenko May 1, 2022, 1:41 AM all those components are tables with different set of attributes. , and are components that can help to shape layouts for email templates Row Rows Section Arthur Tkachenko May 1, 2022, 1:41 AM and yeah, nothing hard inside. as we have organization name LLazyEmail - everything should be very simple... Arthur Tkachenko May 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 Tkachenko May 1, 2022, 1:49 AM Arthur Tkachenko May 1, 2022, 1:50 AM Arthur Tkachenko May 1, 2022, 1:50 AM Arthur Tkachenko May 1, 2022, 1:57 AM i didnt finish my readme file, so i cant put more screenshots 🙂 Arthur Tkachenko May 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 Tkachenko May 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 Tkachenko May 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. Arthur Tkachenko May 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 Tkachenko May 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! Arthur Tkachenko May 1, 2022, 2:26 AM cool huh? So it's a top-level of abstraction. like will contain both and inside. will contain everything related to content of these email templates. most of small components-wrappers will be put into folder Template Header Footer ContentLayout InteriorComponents Arthur Tkachenko May 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 Arthur Tkachenko May 1, 2022, 2:31 AM Email Marketing: Here is a list of other articles that connected to this topic https://hackernoon.com/email-marketing-and-how-to-curate-an-effective-business-newsletter https://hackernoon.com/5-reasons-why-newsletters-should-be-part-of-your-business-strategy 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
