• universal (kinda - I will start with desktop experience for the masses but will eventually gravitate towards everything, everywhere, all at once)
• light weight - space and memory
• fast

Just to set the frame of reference - what I want from UI development is ease of development - html, css, and js and other such delightful technologies make things easy, GTK / Xamarin / Qt / WinForms / WPF / etc. are not so much fun.

What better way to do most of the features outlined here than in Go? This is an attempt to build a simple todo app using the combined power of Go and web technologies.

We will start with a simple window with webview in Golang, and then move to Wails to see how it makes the entire experience better. We will also see how to incrementally add functionality to the app.

Getting Started: Installation & Setup

If you intend to follow along, ensure you have Go on the system. If you don’t, you can get it from here.

Having VSCode from here and the Golang extension from here will be helpful.

Once the entire setup is done, create a new folder, open a terminal either in explorer or from VSCode, and create a new Go project -

go mod init go-webview-todo

This will create a go.mod file in the project root - it will be used to manage dependencies. Open the project folder in VSCode.

Create a file called main.go -

package main

print("Hello World")

Now, run the file using the Run button in VSCode or using a terminal. You should see the output in the terminal.

Now that everything is running with your setup, we will focus on next steps.

Install Dependencies

There are more than a few options to create webview apps -

1. zserge/webview Simple, cross-platform, portable, and lightweight. It is a tiny cross-platform webview library for C/C++/Golang to build modern cross-platform GUIs. It supports two-way JavaScript bindings (to call JavaScript from C/C++/Go and to call C/C++/Go from JavaScript). Needs CGO and some special flags to run on Windows.
2. Go bindings for webview library webview/webview_go Underlying library was intended for C/C++, but has a Go wrapper around it.
3. ImVexed/muon Uses Ultralight, a cross-platform WebKit rewrite in C++, instead of Chrome. Lightweight alternative to Electron. Not maintained actively anymore.
4. Advanced / fully-featured libraries like wailsapp/wails or fyne-io/fyne May use webview libraries in the backend, but abstract away the entire setup and make the entire experience pleasant. We will get to this state at the very end.

.. and more.

We will start with the simplest option - zserge/webview.

Develop a simple window with webview in Golang

Install the library using go get -

go get github.com/zserge/webview

Create a new file called main.go and add the following code -

package main

import "github.com/zserge/webview"

func main() {

	w := webview.New(webview.Settings{
		Title:                  "My test web view app",
		URL:                    "http://google.com",
		Width:                  1000,
		Height:                 800,
		Resizable:              true,
		Debug:                  true,
		ExternalInvokeCallback: nil,
	})
	defer w.Destroy()

	w.SetTitle("My App")
	w.Navigate("https://google.com")
	w.Run()
}

You should see a nice window.. in theory. In practice I could not get my module to work in Windows. I gave up after a few tries.

Close to the webview package is webview2 - jchv/go-webview2. This library does not need CGO but is Windows specific.

Install webview2 with -

go get "github.com/jchv/go-webview2"

Change the code in main.go ever so slightly -

package main

import "github.com/jchv/go-webview2"

func main() {

	w := webview2.NewWithOptions(webview2.WebViewOptions{
		Window:        nil,
		Debug:         true,
		DataPath:      "",
		AutoFocus:     false,
		WindowOptions: webview2.WindowOptions{Title: "Demo View", Width: 1000, Height: 800},
	})
	w.SetSize(800, 600, webview2.HintFixed)
	w.Navigate("https://google.com")
	defer w.Destroy()

	w.Run()
}

And, voila -

Moving to Wails

While the code above is pretty simple and straight-forward, the developer experience may not be the best. Let’s see whether that changes with Wails.

First, install Node if you don’t already have it.

Install Wails in your project folder.

go install github.com/wailsapp/wails/v2/cmd/wails@latest

In Terminal, hit the below command to check whether Wails has been installed correctly -

wails doctor

See the Wails documentation if you are facing any issues.

Now, let’s create a new project using Wails. Note that we will be using Vue for the frontend.

wails init -n go-webview-wails-todo -t vue

React, Svelte or vanilla JS are supported Wails OOB, and there are more community-supported templates for other frameworks.

Open the project folder in VSCode.Change the statement module changeme in go.mod to module go-webview-wails-todo. Update the README if you want.

Run the app -

wails dev

This should start your application.

Add a simple function to app.go -

func (a *App) TodoList() []string {
	return []string{"todo1", "todo2", "todo3"}
}

Include some ready styling with chota css with the below line in head section of frontend/index.html -

<link rel="stylesheet" href="https://unpkg.com/chota@latest">

Update the frontend/src/App.vue file to display the list of todos -

<script setup>
import { ListTodos } from '../wailsjs/go/main/App'

const todos = reactive({ data: [] });

const getTodoList = async () => {
  todos.data = await ListTodos()
  console.log('todos.data: ', ...todos.data);
}
onMounted(() => {
  getTodoList()
  console.log(`Fetched todos..!`, todos.data)
})

</script>

<template>
  <div class="container">
    <nav class="nav">
      <div class="nav-left">
        <a class="brand" href="#">Wails Todos!</a>
      </div>
    </nav>
    <div class="row">
        <div class="col-12">
          {{todos.data}}}
        </div>
    </div>
  </div>
</template>

You should see the list of hard-coded todos in the app.

Couple of really cool things happened so far -

1. The logic you wrote in Go is available in the frontend as a function. You can call it from the frontend and use the data in the frontend. All you needed to do was to add the function to the App struct in app.go and wails took care of the rest.
2. You will see wails.js folder with Go APIs being exposed to the frontend as JS functions. You would also see types generated out of struct if we had used Typescript
3. wails command did the hot-reload for both golang and vue, and bound everything together for you. You did not have to do anything else other than focus on the app logic

Adding functionality to our wails app

Let’s make our app easier to read / maintain with a few changes.

Add the below struct to app.go -

type todo struct {
	Id          int    `json:"id"`
	Description string `json:"description"`
	Due         string `json:"due"`
	Status      string `json:"status"`
	Created     string `json:"created"`
}

Notice the capital letters for Id, Description etc. - that is Go way of making fields public and accessible from outside the package.

After Greet function, introduce the below code -

func (a *App) ListTodos() []todo {
	return []todo{{Id: 1, Description: "Code Go", Due: "2023-10-15", Status: "In Progress", Created: "2023-10-01 18:30"}}
}
func (a *App) CreateTodo(todoItem todo) todo {
	log.Println(todoItem)
	return todo{Id: 1, Description: "Code Go", Due: "2023-10-15", Status: "In Progress", Created: "2023-10-01 18:30"}
}

We are yet to implement a database -

• The dummy data in ListTodos will be replaced with actual data from a database
• CreateTodo will be used to create a new todo item

The functions just return “some” data to demonstrate how the todo, a struct in Golang is available to the frontend. Click on them buttons to see output in console - both in Terminal running go and in the browser.

The changes in Vue are more extensive -

1. Create Vue components for list and new todos
2. Change TodoList.vue to point to the new components
3. Add some custom styling in styles.css (after removing the existing content)

I have just included the code from TodoList.vue below, but you can see the entire code in the repo.

<template>
    <div class="todolist">
        <div v-for="todo in todos.data" :key="todo">
            <div class="todo-item row">
                <div class="col-1">
                    <input type="checkbox" name="status" id="status" :checked="todo.status == 'Complete' ? true : false"
                        @click="updateTodo(todo)">
                </div>
                <div class="col-3 dates">
                    <img src="https://icongr.am/feather/calendar.svg?size=14&color=D3D3D3" alt=""> {{
                        todo.due?.substring(0, 10) }}
                </div>
                <div class="col-7">
                    {{ todo.description }}
                </div>
                <div class="col-1">
                    <a class="button error cardaction " @click="deleteTodo(todo)"><img
                            src="https://icongr.am/feather/trash-2.svg?size=24&color=FFFFFF"></a>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps(['todos'])
import { UpdateTodo, DeleteTodo } from '../../wailsjs/go/main/App'
const emit = defineEmits(['updateTodo', 'deleteTodo'])

const updateTodo = async (todo) => {
    console.log(`Emitting updateTodo event..!`)
    todo.status = todo.status == "Complete" ? "In Progress" : "Complete"

    const todoResponse = await UpdateTodo(todo)
    console.log('todoResponse: ', todoResponse);
    emit('updateTodo', todo)
}

const deleteTodo = async (todo) => {
    console.log(`Emitting deleteTodo event..!`)
    const todoResponse = await DeleteTodo(todo)
    console.log('todoResponse: ', todoResponse);
    emit('deleteTodo', todo)
}

</script>

And.. tada..

You can also see the output in a browser - just navigate to http://localhost:34115/. The browser window will be useful to refresh on demand and also see errors in the console faster.

Adding the database

We will use SQLite and gorm as the ORM for our app. Include the below libraries in app.go -

import(
  // ...
  "github.com/glebarez/sqlite" 
	"gorm.io/gorm"
)

On VSCode, you can follow editor prompts to go get both packages.

Now, include db in App struct -

type App struct {
	ctx context.Context
	db  gorm.DB
}

Modify the todo struct to make it special -

type todo struct {
	Id          int       `json:"id"`
	Description string    `json:"description"`
	Due         time.Time `json:"due" gorm:"type:datetime"`
	Status      string    `json:"status"`
	Created     time.Time `json:"created" gorm:"autoCreateTime;type:datetime"`
	Updated     time.Time `json:"updated" gorm:"autoUpdateTime;type:datetime"`
}

In the startup function (func (a *App) startup(...)), add the below code -

func (a *App) startup(ctx context.Context) {
  db, err := gorm.Open(sqlite.Open("data.db"), &gorm.Config{})
	if err != nil {
		log.Fatal("failed to connect database" + err.Error())
	}
	a.db = *db
	log.Println("Connected to database. db exists: " + fmt.Sprintf("%t", db != nil))

	// AutoMigrate will create the todos table if it does not exist
	if !db.Table("todos").Migrator().HasTable("todos") {
		err = db.AutoMigrate(&todo{})
		if err != nil {
			log.Fatal("Failed to migrate database" + err.Error())
		}
	}
}

The startup function is called when the app starts. We are using it to connect to the database and create the todos table if it does not exist.

Modify the previous functions to manipulate the DB.

func (a *App) ListTodos() []todo {
	// return []todo{{Id: 1, Description: "Code Go", Due: "2023-10-15", Status: "In Progress", Created: "2023-10-01 18:30"}}
	var todos []todo
	result := a.db.Find(&todos)
	if result.Error != nil {
		panic("Failed to retrieve todos: " + result.Error.Error())
	}
	return todos
}

func (a *App) CreateTodo(todoItem todo) todo {
	log.Println("Create: " + prettyPrint(todoItem))
	// todoItem.Due, _ = time.Parse(time.RFC3339, todoItem.Due.String())

	result := a.db.Create(&todoItem)

	if result.Error != nil {
		log.Println("Failed to create todo item: " + result.Error.Error())
		return todo{}
	}

	log.Println("db result: " + prettyPrint(result))
	return todoItem
}
func (a *App) UpdateTodo(todoItem todo) todo {
	log.Println("Update: " + prettyPrint(todoItem))

	result := a.db.Save(&todoItem)
	if result.Error != nil {
		log.Println("Failed to update todo item: " + result.Error.Error())
		return todo{}
	}

	log.Println("update result: " + prettyPrint(todoItem))
	return todoItem
}
func (a *App) DeleteTodo(todoItem todo) todo {
	log.Println("Delete: " + prettyPrint(todoItem))

	result := a.db.Where("id = ?", todoItem.Id).Delete(&todoItem)
	if result.Error != nil {
		log.Println("Failed to delete todo item: " + result.Error.Error())
		return todo{}
	}
	log.Println("delete result: " + prettyPrint(todoItem))
	return todoItem
}

func prettyPrint(i interface{}) string {
	s, _ := json.MarshalIndent(i, "", "\t")
	return string(s)
}

That is it! You now have a fully functional todo app with a database backend.

Building your app

Building the app is as simple as -

wails build

You should now see a fully decked up, single executable file in build\bin folder. Key points to note -

• the file measures some 13 MB
• uses ~18 - 25 MB RAM

The above measures should provide you a quick idea of the size compared to Electron-based apps (starts from ~85 MB - easily 100 MB+ on disk, 100-200 MB RAM) and native apps (may be in kb’s - to a few MBs, and a couple of MBs of RAM).

Note that the db file is not included in the build - the program will just create the database file in the same folder as the executable (& that may be different from the time you were developing the app).

Conclusion

The todo app is a good start, but there are many features of Wails that I am yet to look into including real-time events and using deskop APIs. You can see/ play around with the complete code on Github.

Overall, Wails is a great way to build apps with Go and web technologies. It is easy to get started, and the developer experience is great.

Of course, this post would not be complete without mentioning the power of the web and how a few talented individuals (Lea Anthony in this case) and supportive communities can do for the ecosystem.

Features that are of interest here -

1. Go and Go templates
2. How to get HTMX working with Go templates
3. How will static files co-exist with the dynamic behavior of HTMX (well, this is just me)

What is not considered -

1. Authentication / user handling and all the good stuff
2. Database and persistence of books

Install

Download Go and click on button and tab to install Go on your machine.

HTMX needs no install. We will just reference it with a CDN in the HTML.

Install nodemon globally since Go’s go run does not watch for changes.

npm install -g nodemon

If you are stuck anywhere while writing code, refer to the repository on Github.

Create a New Project

Create a new project folder and initialize a Go module.

mkdir go-htmx-playground
cd go-htmx-playground
go mod init example.com/go-htmx-playground

Your go.mod file should look like this:

module example.com/go-htmx-playground
go 1.21
// or whatever the version is 

Create a simple server with a new file called main.go.

package main
import (
	"log"
	"net/http"
  "io"
)

func main() {
	log.Println("Starting server at http://localhost:8080")
  
  http.HandleFunc("/hello", func(w http.ResponseWriter, r *http.Request) {
	  log.Println("hello");
    io.WriteString(w, "Hello, World")
 	})

  log.Fatal(http.ListenAndServe(":8080", nil))
}

You may have noted that you don’t particularly need to type in the import.

Run the server with go run main.go and visit http://localhost:8080/hello to see the output.

It is time to reload server automatically when any changes are made to files.

# install nodemon globally
nodemon --exec go run main.go

Create a nodemon.json file to specify which folders need to be watched.

{
  "verbose": true,
  "execMap": {
    "go": "go",
    "html": "html"
  },
  "ignore": ["node_modules/*"]
}

If you are into auto formatting using prettier and I don’t see why you shouldn’t, add prettier to work smoothly with Go and Go templates:

npm i prettier prettier-plugin-go-template --save-dev

Modularizing the Code and Adding HTML

We don’t want to stuff everything in main.go. Let us create a folder pages and serve all pages from there.

But before creating the HTML page, we want to make sure things work.

Create a new file pages/hello.go and add the following code:

package pages

import (
	"io"
	"net/http"
)

func HelloHandler(w http.ResponseWriter, r *http.Request) {
	io.WriteString(w, "Hello, World")
}

Update main.go to use the new handler.

import (
  "io"
	"net/http"
  P "example.com/go-htmx-playground/pages"
)

func main() {
	log.Println("Starting server at http://localhost:8080")

	http.HandleFunc("/hello", P.HelloHandler)
  log.Fatal(http.ListenAndServe(":8080", nil))
}

This works as expected. Now, let us create a new file pages/hello.html and add the following code:

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://unpkg.com/chota@latest" />
  <link rel="stylesheet" href="/static/css/main.css" />
  <title>Booksie</title>
</head>
<body>
  <nav class="nav">
    <div class="nav-center">
      <a class="brand" href="#">Booksie</a>
      <div class="tabs">
        <a class="active">Home</a>
        <a href="/help">Help</a>
      </div>
    </div>
  </nav>
  <main class="container">
    <h2>My Books</h2>

    <div class="row">
      <div class="col-12 card bg-light">
        <form>
          <div class="col-12 col-6-md ">
            <label for="title-id">Title</label>
            <input type="text" name="title" id="title-id" />
          </div>

          <div class="col-12 col-6-md ">
            <label for="author-id">Author</label>
            <input type="text" name="author" id="author-id" />
          </div>

          <div class="col-12 is-right">
            <button type="submit" class="button primary">Add</button>
          </div>
        </form>
      </div>
    </div>

    <div class="col-12">
      <!-- Sample books -->
      <div class="row">

      <div class="col-12">
        <h4>The Great Gatsby</h4>
      </div>

      <div class="col-12 col-6-md">
        🖋️ F. Scott Fitzgerald   

      </div>
    </div>
    </div>
  </main>
</body>
</html>

You should now see the glorious HTML page with a form and a sample book.

You will notice a couple of things off the bat:

1. chota.css for styling. It is a tiny CSS framework that I like to use for simple projects and demos. You can use any CSS framework of your choice.
2. Custom CSS referenced in the html page does not exist, we will get to that in a bit.
3. The form does not do anything. We will get to that in a bit as well.

Serving Static Assets

We need to serve static files like CSS, JS, and images. Create a new folder static and add a new file static/css/main.css with the following code:

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  font-size: 0.9rem;
  color: var(--color-grey);
  letter-spacing: 0.1em;
}

h2 {
  margin-top: 2em;
}

Add the below line to main.go.

http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("./static"))))

The http.FileServer part is evident. http.StripPrefix(...) is needed to remove the /static/ prefix from the URL since -

1. Go http will see static as a directory and try to serve it
2. /static/ will get directed to a route ../static which does not exist

Production sites often have static files or ready content to serve. We will take an example of help page to demonstrate. Create a new file pages/help.html and add any sample content.

  http.Handle("/help/", http.StripPrefix("/help/", http.FileServer(http.Dir("./help"))))

Using Go Templates

With Go templates we separate the content from the presentation.

Add below code to main.go -

type Book struct {
	Title  string
	Author string
}


http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
		log.Println("/ request received")
		path := "pages/index.html"

		if r.URL.Path != "/" {
			path = "pages" + strings.TrimSuffix(r.URL.Path, "/") + ".html"
		}
		books := map[string][]Book{
			"Books": {
				{Title: "The Great Gatsby", Author: "F. Scott Fitzgerald"},
				{Title: "To Kill a Mockingbird", Author: "Harper Lee"},
				{Title: "1984", Author: "George Orwell"},
			},
		}
		tmpl := template.Must(template.ParseFiles(path))
		tmpl.Execute(w, books)
	})

books is a just a map of strings to slice of Book struct. We will refer Books within the map in html to render the books in the HTML page. In real world, books will come from a database query.

Replace the hard-coded books in index.html to -

 <div class="col-12">
  <div class="row" id="books-list">
    {{ range .Books}}
    
    <div class="col-12 col-6-md card">
      <div class="row">

        <div class="col-12">
          <h4>{{ .Title }} </h4>
        </div>

        <div class="col-12 col-6-md">
          🖋️ {{ .Author }}   



        </div>
      </div>
    </div>
    
    {{ end }}
  </div>
</div>

You will now see books on the site, but the information is coming from the Go server. All of this is good but it provides a fairly static experience. Importantly, we have not added any functionality to add books.

Enter HTMX.

Add HTMX

Add the following script to the bottom of the head tag in index.html.

<script src="https://unpkg.com/htmx.org/dist/htmx.js"></script>

Modify the form to add hx-post and hx-target attributes.

<form hx-post="book-add" hx-target="#books-list" hx-swap="beforeend"
  hx-on::after-request=" if(event.detail.successful) this.reset()">
  <div class="row">
    <div class="col-12 col-6-md ">
      <label for="title-id">Title</label>
      <input type="text" name="title" id="title-id" />
    </div>

    <div class="col-12 col-6-md ">
      <label for="author-id">Author</label>
      <input type="text" name="author" id="author-id" />
    </div>
    <div class="col-12 is-right">
      <button type="submit" class="button primary">Add</button>
    </div>
  </div>
</form>

You will see that -

1. hx-post="book-add" is meant to call the /book-add route in the Go server
2. hx-target="#books-list" will update the #books-list element with the response from the server. The response is in the form of HTML and will be added to the #books-list element.
3. hx-swap="beforeend" will add the response to the end of the #books-list element. We are not replacing the entire book list with the server response, rather just add the new book at the very end of the list. See more on these methods in HTMX docs
4. We reset form on successful submission with hx-on::after-request=" if(event.detail.successful) this.reset()

Add a template reference in the book data rendering code -

<div class="row" id="books-list">
  {{ range .Books}}
  {{ block "book-item" . }}
  <div class="col-12 col-6-md card">
    <div class="row">

      <div class="col-12">
        <h4>{{ .Title }} </h4>
      </div>

      <div class="col-12 col-6-md">
        🖋️ {{ .Author }}   



      </div>
    </div>
  </div>
  {{ end }}
  {{ end }}
</div>

The only change you see is the {{ block "book-item" . }} reference. We have used block to create a template reference. Go code will refer to this template reference so that you can just pass in the data and rest of the HTML + CSS will be reused from the HTML file. There are of course more mature ways of handling this in real-world apps including creation of separate template files for individual components.

Add the following code to main.go to handle the book-add request.

http.HandleFunc("/book-add", func(w http.ResponseWriter, r *http.Request) {
  title := r.PostFormValue("title")
  author := r.PostFormValue("author")
  log.Println("html request received.. " + title + " " + author)

  tmpl := template.Must(template.ParseFiles("pages/index.html"))
  tmpl.ExecuteTemplate(w, "book-item", Book{Title: title, Author: author})
})

Here -

1. We just receive the post request
2. Parse and update the content

We would have written to a database in real-world apps.

That is it. You have a working app with HTMX and Go, which does not need any refreshes and behaves like a single page app.

See the complete code is on Github.

Conclusion

• The simplicity of htmx is awesome. It is a great way to add interactivity to the page without having to deal with JavaScript.
• HTMX will reduce a lot of code that we have all come to write and love(?)
• Javascript will not go anywhere. I find it more intuitive to write JS than Go templates + HTMX (or any other template engine for that matter).
• If you take the Javascript part out of the equation, writing future web apps in languages like Go, C#, etc. may in fact be enjoyable.

While I continue to not be a fan of server-driven frontend and templates (like Go templates, Pug), I am excited to see how htmx will evolve and what it means for the future of frontend development.

From get go, I liked Fiber framework.

Fiber is an ExpressJS inspired framework -

• easy for NodeJS developers to pick up
• fast (I mean really fast - see benchmarks)
• easy to develop
• flexible

Coupled with Go’s simplicity, light-weight nature, ease of async programming and deployment, Fiber is a formidable (albeit simple) tool to quickly develop web apps.

Also see: a small-scale developer’s view of NodeJS vs Golang.

In this post, let us see an example of developing simple CRUD APIs in Fiber v2. We will not be using an ORM or a database to keep things focused on Fiber and Golang.

Start with Go

First, download and install Go on your computer.

Ensure that your favourite editor (= VSCode) has support to code Go programs.

• Install Go extension
• Configure editor

If you are looking at this in 2020, you may also need to enable Gopls in VSCode to enable better module support and more modern features. Hit Ctrl + Shift + P > type Settings > Hit Enter. Type in @ext:golang.go gopls to see Go extension settings. Scroll down and enable Go: Use Language Server.

You are all set.

Project Structure

Create a folder on your computer and open that folder in VSCode.

Create a new file server.go. Code in the following -

package main

import "fmt"

func main() {
fmt.Println("hello world")
}

Open terminal in VSCode (Ctrl + ~) and run program.

go run server.go

You should see an output message if everything works fine.

Get started on Fiber

Enter below command in the VSCode terminal to install fiber.

go get github.com/gofiber/fiber/v2

We will now start coding the API in server.go.

package main

import (
	"github.com/gofiber/fiber/v2"
	"github.com/gofiber/fiber/v2/middleware/logger"
)


type Todo struct {
	ID        int    `json:"id"`
	Name      string `json:"name"`
	Completed bool   `json:"completed"`
}

var todos = []Todo{
	{ID: 1, Name: "abc", Completed: false},
	{ID: 2, Name: "def", Completed: true},
}

func main() {

	app := fiber.New()
	app.Use(logger.New())

	app.Get("/", func(c *fiber.Ctx) error {
		return c.SendString("Hello, World!")
    })

    app.Listen(":5000")
}

We have done a few simple things here -

• defined a basic structure for our todo using type Todo struct {}. We also provided the JSON equivalents of the fields
• created a simple array of type Todo - var todos = []Todo{{ID: 1, Name: "abc", Completed: false},}
• initiated fiber with app := fiber.New()
• enabled logging input requests with a single line app.Use(logger.New())
• enabled a simple response at root using app.Get("/", ...)

Run the program again using go run server.go.

Use a REST client (like Insomnia), invoke your API at http://localhost:5000/ to see a hello world response.

You can start seeing similarities with Express server in the simple program - more will follow.

At this stage, you may observe that any change you make will require a restart of server. There are multiple ways of solving this problem including using our dear own nodemon. Let us stick to a Go solution though - we will use a package called air to monitor for changes in our project folder and restart server whenever there are changes.

In your VSCode terminal, input -

https://github.com/cosmtrek/air

You can stop your own Go server and simply type -

air

The above command will run your server and automatically restart it whenever there are changes.

Onwards then.

(Pseudo) CRUD APIs in Fiber

Let us code in the APIs in our program.

Get Request

Introduce below line in main function before app.Listen(":5000") line.

app.Get("/todo", getTodo)

Create a new function below main.

func getTodo(c *fiber.Ctx) error {
	return c.Status(fiber.StatusOK).JSON(todos)
}

The function is (more or less) self-explanatory. The pointer c is fiber context that is injected in our function by fiber framework. We just return an ok with our todos array data. Simple enough.

Test the get API using the URL http://localhost:5000/todo and GET method from the REST client. You will see the below JSON response.

[
  {
    "id": 1,
    "name": "abc",
    "completed": false
  },
  {
    "id": 2,
    "name": "def1",
    "completed": false
  }
]

Post Request

Introduce a new line after GET request in server.go.

	app.Post("/todo", postTodo)

As it was earlier, create a new function called postTodo -

func postTodo(c *fiber.Ctx) error {
	type request struct {
		Name      string `json:"name"`
		Completed bool   `json:"completed"`
	}

	var body request

	err := c.BodyParser(&body)
	if err != nil {
		return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
			"error": "Cannot parse JSON",
		})
	}

	todo := Todo{
		ID:        len(todos) + 1,
		Name:      body.Name,
		Completed: body.Completed,
	}

	todos = append(todos, todo)

	return c.Status(fiber.StatusCreated).JSON(todo)
}

We have accomplished quite a bit, but nothing out of ordinary -

• specified how our input JSON will look like (request struct)
• included a body parser middleware to fetch input JSON data
• fetched the incoming data using todo variable
• appended todo to our todos array
• returned a success message back

The below code block takes care of error checks (in our case, this handles parse errors) -

    err := c.BodyParser(&body)
	if err != nil {
		return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
			"error": "Cannot parse JSON",
		})
	}

This type of error handling is typical to a Go program. Error checks are handled by an if statement that checks error returned from a previous statement.

Create a POST request in your REST client - http://localhost:5000/todo. Input the following JSON as input -

{
  "name": "xyz",
  "completed": true
}

Send the request and you will get the same response back. Do a GET request with the same URL and you will see the additional todo record in the response.

Of course, we are dealing only with a variable that stays in memory. The changes will disappear when the server shutsdown or restarts.

Note: the id generation logic is flaky. We used the length of the array and increment by 1. Ergo, deleting a record can lead to duplicate ids.

Delete Request

You know the drill by now.

Introduce a new REST service in main..

	app.Delete("/todo/:id", deleteTodo)

Create a new function..

func deleteTodo(c *fiber.Ctx) error {
	paramID := c.Params("id")
	id, err := strconv.Atoi(paramID)
	if err != nil {
		return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
			"error": "Invalid id.",
		})
	}

	for i, todo := range todos {
		if todo.ID == id {
			todos = append(todos[0:i], todos[i+1:]...)
			return c.Status(fiber.StatusOK).JSON(todo)
		}
	}

	return c.Status(fiber.StatusNotFound).JSON(fiber.Map{"error": "Record not found"})
}

We have used a new function for string type conversion. Include the package in the import statement.

import (
	"strconv"

	"github.com/gofiber/fiber/v2"
	"github.com/gofiber/fiber/v2/middleware/logger"
)

A couple of things to take note -

1. We are not manipulating the array directly since the array itself but creating a new array each time there’s a change with this line todos = append(todos[0:i], todos[i+1:]...). Not effective, but works. Instead we could have used a pointer and updated array directly.
2. We are using a convenient shortcut provided by fiber to create response JSON on the go - fiber.Map{"error": "Record not found"}

Patch Request

Patch is similar to delete - except that we change an element instead of removing it.

Include a new function call in main.

	app.Patch("/todo/:id", patchTodo)

Create the function.

func patchTodo(c *fiber.Ctx) error {
	type request struct {
		Name      string `json:"name"`
		Completed bool   `json:"completed"`
	}
	var body request

	err := c.BodyParser(&body)
	if err != nil {
		return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
			"error": "Cannot parse JSON",
		})
	}

	paramID := c.Params("id")
	id, err := strconv.Atoi(paramID)
	if err != nil {
		return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
			"error": "Invalid id.",
		})
	}

	for i, todo := range todos {
		if todo.ID == id {
			todos[i] = Todo{
				ID:        id,
				Name:      body.Name,
				Completed: body.Completed,
			}
			return c.Status(fiber.StatusOK).JSON(todos[i])
		}
	}

	return c.Status(fiber.StatusNotFound).JSON(fiber.Map{"error": "Record not found"})
}

All Code in One Place

We have created a program using Fiber to perform CRUD operations, but on a local variable. With a couple of more packages and a few lines of code we could connect to a DB and get to a more real-world program.

The below code represents the final state. You may also refer to this Git repo for the full code.

package main

import (
	"strconv"

	"github.com/gofiber/fiber/v2"
	"github.com/gofiber/fiber/v2/middleware/logger"
)

// Todo struct!
type Todo struct {
	ID        int    `json:"id"`
	Name      string `json:"name"`
	Completed bool   `json:"completed"`
}

var todos = []Todo{
	{ID: 1, Name: "abc", Completed: false},
	{ID: 2, Name: "def", Completed: true},
}

func main() {

	app := fiber.New()
	app.Use(logger.New())

	app.Get("/", func(c *fiber.Ctx) error {
		return c.SendString("Hello, World!")
	})

	app.Get("/todo", getTodo)
	app.Post("/todo", postTodo)
	app.Get("/todo/:id", getSingleTodo)
	app.Delete("/todo/:id", deleteTodo)
	app.Patch("/todo/:id", patchTodo)

	app.Listen(":5000")
}

func getTodo(c *fiber.Ctx) error {
	return c.Status(fiber.StatusOK).JSON(todos)
}

func getSingleTodo(c *fiber.Ctx) error {
	paramID := c.Params("id")
	id, err := strconv.Atoi(paramID)
	if err != nil {
		return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
			"error": "ID invalid.",
		})
	}

	for _, todo := range todos {
		if todo.ID == id {
			return c.Status(fiber.StatusFound).JSON(todo)
		}
	}

	return c.Status(fiber.StatusNotFound).JSON(fiber.Map{"error": "Record not found"})
}

func deleteTodo(c *fiber.Ctx) error {
	paramID := c.Params("id")
	id, err := strconv.Atoi(paramID)
	if err != nil {
		return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
			"error": "Invalid id.",
		})
	}

	for i, todo := range todos {
		if todo.ID == id {
			todos = append(todos[0:i], todos[i+1:]...)
			return c.Status(fiber.StatusOK).JSON(todo)
		}
	}

	return c.Status(fiber.StatusNotFound).JSON(fiber.Map{"error": "Record not found"})
}

func postTodo(c *fiber.Ctx) error {
	type request struct {
		Name      string `json:"name"`
		Completed bool   `json:"completed"`
	}

	var body request

	err := c.BodyParser(&body)
	if err != nil {
		return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
			"error": "Cannot parse JSON",
		})
	}

	todo := Todo{
		ID:        len(todos) + 1,
		Name:      body.Name,
		Completed: body.Completed,
	}

	todos = append(todos, todo)

	return c.Status(fiber.StatusCreated).JSON(todo)
}

func patchTodo(c *fiber.Ctx) error {
	type request struct {
		Name      string `json:"name"`
		Completed bool   `json:"completed"`
	}
	var body request

	err := c.BodyParser(&body)
	if err != nil {
		return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
			"error": "Cannot parse JSON",
		})
	}

	paramID := c.Params("id")
	id, err := strconv.Atoi(paramID)
	if err != nil {
		return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
			"error": "Invalid id.",
		})
	}

	for i, todo := range todos {
		if todo.ID == id {
			todos[i] = Todo{
				ID:        id,
				Name:      body.Name,
				Completed: body.Completed,
			}
			return c.Status(fiber.StatusOK).JSON(todos[i])
		}
	}

	return c.Status(fiber.StatusNotFound).JSON(fiber.Map{"error": "Record not found"})
}

Now go create your magic. Enjoy Go!

Javascript is the most used language in the world and that status will not change in a hurry - thanks to its frontend nature. NodeJS is super useful since we can use the same language for server and stand up a production grade server using frameworks like ExpressJS or Fastify in a matter of hours. I absolutely am in love with NodeJS -

1. Light weight
2. Easy to create, deploy and maintain applications
3. Many, many packages that make it easy to add new functionality (yes, I love them packages)
4. Decent performance

However, there are a few concerns -

1. Single threaded nature can be a cause for concern at some level. Yes, there are promises but with due respect to them - there are going to be transactions that can still make the engine “stuck”. CPU-bound, high performance tasks can be a problem in Node
2. Treatment of numbers as floats are perceived to be harmful for applications that treat such transactions as sacred
3. Types help in development-time and runtime validations that avoid all that additional code checks. Medium to high complexity projects can be (arguably?) easier to maintain with typed languages.

I am a small-scale developer + entrepreneur who creates a number of SaaS applications and also builds applications for my clients. I do not quite share any of the outlined concerns of Javascript, but I was actively looking at an alternate “fast to develop” platform about an year back. That led me to do some quick research by developing “to do” apps like there was no tomorrow. Here’s a highly opinionated view of a small-scale entrepreneur and developer on how Golang can be super useful as part of your tool-set.

Aside: While I use Typescript in many projects, I cannot firmly switch over to that camp. I love the “type less” nature of JS and it keeps my productivity high for smaller projects. Also, I found it easier to switch all the way to C# or Go.

The Alternatives

The alternatives I evaluated were -

1. Rust: Seems to be everyone’s darling nowadays, but is hard to learn and is certainly not a “highly productive” language for something like web development
2. ASP.NET and C#: I love the way C# has been developed over the past many years. I have used C# only for amateurish desktop applications, and am not afraid of extending it to web. Web assembly support and Blazor make this an exciting space
3. Golang: Simple to learn, code and deploy (thanks to the highly touted “single executable” nature of Go). Really light-weight and quite exciting async programming experience

Finally what drew me to use Go was the “promise” of easy async programming using go routines and the promise of better & consistent performance. Though I doubt whether I can put either of these to active / practical use and see exponential gains for any of my applications in the near term.

Advantage Go for web applications

Here’s a quick take on why you should consider Go in your toolset for web development.

Simplicity

Go lang is easy to learn.

Despite the strictly typed nature of Go and more complex concepts like channels, coroutines, et. al, one can easily start identifying everything that a given program is trying to do quite easily. I found this easy to pick up nature quite invaluable when trying to evaluate the complexity of web applications which were created by others but I had to go in and make changes.

Light weight

Yes, Go is as light-weight as they come despite being “decently productive”.

I can run more production applications, even more POCs and then some on a single VPS without any problems. While I did not quite have any issues per se with NodeJS based apps, I would love to imagine a not-so-distant future where I can deploy hundreds of smaller applications without spending a fortune using Go.

Performance

I am not going to lie. Despite reading up quite a bit and finding for myself on how performance of applications can be specific to a given use case, the promise of high performance in Go applications is a strong one.

After looking at Techempower benchmarks for a few years, I had resigned to the fact that my favourite frameworks are not going to be burning rubber on the road anytime soon. Go (and to a certain extent C#) is one of the ways of “future-proofing” my products and re-assure to myself that I can build “fast applications” for thousands of users.

Do note -

• often times, performance is a concept highly specific to your use case
• using a language does not ensure automatic high-performance, but the language features like async programming, “ability to make the machine work to its fullest” help. Compiled languages are often better here
• Web applications often do not have the same issues as their desktop / mobile counterparts. For e.g. Fastify + Postgres ranks higher (#148) as compared to ASP.NET + Entityframework Core + Postgres (#149!). Using an ORM in Fastify can of course throw a spanner in these results. A highly productive framework like Nest + Fastify + Mysql is not far behind (#189)

* Performance rankings are good as of 2020

Scalability

Go has lower memory footprint. It also compiles to a specific platform and occupies lower space (the latter is not quite an evaluation factor in this day and age). For me low memory usage translates to better scalability.

Concurrency and the ease of using async programming also contributes to better scalability. You could potentially use Go routines to start hundreds or thousands of threads on a 1 GB VPS without issues.

Developer-friendly

Go is easy to learn, comparatively easy to develop, and easy to deploy. Go also features in-built code formatting rules, good support in code editors and a good packaging system.

The Bad of Golang

While I would love to use Go for command line applications, I am not too sure I will switch over my web apps really soon.

1. There’s a lot of typing/copy-paste involved. Go’s simplicity also means fewer functions that provide good abstractions for common tasks. While I would love to use for loops for every problem, Javascript and C# have really good shortcuts to solve problems that are too elegant and productive to resist
2. I don’t particularly like the error handling (if err != nil). I grew up thinking the world of try/catch - so this may be an “old-man problem”
3. Golang was blessed on us a while back, but there are far few gigs on Go. SMBs stay away from the Go world since they don’t see enough developers available (= expensive to create and maintain). This is a problem for my “develop everything despite severely limited resource” mentality

I could not avoid a direct performance to NodeJS and the thousands of frameworks therein.

• Node was more productive - thanks to Javascript, and many useful packages in the Node ecosystem
• Node frameworks offer “more”. I can completely switch to Typescript and code like Angular in NestJS, or go kaput with my own structure using Express/Fastify
• Examples, demos and learning resources are bountiful in NodeJS. For e.g. integrating your favourite payment gateway is made easier with examples and possibly a SDK for NodeJS, not so for Go (though you could use their APIs as easily)

Conclusion

• Learn Go
• Use Go for side projects
• Don’t completely switch over (unless of course if you are in a Go-friendly company)

Are you sold and want to try out Go?

• Start with the “tour of Go”
• Once you are ready, start with Fiber framework. While frameworks are not as important in Go as in Node, Fiber makes transition easy since it follows the same concepts as ExpressJS

Also see: start on golang with Fiber.