go-app

A package to build progressive web apps with Go programming language and WebAssembly.

7,868

361

7,868

View on GitHub

Top Related Projects

fyne

24,481

Cross platform GUI toolkit in Go inspired by Material Design

wails

24,320

Create beautiful applications using Go

lorca

7,997

Build cross-platform modern desktop apps in Go + HTML5

webview

12,478

Tiny cross-platform webview library for C/C++. Uses WebKit (GTK/Cocoa) and Edge WebView2 (Windows).

qt

10,376

Qt binding for Go (Golang) with support for Windows / macOS / Linux / FreeBSD / Android / iOS / Sailfish OS / Raspberry Pi / AsteroidOS / Ubuntu Touch / JavaScript / WebAssembly

go-app

7,868

A package to build progressive web apps with Go programming language and WebAssembly.

Quick Overview

go-app is a package for building progressive web apps (PWAs) with Go. It allows developers to create web applications using Go's syntax and features, which are then compiled to WebAssembly and can run in web browsers. This project aims to simplify the process of building cross-platform web applications using Go.

Pros

Enables building web applications using Go, leveraging its strong typing and concurrency features
Supports creating progressive web apps (PWAs) that can work offline and be installed on devices
Provides a declarative UI framework similar to React, making it easier to build complex user interfaces
Offers hot reloading during development for faster iteration

Cons

Limited ecosystem compared to more established web frameworks like React or Vue
Performance may not be as optimized as native JavaScript frameworks
Learning curve for developers who are not familiar with Go or WebAssembly
Limited browser support for WebAssembly may affect compatibility with older browsers

Code Examples

Creating a simple component:

type hello struct {
    app.Compo
}

func (h *hello) Render() app.UI {
    return app.H1().Text("Hello, World!")
}

Handling user input:

type greeter struct {
    app.Compo
    name string
}

func (g *greeter) Render() app.UI {
    return app.Div().Body(
        app.Input().
            Type("text").
            Value(g.name).
            OnChange(g.OnInputChange),
        app.P().Text("Hello, " + g.name),
    )
}

func (g *greeter) OnInputChange(ctx app.Context, e app.Event) {
    g.name = ctx.JSSrc.Get("value").String()
    g.Update()
}

Making an HTTP request:

func (c *component) FetchData(ctx app.Context) {
    ctx.Async(func() {
        res, err := http.Get("https://api.example.com/data")
        if err != nil {
            app.Log(err)
            return
        }
        defer res.Body.Close()
        
        // Process the response...
        c.Update()
    })
}

Getting Started

Install Go and set up your Go workspace.

Install go-app:

go get -u github.com/maxence-charriere/go-app/v9/pkg/app

Create a new Go file (e.g., main.go) with the following content:

package main

import "github.com/maxence-charriere/go-app/v9/pkg/app"

func main() {
    app.Route("/", &hello{})
    app.Run()
}

type hello struct {
    app.Compo
}

func (h *hello) Render() app.UI {
    return app.H1().Text("Hello, go-app!")
}

Build and run your application:

GOARCH=wasm GOOS=js go build -o web/app.wasm
go run main.go

Open a web browser and navigate to http://localhost:8000 to see your app running.

Competitor Comparisons

fyne

24,481

Cross platform GUI toolkit in Go inspired by Material Design

Pros of Fyne

Native look and feel across platforms
Supports desktop and mobile applications
Extensive widget library for UI development

Cons of Fyne

Larger binary sizes due to bundled resources
Steeper learning curve for developers new to GUI programming

Code Comparison

go-app example:

func main() {
    app.Route("/", &hello{})
    app.Run()
}

type hello struct {
    app.Compo
}

func (h *hello) Render() app.UI {
    return app.H1().Text("Hello World!")
}

Fyne example:

func main() {
    a := app.New()
    w := a.NewWindow("Hello")
    w.SetContent(widget.NewLabel("Hello World!"))
    w.ShowAndRun()
}

go-app focuses on web-based applications using a component-based approach, while Fyne provides a more traditional desktop application development experience with native widgets. go-app's syntax is more declarative, resembling web frameworks, whereas Fyne uses a more imperative style typical of GUI toolkits. go-app is better suited for web applications that can be packaged as desktop apps, while Fyne excels in creating native desktop and mobile applications with a consistent look across platforms.

wails

24,320

Create beautiful applications using Go

Pros of Wails

Native desktop application development with Go and web technologies
Cross-platform support for Windows, macOS, and Linux
Access to native OS APIs and features

Cons of Wails

Requires separate frontend development (HTML, CSS, JavaScript)
Larger application size due to bundled web technologies
Steeper learning curve for developers unfamiliar with desktop app development

Code Comparison

go-app:

func main() {
    app.Route("/", &hello{})
    app.Run()
}

type hello struct {
    app.Compo
}

func (h *hello) Render() app.UI {
    return app.H1().Text("Hello World!")
}

Wails:

func main() {
    app := wails.CreateApp(&wails.AppConfig{
        Width:  1024,
        Height: 768,
        Title:  "My Wails App",
    })
    app.Bind(basic)
    err := app.Run()
    if err != nil {
        log.Fatal(err)
    }
}

Summary

go-app focuses on building progressive web apps (PWAs) using Go, while Wails enables the creation of native desktop applications using Go and web technologies. go-app offers a more streamlined development experience for web-based applications, whereas Wails provides greater access to native OS features and APIs. The choice between the two depends on the specific requirements of your project and the target platform.

lorca

7,997

Build cross-platform modern desktop apps in Go + HTML5

Pros of Lorca

Uses system-installed Chrome/Chromium, reducing app size
Allows direct Go-to-JavaScript communication
Supports multiple operating systems (Windows, macOS, Linux)

Cons of Lorca

Requires Chrome/Chromium to be installed on the user's system
Limited UI customization compared to Go-app's extensive component library
Less active development and community support

Code Comparison

Lorca:

ui, _ := lorca.New("", "", 480, 320)
defer ui.Close()
ui.Bind("add", func(a, b int) int { return a + b })
ui.Load("data:text/html,<html><body><h1>Hello World</h1></body></html>")
<-ui.Done()

Go-app:

func main() {
    app.Route("/", &hello{})
    app.Run()
}

type hello struct {
    app.Compo
}

func (h *hello) Render() app.UI {
    return app.H1().Text("Hello World")
}

Summary

Lorca offers a lightweight solution for building desktop applications using Go and web technologies, leveraging the system's installed Chrome/Chromium. It provides direct Go-to-JavaScript communication but requires the browser to be present on the user's system.

Go-app, on the other hand, is a more comprehensive framework for building progressive web apps (PWAs) with Go. It offers a rich component library and doesn't rely on external dependencies, but may result in larger application sizes.

Choose Lorca for simple desktop applications with minimal setup, or Go-app for more complex, cross-platform web applications with extensive UI customization options.

webview

12,478

Tiny cross-platform webview library for C/C++. Uses WebKit (GTK/Cocoa) and Edge WebView2 (Windows).

Pros of webview

Native system dialogs and file pickers
Smaller binary size and faster startup time
Easier integration with existing Go applications

Cons of webview

Limited cross-platform UI consistency
Less control over the rendering process
Fewer built-in UI components and utilities

Code Comparison

webview:

package main

import "github.com/webview/webview"

func main() {
    w := webview.New(true)
    defer w.Destroy()
    w.SetTitle("Webview Example")
    w.SetSize(800, 600, webview.HintNone)
    w.Navigate("https://example.com")
    w.Run()
}

go-app:

package main

import (
    "github.com/maxence-charriere/go-app/v9/pkg/app"
)

func main() {
    app.Route("/", &hello{})
    app.Run()
}

type hello struct {
    app.Compo
}

func (h *hello) Render() app.UI {
    return app.H1().Text("Hello World!")
}

The webview example demonstrates a simple native window with a web view, while the go-app example shows a basic component-based web application structure. go-app provides a more comprehensive framework for building web applications in Go, while webview offers a lightweight solution for embedding web content in native applications.

qt

10,376

Qt binding for Go (Golang) with support for Windows / macOS / Linux / FreeBSD / Android / iOS / Sailfish OS / Raspberry Pi / AsteroidOS / Ubuntu Touch / JavaScript / WebAssembly

Pros of qt

Native desktop application development with cross-platform support
Rich set of UI components and widgets for complex interfaces
Mature ecosystem with extensive documentation and community support

Cons of qt

Larger application size due to bundled Qt libraries
Steeper learning curve, especially for developers new to desktop GUI development
More complex build process and deployment compared to web-based solutions

Code Comparison

go-app (Web-based):

func main() {
    app.Route("/", &hello{})
    app.Run()
}

type hello struct {
    app.Compo
}

func (h *hello) Render() app.UI {
    return app.H1().Text("Hello, World!")
}

qt (Desktop):

func main() {
    app := widgets.NewQApplication(len(os.Args), os.Args)
    window := widgets.NewQMainWindow(nil, 0)
    label := widgets.NewQLabel2("Hello, World!", window, 0)
    window.Show()
    app.Exec()
}

go-app focuses on web-based applications with a simpler API, while qt provides more control for native desktop applications but requires more setup and code. go-app's approach is more suitable for web developers, while qt caters to those needing desktop-specific features and performance.

go-app

7,868

A package to build progressive web apps with Go programming language and WebAssembly.

Pros of go-app

Provides a comprehensive framework for building progressive web apps (PWAs) in Go
Offers a declarative UI approach similar to React, but using Go syntax
Supports server-side rendering for improved performance and SEO

Cons of go-app

Learning curve may be steeper for developers not familiar with Go
Limited ecosystem compared to more established JavaScript frameworks
May have performance overhead due to WebAssembly compilation

Code Comparison

go-app:

func (h *hello) Render() app.UI {
    return app.Div().Body(
        app.H1().Text("Hello"),
        app.P().Text("Welcome to go-app!"),
    )
}

Both repositories appear to be the same project (maxence-charriere/go-app), so a code comparison between them is not applicable. The code snippet above demonstrates the declarative UI approach used in go-app.

Summary

go-app is a unique framework that brings Go to the frontend development world, offering a familiar syntax for Go developers to build web applications. While it provides an interesting alternative to JavaScript frameworks, it may have limitations in terms of ecosystem and performance compared to more established options. The project's approach to building PWAs with Go could be appealing for teams already invested in the Go ecosystem or looking for a different perspective on web development.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Go-app is a package for building progressive web apps (PWA) with the Go programming language (Golang) and WebAssembly (Wasm).

Shaping a UI is done by using a declarative syntax that creates and compose HTML elements only by using the Go programing language.

It uses Go HTTP standard model.

An app created with go-app can out of the box runs in its own window, supports offline mode, and is SEO friendly.

Documentation (built with go-app)

Install

go-app requirements:

Go 1.18 or newer
Go module

go mod init
go get -u github.com/maxence-charriere/go-app/v10/pkg/app

Declarative syntax

Go-app uses a declarative syntax so you can write reusable component-based UI elements just by using the Go programming language.

Here is a Hello World component that takes an input and displays its value in its title:

type hello struct {
	app.Compo

	name string
}

func (h *hello) Render() app.UI {
	return app.Div().Body(
		app.H1().Body(
			app.Text("Hello, "),
			app.If(h.name != "", func() app.UI {
				return app.Text(h.name)
			}).Else(func() app.UI {
				return app.Text("World!")
			}),
		),
		app.P().Body(
			app.Input().
				Type("text").
				Value(h.name).
				Placeholder("What is your name?").
				AutoFocus(true).
				OnChange(h.ValueTo(&h.name)),
		),
	)
}

Standard HTTP

Apps created with go-app complies with Go standard HTTP package interfaces.

func main() {
	// Components routing:
	app.Route("/", func() app.Composer { return &hello{} })
	app.Route("/hello", func() app.Composer { return &hello{} })
	app.RunWhenOnBrowser()

	// HTTP routing:
	http.Handle("/", &app.Handler{
		Name:        "Hello",
		Description: "An Hello World! example",
	})

	if err := http.ListenAndServe(":8000", nil); err != nil {
		log.Fatal(err)
	}
}