Show HN: Use Go's HTML/template to write React-like code

Here's the link: https://www.sheshbabu.com/posts/react-like-composition-using...

Didn't realize HN doesn't convert link text to clickable links

Go's template system (both text/template and html/template) is pretty powerful. You can add custom functions and partial templates too. I use these concepts in https://docs.hofstadter.io to generate any code, not just frontend. Hugo uses the same system to do static site generation, which may be even closer to what you are showing. Helm templates is the epitome of the worst use (go/templating yaml files, I use CUE for this now).

For frontend, as in your example, this has the older feel for UI, where each navigation requires a round trip to the server and a full-page response to the client. This is part of the reason people have moved to React and full-stack TS. I love Go, but I'm definitely a big fan of writing webapps in Next at this point. React Server Components are a really nice DX.

I now generate much of the React / Next code at develop time, rather than runtime. Hof's original goal was to make adding a field to a type a one-line change in a source-of-truth file, and then generate all the changes through a full-stack app by running `hof gen`.

[off-topic comment but somewhat relevant for anyone choosing a lang/ecosystem]

I noticed that the syntax highlighting for the Go html/template examples in the article is incomplete. We're using Go html/templates on a new project (within a team that does a lot of React frontend & some Python) so this kind of project seems like it would really suit, but a massive bugbear has been the very poor IDE-level syntax highlighting support for Go html/templates. Can anyone recommend a good syntax highlighter for Go html/template in VSCode for example? None of the main/official/popular addons seem to get this right.

Seems a pretty unexpected oversight from a language from Google.

  <a class="button {{if .IsPrimary}}primary{{end}}" {{if eq .IsSubmit true}}type="submit"{{else}} href="{{.Link}}"{{end}}>

This is nice. Thanks for sharing.

When I heard "react" I immediately thought SPA and Event handling in the browser.

This is more close to ASP .NET ( organizing views on the server side).

This is very useful but this is not for handling events on the client.

Thanks again for sharing.

Although I don’t know Go programming language, I do appreciate people making stuff using as minimal dependencies as possible. I’m glad that I’m not the only one who has this habit.

I am not a Go or frontend person, so I am a bit confused. I cannot figure out where any necessary JS is generated. The documentation for html/template only says it generated HTM, and a React alternative is presumably producing dynamic frontends (otherwise why would you be using react?). Am I missing something huge?

This looks like pretty standard template based web apps like old school php with includes? Not sure I understand the React like approach?

My style for building web app. I was never convinced that doing everything on JS layer is a good thing (regardless the backend language).

But you need to show more interactivity to convince the JS people.

I personally like this style and add HTMX for partial updates.

https://github.com/a-h/templ is a similar mature project that has JSX style templates but using Go instead of Javascript with good VS code support etc.

I'm not a full-time Gopher but I had a similar thought a few weeks ago, this idea of just having template partials for components and maybe a function constructor. Templ has a similar feeling but you can get most of what you want with pure Go. In Ruby-world there's the ViewComponent pattern/lib that Github came up with, a sort of HTML non-JS component, but I just can't really see why you need more than simple functions to do it.

Haven't thought it all the way through, I expected the code to come out a little bit cleaner but Go being a bit more explicit is for the better, not much one can do here.

But it's a valid idea: 80% of JS component libraries are just reimplementing "<button>" as "<Button>" with no added value atop the HTML.

A bit off-topic, and maybe it was just an example made without too much thought put into it, but I've noticed there seems to be a lot of people now who write button/links like this:

    <button><a href="/blah.html">My Button</a></button>

As far as I know that's technically invalid HTML. You can't have an <a> as a child of a <button> (or even the other way around.) I'm also ignoring the invalid type="submit" against the <a> tag in the example button component in the post.

I think it stems from people who want their links to take on the default button styling, but I'm not 100% sure. Has anyone else noticed this trend at all?

    <{{.Tag}} class="button-container"></{{.Tag}}>

Building a new response for every action you make in the app not something I would compare React to. This is more akind to old school PHP.

amazing, great work. This would be very "reactive" adding HTMX.

I remember the Astro web framework was written in Go before they moved to TypeScript. If there's a lot of JSX on the page and it needs to be escaped, what is the performance impact? Could you optimize the code to minimize slowdowns from templates?

Hugo, Jet, and other template engines are certainly interesting, but I chose to write in the Go template, which I later migrated to Astro with TypeScript. This was due to the challenges of managing two codebases for a medium-sized site as a solo dev.

I've been doing something very similar in Rust recently using Askama or Maud for templates (components), optionally with Axum to include a server in the binary.

The author mentions wanting to colocate templates with logic, Maud allows much tighter/automatic integration in this regard.

This approach also synergizes almost perfectly with HTMX.

I like the experimentation, but it's still using templates. I was hoping something pure-Go code components without any template rendering at all.

I was trying to do the same React-like Component framework, but for Python. No templates needed, you write 100% Python code. Here are some examples how it looks like for simple components: https://github.com/kissgyorgy/compone/tree/master/core/examp...

I use it in a Django project everywhere, no template rendering for custom views!

Interesting. I am actually doubling down on building web apps in Go using mostly standard library, powerful templates and sprinkle in with a library such as Alpine JS. Seeing some success so far and it makes me so much happier knowing that I don't have to deal with node_modules BS (well may be except tailwind for css). I actually want to test the limits of how far one can go without using a JS framework like React/Vue especially for smaller teams.

This is a nice approach I've followed myself before. It feels like common sense web development, just writing things in a way which allows them to be reused. A button will likely be the same on any page of the site, so make a button component.

I don't think this is "React-like" though. Making components isn't specific to React. We've been doing that since ASP and probably earlier. Your views still need to know what components to render here.

You can go further and just define a template function which takes a template name and a data object. Then render arbitrary children. That way your UI can be fully composed in code and the only thing your components need to know is how to render themselves.

    var templateFS = os.DirFS("./templates/components/")
    
    type Component interface {
     Type() string
    }
    
    type Button struct {
     Name string
    }
    
    func (b Button) Type() string {
     return "button.html"
    }
    
    type Div struct {
     Children []Component
    }
    
    func (d Div) Type() string {
     return "div.html"
    }
    
    type Page struct {
     Children []Component
    }
    
    func (p Page) Type() string {
     return "page.html"
    }
    
    func main() {
     component := Page{
      Children: []Component{
       Div{
        Children: []Component{
         Button{Name: "Test button"},
        },
       },
      },
     }
    
    templates := template.New("")
    funcs := template.FuncMap{
     "exec": func(tpl string, data interface{}) template.HTML {
      var sb strings.Builder
      templates.ExecuteTemplate(&sb, tpl, data)
      return template.HTML(sb.String())
     },
    }

    templates = template.Must(templates.Funcs(funcs).ParseFS(templateFS, "*"))
    templates.ExecuteTemplate(os.Stdout, component.Type(), component)

Your page.html file becomes

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    {{range .Children}}
        {{exec .Type .}}
    {{end}}
    </body>
    </html>

For example

    func main() {
     component := Page{
      Children: []Component{
       Div{
        Children: []Component{
         Button{Name: "Test button"},
        },
       },
      },
     }

  <Page>
    <div>
      <Button> Test button</Button>
    </div>
  </Page>`

  const main = () => (
    <Page>
      <div>
        <Button> Test button</Button>
      </div>
    </Page>
  )

OMG! No! Having dealt with Go templates in the context of writing Helm charts, I would say this is not a a great idea. Please, invent a better templating language for Go, and then perhaps go down this path. That being said, I am not a great fan of templates in any language. Jinja2 might be a heck of a lot better than Go templates but it can still be hard to get right.

I've been using Go's html/template for the last couple of months and all I can say is that it's still very much a toy. It's fine for basic loops and conditionals but anything beyond that is extremely limited and having proper reusable components is a constant fight against limitations, specifically because of the lack of being able to pass multiple arguments to a template. I wish the Go team had gone with something more akin to PugJS[1], which in contrast is very rich in features, flexible and dare I say fun to build components and pages with.

[1] https://pugjs.org/api/getting-started.html

  package main
  
  import (
      "log"
      "os"
      "text/template"
  )
  
  func main() {
      err := template.Must(
          template.New("").Parse("{{ .greeting }}, {{ .user.name }}!"),
      ).Execute(os.Stdout, map[string]any{
          "user": map[string]any{
              "name": "earthling",
          },
          "greeting": "hello",
      })
      if err != nil {
          log.Fatal(err)
      }
  }

Very well written article, just the right amount of text, pictures and examples. Thank you!

This is what I do but my components have three sections: script, styles, and the component. I include those in a page. The page is generally another component with head and body that fits into a base page template.

You can use go’s builtin build features and embed the results into a http.FS.

  go generate npm build
  go build

And declaring the resulting frontend build as an embed.FS using

  //go:embed dist/
  var frontend *embed.FS

And use that in a http.FS

https://blog.logrocket.com/using-go-generate-reduce-boilerpl...

I have something kind of similar written in Common Lisp, however it uses stock HTML and then lisp. A template is a literal HTML template element, and it's referenced with custom elements. So `<my-el>` is in the file that will be compiled, say indet.html, and then there is a my-el.html file which is the reference that is inserted into the `<my-el>` as a child. This file is just stock HTML with a `<template shadowrootmode="open">` as the root element and then whatever in that. This is all rendered properly by the browser because it is just standard HTML. The slot element can be used to inject into these template els. All the lisp does really is recursively compile the HTML and then manage any logic writtel inside of `<script lang="cl">` tags

It actually supports any language, long as you define the lang= name in a config file to tell the compiler how to process it. Ie for python `python="python -m '$'"` would then let the cl compiler know how to handle `<script lang="python">`.

I wanted to do something similar, but ultimately went with Hugo and Astro for my projects because I wanted to host it on Cloudflare Pages. Are there any similar hosting options available for this approach?