200% go

Vugu framework for go is 100% go on backend, 100% go on frontend.

In 1996 at my first programming job they asked if I knew something called JavaScript. I was 20 years old, just graduated from pitt.edu with a degree in computer science and I knew Java. I also knew how to write in cursive which I called “script.” So I said “Yes I know it.” I mean how different could JavaScript be from Java?

Years later I would end up becoming quite the JavaScript expert before finally in 2015 just opting out. Yes I know JavaScript. No I don’t like to write programs in it.

I also don’t like TypeScript or great JavaScript linters but I do like golang.

And before WebAssembly became mainstream, just this year, I still said you are forced to use JavaScript for some things in the browser but never use something like node.js on the backend where you have a choice. But now finally, you have a choice on the frontend too.

Move over react, vue, and angular we now have vugu.

Created by Brad Peabody and about to get a big name sponsor, vugu lets you take advantage of the fact that all modern browsers now support a WASM file and golang compiles down to WASM.

There is an example app called “taco-store”. Let’s walk through some logic and see how great this can be:

1. root.vugu

2. top-nav.vugu

3. index.vugu

4. cart-api.go

5. sever.go line 24

6. handle-cart.go

Just look over these 6 files and let’s see how something gets added to your cart and how we use good old XMLHttpRequest to make the ajax request to the backend.

The first two root and top-nav just help you see how the whole first page is created:

But that yellow “Add to Cart” button is in number 3 index.vugu above:

<button @click='c.AddCartItem(event,index)'>Add to Cart</button>

<script type="application/x-go">

func (c *Index) AddCartItem(event vugu.DOMEvent, index int) {

  c.PostCartItem(c.TacoList[index])

}

</script>

This isn’t an HTML file this is a VUGU file!

This all gets compiled down to your final WASM file. But what does c.PostCartItem do?

That’s number 4 above, cart-api.go:

func (c *CartAPI) PostCartItem(payload memstore.Taco) error {

  url := "/api/cart"

  res, err := Post(url, "application/json", payload)
}

Ok is that the XMLHttpRequest? Well yes. But you’ll never see that name in the code. This pure go. And the Post (defined in helper.go) is just a normal GO http request. In WASM it’s the same end result browser assembly language version of what XMLHttpRequest compiles to!

Ready to switch over to server side? Number 5 above server.go:

cahl := handlers.NewCartAPIHandler(mem)

mux.Handle("/api/cart", cahl)

Here we map that path to number 6 above handle-cart.go:

func (h *CartAPIHandler) PostCartItem(w http.ResponseWriter, r *http.Request, params httprouter.Params) {

  var q memstore.Taco

  json.NewDecoder(r.Body).Decode(&q)

  h.Store.PostCartItem(q)

}

Look at that, JSON from the frontend, sent to the backend and we stayed in go. 200% go!