Building full-stack web apps with Go, Vecty and WebAssembly
Tags: featuredposts, go, webassembly
Published: 2019-08-26 22:12:32

---
title: Building full-stack web apps with Go, Vecty and WebAssembly
published: true
tags: Featured Posts,go,webassembly
canonical_url: https://blog.logrocket.com/building-full-stack-web-apps-with-go-vecty-and-webassembly/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/9hx5dj28mkefha45owou.png
---
**Written by [Aaron Schlesinger](https://blog.logrocket.com/author/aaronschlesinger/)**✏️

Many of us have heard of — and maybe written — full-stack web applications. We do them in a variety of different ways, but the common denominator is usually [JavaScript](https://developer.mozilla.org/en-US/docs/Web/javascript) and [Node.js](https://nodejs.org/en/).

Today, we’re going to break with that tradition and write a complete web application – front end and backend – without writing a line of JavaScript. We’ll be comparing the developer experience to JavaScript along the way, but we’re going to be only writing [Go](https://golang.org) for this entire project.

We’ll learn how to build a single page link shortener application with just Go, and we’ll end up with working code that shows it in action.

## Prerequisites

Today, we’re going to be focusing on Go so make sure you’ve [installed](https://golang.org/dl/) the tooling on your machine. I’m going to assume you have basic knowledge of Go, but check out the free [Tour of Go](https://tour.golang.org) to brush up (or learn!) if you need to.

All the shell commands that I’m going to be showing work on a Mac, but should also work on most Linux systems (including [WSL](https://docs.microsoft.com/en-us/windows/wsl/about)!).

Finally, make sure to clone the [repository](https://github.com/arschles/vectyshortener) with the code for this article.

And then you’re good to go, let’s get started!

## Getting started

First, we’re going to get the application running locally.

Coming from [Webpack](https://webpack.js.org/) and surrounding technologies — which you’d use to build a web app with JavaScript — building and running this application is embarrassingly easy. There’s a front-end and a backend part (more on that below), and you compile both of them with the `go` tool, which requires no configuration.

First, run the backend server:

```jsx
$ go run .
```

Next, build the front end in a new terminal window:

```jsx
$ cd frontend
$ GOOS=js GOARCH=wasm go build -o ../public/frontend.wasm
```

Finally, go to [https://localhost:8081](https://localhost:8081) in your browser to see the app in action.

## How this all works

Like most web apps, our link shortener has a front-end and backend piece. In our app, the backend is just a static server written in Go. All of the magic is in the front-end directory, so let’s start there!

If you’re familiar with [React](https://reactjs.org) or the [DOM](https://www.w3.org/TR/WD-DOM/introduction.html), you’ll recognize a lot of the concepts we’ll cover. If not, this stuff will come naturally.

We’re using a new Go framework called [Vecty](https://github.com/gopherjs/vecty) to organize our application. Vecty forces you to break down your app into components and arrange them into a tree. The whole scheme is really similar to HTML and the DOM or React.

Here’s what our app’s high-level components would look like if they were HTML:

- A `h2` for the title of the page
- A `form` to enter the link to shorten
- A `div` to hold the shortened link (this value is dynamically updated as the user types the link into the above)
- An `a` to save the short link

Vecty components are so similar to React that they look like the Go equivalent of [JSX](https://reactjs.org/docs/introducing-jsx.html), except that they have more parentheses.

Let’s zoom in on one and see how it works. Here’s the code for the `form` component:

```jsx
elem.Form(
    elem.Input(vecty.Markup(
        event.Input(func(e *vecty.Event) {
            short := uuid.NewV4().String()[0:5]
            h.shortened = short
            vecty.Rerender(h)
        }),
    )),
)
```

First, `elem.Form` and `elem.Input` on lines 1 and 2 are for the `<form>` and `<input>` tags, respectively. Those are both Go functions that take one or more arguments. Each argument is something that goes between the opening and closing HTML tags. For example, the stuff we pass to `elem.Form` goes in between `<form>` and `</form>`. This is what the above Go code would look like in HTML:

```jsx
<form>
    <input>
    </input>
</form>
```

Pretty simple, right?

The last piece of code we didn’t look at is that `event.Input` function. This is an event handler just like in HTML/JavaScript. This function takes in _another_ function, which in this case is roughly an [`onchange`](https://www.w3schools.com/jsref/event_onchange.asp) handler. Just like you’d expect, that `*vecty.Event` argument the handler takes in is roughly the same as the JavaScript event.

The logic to actually shorten the link is all inside this handler, and it’s fairly simple. Here is that code commented thoroughly:

```jsx
// First, make a new UUID and take the first 5 characters of it.
// This will be our new shortcode
short := uuid.NewV4().String()[0:5]
// Next, write the shortcode to a variable. This variable is shared
// with the <div>, so when we re-render this component, the <div> will
// get updated
h.shortened = short
// Finally, re-render the component so that the <div> gets the new shortcode.
// Unlike React, there's no automatic diff functionality. We tell Vecty
// explicitly which components to re-render.
vecty.Rerender(h)
```

## You get web assembly for free

Vecty can scale to big applications because of this component structure, and we can scale our app as big as we want by adding more components as needed. For example, we can add a component _above_ our current top-level to dynamically route to different sub-components based on the URL. This would be similar to some of the popular react-router implementations.

One final thing to keep in mind is that **WASM is not HTML** , it’s a full departure from the DOM and everything HTML.

I compared all the components in the last section to HTML tags, but they aren’t! That’s where the big difference between Vecty / WASM and React comes in. We’re compiling our Go code _straight_ to WASM, which represents these components differently from the DOM.

## Conclusion

At the end of the day, you get some big benefits from using Go and Vecty to build apps:

1. You get to think in terms of components and nesting, just like with React and the DOM
2. You can write as much dynamic logic as you want, right next to your components, all in pure Go
3. You can share code between the server and client, similar to writing a React client and a Node.js server
4. You get to take advantage of WASM
  1. Or you can compile your Vecty code to HTML too if you want! That’s a whole other article. [😉](https://s.w.org/images/core/emoji/12.0.0-1/72x72/1f609.png)

* * *
**Editor's note:** Seeing something wrong with this post? You can find the correct version [here](https://blog.logrocket.com/building-full-stack-web-apps-with-go-vecty-and-webassembly/).

## Plug: [LogRocket](https://logrocket.com/signup/), a DVR for web apps
 
![LogRocket Dashboard Free Trial Banner](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png?resize=1200%2C677&ssl=1)
 
[LogRocket](https://logrocket.com/signup/) is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
 
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
 
[Try it for free](https://logrocket.com/signup/).
* * *
The post [Building full-stack web apps with Go, Vecty and WebAssembly](https://blog.logrocket.com/building-full-stack-web-apps-with-go-vecty-and-webassembly/) appeared first on [LogRocket Blog](https://blog.logrocket.com).