Summary
In this episode, the instructor explains how to build user interfaces for a Go web application using server-side rendering. While Go's standard html/template package works for embedding data into HTML, it lacks type safety and IDE support. To address these limitations, the instructor introduces Templ, a type-safe templating library inspired by JSX that stays entirely within Go, generating plain Go functions that return safe HTML while providing full compiler support and IDE assistance.
Transcript
Next, we need a way for our readers to interact with the block, which is where the UI comes in. On the web, this usually means taking some data from our database, combining it with some HTML before we send it back to the browser, which is also known as server-side rendering. For this course, we are going to be using good old HTML and CSS. Go’s standard library actually has really solid support for this. It comes with packages called HTML slash template that lets you embed data safely into HTML. Let me show you a quick example of how you would use the standard library to do this. With the models done, we need a way for our readers to interact with our block, which is where the UI comes in. On the web, this typically means that you take some data from our database. Combine it with some HTML, and then you send it back to the browser. This is also what is known as server-side rendering. For this course, we will be using good old HTML and CSS. Go’s standard library actually has really solid support for this. It comes with a package called HTML slash template that lets you embed data safely into HTML. Let me quickly show you an example of how this works. All right, so say we have this variable right here, not a const, sorry, a variable called home-u-t-m-p-l-shot-for-template. And in here, we have a, let’s say we have a div. Inside this div, we have a paragraph tag that says current authenticated user. Then we’re going to pass on data. Close the paragraph tag. And finally, close the div. Give that a save. Now, this will simply show the name of the user that we passed to it. And the way we will pass on data is to use this template package. So let’s create a function here called home-u-t-m-p-l-shot-for-template. Just return to the string. And let’s say temple is template must template new. And let’s call this one home. And then we say pass. And then we pass the home-u-template. Then we create some data. We’re just going to use a map here. So we put in the name. It’s the same as the variable we defined in the… In the template. And let’s just say modern. There we go. Then we say we create a buffer here by its buffer. Then we say temple and execute. Let’s just check the error to be sure. And empty string error. Of course, we should also return an error here. There we go. All right. And to execute, we are going to say buffer and a buff, and then the data. And then we simply return the buff, call the string method, give that a save. All right. So this is a little bit of a cumbersome way of passing data. Injecting the variable and then returning the output string. And the way we could view this in the terminal, I’m just going to create a main function here. And then let’s just say fmt print home view. And of course, we now have to say, let’s just say response error. It’s not technically. It’s not technically correct, but let’s just ignore it for now and then say print and then we print the response. There we go. Now, if I jump out and run this code, we should see the diff, the paragraph tag and say current authenticated user is Morten. So let me just go out here as I go run views. And we see, we have to. We have what we actually expected to see. This works and you could use this approach and be fine, but it does come with some tradeoffs. You need to learn this string based templating syntax where you don’t really have a lot of IDE help. The templates are not as type safe as we would like them to be. You pass data in a very loose way. So, for example, with this name variable here, we need to make sure we spell it correctly. So we pass it correctly, right? That’s not that the compiler doesn’t catch these errors for us. So there are ways to overcome this, these tradeoffs and staying in, let’s say, Go land and Go country with type safe with IDE support and reusable components. And that is something called temple. And temple is very similar to how modern UI frameworks like React work with. But I encourage you to write to write components. Temple is inspired by JSX from React, but instead of mixing JavaScript and HTML, we instead just stay completely in Go the entire time. Temple will generate plain Go functions that return safe HTML so that we never have to leave Go and we can take advantage of the compiler and all the tooling that we are used to. So if you were to create, let’s create the example we just had. We need to create a file and we need to use the .temple extension since the temple comes with a generator that will look for .temple files and then transform those files into Go files that has these functions that returns the HTML. So, home.temple, package views, and this is just like writing any other Go that we have been seeing throughout the course so far. So. To create the view, we need to specify temple, and this is just very similar to any other keyword we have used, but you can kind of think of it as like a function. So you say temple, then a name here, home view, pass an argument that is typed, and then we would say diff, pass the paragraph saying current authenticated user, and now. In this practice here, we can actually get help from our LSP, which is very nice, so we don’t have to guess and it would return an error, it would not compile if we haven’t passed the correct or the expected arguments. So let me just format it a little bit. Now, when we use the temple tooling to target or to generate these Go functions, it will take this file and simply just turn it into a Go. So function and this is going to be then the function that we will interact or the code we will interact with in our controllers or wherever we use these views. All right, so that was a very simple example where we just pass a string parameter, but temple also lets us work with our own type so we can pass basically whatever we want. So let me just rewrite this, so you’re going to create a home page, a home view here. We’re going to create the entire HTML structure, so we’re going to say HTML lang, it’s going to be in US, close it. So I’m just going to type out everything here.