Atomic Design with Templ, HTMX, Alpine.js and Tailwind

Two years ago I had my first contact with Golang. I used it for microfrontends in which I generated SSR components for React using Golang and the V8 engine (before React Server Components appeared). Golang served the frontend with data. I was building a large European e-commerce this way, but as it happens in such situations - after some time I knew that I could do some things better.

Over the last few months, I've been experimenting with Golang in a completely different way in my free time. I assumed that since various types of libraries and frameworks, originally used only to build the data presentation layer, want to be more and more backend-oriented (Nuxt, Next), maybe I will do the opposite and use something backend to replace the frontend. At first, the idea just seemed like an interesting experiment, but the more things I started checking, the more I started to realize that it wouldn't be just fun.

What I did

Two months ago I finished the prototype of the design system in which:

• components are rendered in Golang, using Templ and are built according to the Atomic Design approach;
• on the presentation layer side there is Tailwind, Alpine.js and HTMX;
• there is no difference in the user interface compared to doing design systems in React or Vue.

As a result, I reached a point in the development of this idea where:

• I have a very flexible, component-design system that can be used for monolithic architecture and microfrontends;
• the efficiency and scalability of such a solution, e.g. for e-commerce in many contexts, may be surprising;
• I am looking for extreme use cases in which "something cannot be done";

Examples

I used the approach described in one of the my previous post Extended Atomic Design structure and i have almost the same components published in Riupress UI.

Let's see how code looks like - below are some examples of component notation.

// Simple Avatar
@atoms.Avatar(
    &atoms.AvatarBosons{
        Path: "https://avatars.githubusercontent.com/u/213058?v=4",
        Size: "sm", 
        Alt: "Radosław Muszyński",
    },
)

// Button with icon
@atoms.BtnIcon(
    &atoms.BtnBosons{
        Rounded: true,
        Icononly: true,
        Light: true,
    },
) {
    @icons.IconCheck()
}

// Modal
@molecules.Modal(&molecules.ModalBosons{}) {
    <div>Some content</div>
}

// Sample input with validation
@atoms.FormField(&atoms.FormFieldBosons{}) {
    @atoms.FormLabel(&atoms.FormLabelBosons{Text: "Text in label:"})
    @atoms.FormInputField(&atoms.FormInputFieldBosons{}) {
        @atoms.FormInput(&atoms.FormInputBosons{})
    }
    @atoms.FormValid(&atoms.FormValidBosons{Info: "This value will be using by us"})
}

What's next?

Finally, in the coming weeks I will present a fully functional demo (probably of some simple online store) based on the above solutions and I will see in which direction this concept will evolve further. Regardless, I want to say that despite almost 20 years of experience in software development, it still happens that I am as happy as a child with what I do in life thanks to such projects.

IIf you are interested in my project or want a similar solution in your project - write to me! Let's talk!