humble - A frontend framework for Go

What is humble?

A little while ago, we discovered the open-source project GopherJS, a Go to JavaScript transpiler originally written by Go developer Richard Musiol.

At first we stared at it and said to ourselves, "JavaScript written in Go -- Huh???"

Diving into the project though, we found that it worked amazingly well. It had full support for almost every package in the Go standard library and the converted JavaScript and DOM syntax was clean and easy to understand. People were even building things in GopherJS that didn't exist as libraries in the JavaScript world, like SVGo transpiled with GopherJS to give us a working JavaScript SVG library! In addition, you got all the fantastic features of Go: type safety, compile-time errors, built-in testing, amazing tools and a fantastic set of standard and third-party libraries.

We knew Go was the language we loved working in on the backend for our web applications, but what if we could build our frontends in Go too? Not surprisingly, we were giddy and had to find out if this could work.

We knew from experience that web frontends written to work with a RESTful CRUD API run into the same problems over and over again:

  • Routing:
    • Pointing URLs to different pages and partials (single page application), including query tokens
  • UI Rendering:
    • Easy to create/append/delete DOM elements to render common UI elements.
  • Models:
    • Keeping a JS object mapped to a RESTful API and performing easy CRUD actions

Out of these needs, humble (with a lowercase 'h' that lives to its name) was born. humble is a lightweight, modular framework for Go that has 3 main, modular pieces that work together and apart:

Routes

A dynamic router that reads and builds URLs of the form "/#/my/favourite/page/{id}" with unlimited literal and query tokens that are passed to a function handler. The function handlers are written in idiomatic Go, mimicking the http.Handler syntax.

Views

A easy way to wrap UI DOM elements that come up repeatedly or are modified extensively with JavaScript. Views are designed as Go interfaces and have to satisfy just 3 methods:

  • RenderHTML() that gives back the HTML it is associated with.
  • GetID() that gives it a unique ID (which can be auto-generated by including the included humble.Identifier type as an anonymous field)
  • OuterTag() that gives the outer tag that the view HTML is wrapped in. This is necessary for easy referencing of the view element rendered in the DOM but can be any tag (custom or semantically neutral) that the user needs.

This allows:

  • Easy create/append/delete of repeated View DOM elements.
  • Easily adding event listeners to any DOM element within View.
  • Organized view objects that control DOM with their own properties/methods

Models

A very lightweight wrapper to make CRUD actions easy HTTP requests to a RESTful API endpoint. Models are designed as Go interfaces and have to satisfy just 2 methods:

  • RootURL() that gives the REST API endpoint URL.
  • GetID() that gives it a unique ID (which can be auto-generated by including the included humble.Identifier type as an anonymous field)

This allows:

  • Easy CRUD actions that map to HTTP methods GET, POST, PUT, DELETE
  • Organized model objects with their own properties/methods

These pieces are modular and work fully independently, but can work extremely together as seen in the included TodoMVC example. We hope to fix any bugs, keep things lightweight but powerful and hope Go developers all over the world can start writing the web frontends in Go!

Built With

  • go
  • gopherjs
  • todomvc
Share this project:

Updates