Made withAlpine.jsClip

GOAT Stack: Build Fast, Scalable Apps with Go, templ, Alpine.js, and Tailwind

M

MoreThanCoder

Creator on the Alpine.js channel

Watch on YouTube ↗

29K viewsOct 11, 202410:53 runtime

Discover the GOAT Stack, a modern, high-performance framework for building fast and scalable web applications with Go. This guide explains how to leverage Go on the backend with templ for efficient, type-safe HTML rendering inside your Go files. Learn to integrate Alpine.js for…

Chapters

#alpinejs#clip#frontend

The GOAT Stack

The GOAT Stack is a modern, performance-oriented set of technologies for building web application frontends, designed to be complimentary to the Go programming language.

It consists of:

Go: For the backend logic and serving.
Templ (templ): A Go template engine for creating type-safe, component-based HTML within Go.
Alpine.js: A lightweight JavaScript framework for client-side interactivity.
Tailwind CSS: A utility-first CSS framework for styling.

Note
The GOAT Stack is a front-end stack, designed to replace frameworks like React or Vue. It is backend-agnostic but pairs naturally with Go microservices or monoliths.

Core Concept: The `templ` Component

templ allows you to write HTML components directly in .templ files, which are then compiled into highly performant Go code.

Key features of templ components:

Component-Based: Write reusable UI pieces like buttons, forms, and layouts.
Type-Safe: Components have typed parameters, leveraging Go's type system for compile-time checks.
Go Integration: You can use Go control structures (if, for, switch) directly within your HTML markup.
Composition: Render other templ components using the @ syntax (e.g., @MyOtherComponent()).

// Example of a .templ file

package components

// Define a button component with parameters
templ button(content any, onclickJS string) {
	// Use Tailwind CSS classes for styling
	// Use Alpine.js for interactivity via the onclickJS string
	<button class="..." x-on:click={ onclickJS }>
		// Use Go logic to check the type of 'content'
		{ switch c := content.(type) {
			case string:
				{ c }
			case templ.Component:
				// Render another component passed as a parameter
				@c
		} }
	</button>
}

Key Features of the Stack

Performance

Go's Efficiency: Benefits from Go's fast compilation, efficient concurrency, and smart memory management.
templ Optimization: templ compiles templates to Go code, avoiding the runtime overhead of reflection-based template engines and providing compile-time error checking.

Flexibility

Static Sites: Generate static HTML files with a fast development loop thanks to hot reloading.
Server-Side Rendered (SSR) Apps: Build robust, dynamic applications powered by a Go backend.
Hybrid Approach: Serve some parts of an application as static pages and other parts dynamically.

Tip
For backend services like databases and authentication, the stack is unopinionated. Backend-as-a-Service (BaaS) solutions like Supabase, Firebase, or PocketBase are recommended for a streamlined experience.

Simplicity

Single-File Components: Keep markup (HTML), styling (Tailwind classes), and interactivity (Alpine.js attributes) within one .templ file.
Reduced Context Switching: Eliminates the need to jump between separate .html, .css, and .js files for a single component.

Hot Reloading Workflow

For static site development, an efficient workflow is achievable using a Makefile:

make compile: A command that triggers:
- tailwindcss: Compiles utility classes into a CSS file.
- templ generate: Compiles .templ files into Go code and generates HTML.
vite (via bun): A development server that serves the generated HTML files.
make watch: A file watcher that automatically runs make compile on any changes to component files, which in turn triggers Vite to hot-reload the browser.

Introducing the GOAT Stack

So you're a Go developer and you're looking for a way to develop web apps. You're looking for the most efficient way and the most performant way to actually develop your web applications. Now I'm talking about web applications, I mean the front end in this context.

Let me present you the GOAT stack. Yes, the greatest of all time stack. Obviously, this is a modern tech, it's complimentary to Go programming language, using the most efficient Go template engine called templ. You can find this at a-h/templ.

Now, this template engine actually allows you to render and use your HTML inside your Go files. You will write your components using the templ key in .templ files and writing it in a similar syntax to this one, where you actually provide the name for your components and inside the code brackets render your HTML.

As you can see, we are defining a button, and this button will take two arguments. It will take a content which is an interface, and it will take an onclick JS which is a string. I want you to take a look at the body of the button tag. So this is the button tag with all its attributes and classes. Now inside of the button tag, you can see that we have a Go syntax condition. As you can see, we are getting the title from the content. So we are saying if the content is of type string, you get the title out of this string, which will be the actual content. And then you would render another component as shown here with the @ symbol. This @ symbol is the way that you can render another templ component inside your current templ component, if you will, for, you know, component reusability, more component-based development.

Handling Component Logic with Templ and Alpine.js

Now if it's not of type string, what's explained here in else if, so if the component is not actually a string, we will do another condition. So if it is actually a component of type templ.Component, then we're going to render that component right away. And Alpine.js provides us a way to write our interactivity right inside our templ components, inside our HTML with inline logic, finding variables, and listeners that you can directly implement right inside your HTML. So your string here, for example, our string in onclickJS would be the function that would actually be triggered when a person or user clicks that button.

The Complete GOAT Component

Bind it with Tailwind CSS, which uses utility classes, small utility classes to design the web or the component, you will find a complete solution called the GOAT stack. And this is a GOAT component, which means it has everything you need in just one file, one component. You can, you know, do whatever you need in terms of interactivity, styling, and actual logic and data right inside one file. And then this file will be compiled into a Go file that you can use in your Go server-side application, or you can write it to an HTML file and use it as a static site.

So this is the power of GOAT stack and it's explained right away in its modern stack that it uses. Other problems that this stack would solve, including obviously, we mentioned a few of them, but we have also easier component-based UI development in Go. Not matched, there's no other HTML template engine for Go programming language that will allow you to get to this component-based UI development in Go.

Key Benefits of the GOAT Stack

It has much better performance over the traditional Go templates and also has better integration with Go's type system. It simplifies server-side rendering as mentioned and will reduce boilerplate code and enhance code reusability. So the more you actually develop and write with this stack, the more it's easier to actually build and finish the applications.

Why These Technologies Were Chosen

If you're not new to the web development world, you probably heard of Tailwind CSS, Alpine.js, and even Go and templ. But let me hit you with some facts about this stack that we are using in the GOAT stack. So it's actually the dev's choice, as Go is one of the most loved programming languages in the world. Alpine.js is a light JavaScript framework that has surpassed 20k stars and it's used by companies like Netlify, Uber, and Coinbase. It's very lightweight and it's very powerful in terms of interactivity on the client side.

Now, Tailwind CSS is a no-brainer for when it comes to styling in the modern web development world. It has over 1 million weekly downloads on npm and has reached over 90% satisfaction rate among developers. So the combination of Go, Tailwind, and Alpine.js actually attracted a growing number of developers, and a lot of companies actually now looking for a modern, efficient, developer-friendly web development solution. And we have the perfect combination with Go and templ creating the GOAT stack.

Feature Deep Dive: Performance and Flexibility

Now we're going to take a look into some features that this stack will mainly provide over any other front-end stack or framework that you would actually use to develop your web apps. And over few of these features, we have performance, reloading, simplicity, and flexibility.

In terms of performance, it combines the features of Go programming language being blazing fast, compilation and runtime efficient, concurrent processing, and smart memory management. And also combines it with the a-h/templ efficiency, type-safe system, and we have compile-time error checking, optimized template rendering, and all this useful features that allows you to have a lot of performance out of the box.

Now in terms of flexibility, you could use this stack with whatever backend solution you could have. So this is a strictly front-end stack. It's not a framework, but it would replace other front-end frameworks like React, Vue, or any other front-end framework because it has a stack that would actually act as a framework to build component-based UI that you can use to build your applications. You could use it in any way that you would like. You can use it to create static sites with hot reloading, so you can actually develop faster, and you can use it also to create server-side applications.

Use Cases and Backend Integration

So if you have, if you want to build a robust, performant web application and you have, for example, a lot of APIs created or microservices with Go and you want to implement them into an application in a much performant and simple way, you could use the GOAT stack also to create your server-side applications. And you can also use a hybrid solution or a hybrid approach where you can serve a part of the application as static sites and another part of the application as a server-side.

Now in terms of database or in terms of other services that you would need, obviously in a full web app, GOAT stack doesn't restrict you to use one service or one tech into building your application. You can use whatever backend solution you would like to use. I would recommend from my experience using a backend-as-a-service solution. So things like Firebase, Supabase, or even PocketBase for smaller projects would work perfectly fine with this stack.

Feature Deep Dive: Simplicity

In terms of simplicity, in addition to the simplicity of Go syntax and the simplicity of the templ logic, we have also the simplicity of Alpine.js, where it allows you to write functionality and interactivity right inside your HTML file. And also combined with Tailwind CSS which allows for styling, you you don't have to like switch between files if you want to like edit your styles or edit your interactivity. It all happens in one file under templ files. And those files will then be compiled into Go files for performance, and then you can render it in a whatever way you want.

The Hot Reloading Workflow

In terms of hot reloading, this will be useful when you're developing static sites using this GOAT stack. And I have this Makefile that I have, you know, a few commands that I've written that actually helped me through my workflow in different projects. One of them is the compile keyword, which uses the tailwind, templ, and run keywords as mentioned or as shown here. The Tailwind CSS actually runs the CLI compiler that will compile our styles, and the templ will generate the actual Go files out of our templ files. And then we are binding this with Vite using Bun. Obviously, I'm running these using Bun, running Vite to serve our HTML files coming from templ generate with our styles that comes from Tailwind CSS.

Now I have also a watch keyword as you can see here, and this is a file watcher, like a way to watch any change in the files and do the compiling right away without me having to, you know, trigger anything in the CLI. So it would automatically watch any changes in the files under the components folder and will actually run the make compile, which will compile the files and then update them or update the actual HTML files, which will then trigger the Vite watcher to apply these changes in the browser. And you will have a simple and very effective hot reloading that will help a lot in terms of building static site using this GOAT stack.

Get Started with the GOAT Stack

I encourage you, all of you, to try out this stack. And you can do that right now today. If you visit goat.morethancode.com, you will find a guide that will help you cloning the repository, install all the dependencies, and run your first project using the GOAT stack. I'm excited to hear your opinion about this stack in the comments below. And if you have any questions in terms of what tech stack does it use or how everything is combined together, don't be shy to write that down in the comment section below.

You can also go to morethancode.com, without the goat, like just morethancode.com, and you will find a gift there when you sign up to the newsletter. Now at the end of this video, I would encourage you to subscribe, give a like to this video if you love this stack, and you know, enable the notification bell. I'll be also uploading more tutorials about this tech stack in terms of Go tutorials or templ tutorials, Alpine.js or Tailwind CSS, and we will also use the combination of GOAT stack. So I will be also providing more GOAT stack related tutorials. This was Ad from More Than Coder, goodbye.