Building a Web App Without JavaScript: A Go-Based Approach

Getting Started with Go

Before we dive in, make sure you have Go installed on your machine and a basic understanding of the language. If you need a refresher, check out the free Tour of Go. Additionally, clone the repository with the code for this article to follow along.

A Simple Link Shortener Application

Our goal is to build a single-page link shortener application using only Go. We’ll start by getting the application running locally. Unlike Webpack and other JavaScript-based tools, building and running this application is surprisingly easy. We’ll compile both the frontend and backend using the Go tool, with no configuration required.

To get started, run the backend server and build the frontend in a new terminal window:

go run main.go

Then, navigate to https://localhost:8081 in your browser to see the app in action.

How It Works

Our link shortener application consists of a frontend and backend piece. The backend is a static server written in Go, while the frontend is where the magic happens. We’re using a new Go framework called Vecty to organize our application. Vecty forces us to break down our app into components and arrange them into a tree, similar to HTML and the DOM or React.

Vecty Components: A Closer Look

Let’s take a closer look at one of our Vecty components, the form component:

package main

import (
    "honnef.co/go/js/dom"
    "honnef.co/go/js/xhr"

    "github.com/rakyll/vec/v2"
)

func formComponent() vec.Component {
    return &struct {
        vec.HTMLComponent
    }{
        Render: func(w vec.Writer) {
            w.HTML(`

`)

            btn := dom.Get("shorten-btn")
            btn.AddEventListener("click", func(event dom.Event) {
                link := dom.Get("link-input").Value
                xhr.Get("https://example.com/shorten", xhr.Options{
                    Query: url.Values{"link": {link}},
                }, func(req *xhr.Request) {
                    result := dom.Get("result")
                    result.SetText(req.Response.Text)
                })
            })
        },
    }
}

This code may look familiar to React developers, with a few key differences. We’re using Go functions to create HTML elements, and event handlers to update the UI dynamically.

The Benefits of Using Go and Vecty

So why choose Go and Vecty over traditional JavaScript-based approaches? For starters, you get to think in terms of components and nesting, just like with React and the DOM. You can write dynamic logic alongside your components, all in pure Go. Plus, you can share code between the server and client, similar to writing a React client and a Node.js server. And, as an added bonus, you get to take advantage of Web Assembly (WASM) for free.

Error Tracking

When it comes to error tracking, it’s essential to have a reliable solution in place. Look for a modern error tracking solution that helps you identify and fix issues in minutes. With the right tool, you can get set up quickly and start tracking errors in your application.

Join the conversation and share your thoughts on this article!