利用Go, HTML和CSS构建MacOS应用程序

网友投稿 1005 2022-10-21

利用Go, HTML和CSS构建MacOS应用程序

利用Go, HTML和CSS构建MacOS应用程序

go-app is a package to build progressive web apps (PWA) with Go programming language and WebAssembly.

It uses a declarative syntax that allows creating and dealing with HTML elements only by using Go, and without writing any HTML markup.

The package also provides an http.handler ready to serve all the required resources to run Go-based progressive web apps.

Install

go-app requirements:

Go 1.14 or newerGo module

# Init go module (if not initialized):go mod init# Get package:go get -u -v github.com/maxence-charriere/go-app/v6

How it works

Users: The users of your app. They request pages and resources from their web browser.app.Handler: An http.Handler used by your server or cloud function. It serves your app, its static resources, and all the required files to make it work on user browsers.Application: Your app built with this package. It is built as a WebAssembly (.wasm) binary and is served by the app.Handler.Other static resources: Styles, images, and scripts used by your app. They are also served by the app.Handler.

Declarative syntax

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

package mainimport "github.com/maxence-charriere/go-app/v6/pkg/app"type hello struct { app.Compo name string}func (h *hello) Render() app.UI { return app.Div().Body( app.Main().Body( app.H1().Body( app.Text("Hello, "), app.If(h.name != "", app.Text(h.name), ).Else( app.Text("World"), ), ), app.Input(). Value(h.name). Placeholder("What is your name?"). AutoFocus(true). OnChange(h.OnInputChange), ), )}func (h *hello) OnInputChange(src app.Value, e app.Event) { h.name = src.Get("value").String() h.Update()}func main() { app.Route("/", &hello{}) app.Route("/hello", &hello{}) app.Run()}

The app is built with the Go build tool by specifying WebAssembly as architecture and javascript as operating system:

GOARCH=wasm GOOS=js go build -o app.wasm

Note that we named the build output app.wasm. The reason is that the HTTP handler requires the web assembly app to be named this way in order to be served.

HTTP handler

Once your app is built, the next step is to serve it.

This package provides an http.Handler implementation ready to serve your PWA and all the required resources to make it work in a web browser.

The handler can be used to create either a web server or a cloud function (AWS Lambda, GCloud function or Azure function).

package mainimport ( "net/http" "github.com/maxence-charriere/go-app/v6/pkg/app")func main() { h := &app.Handler{ Title: "Hello Demo", Author: "Maxence Charriere", } if err := http.ListenAndServe(":7777", h); err != nil { panic(err) }}

The server is built as a standard Go program:

go build

Note that you need to add app.wasm to the server location. The reason is that app.Handler is looking for a file named app.wasm in the server directory in order to serve the web assembly binary.

hello-local # Server directory├── app.wasm # Wasm binary├── hello-local # Server binary└── main.go # Server code

Works on mainstream browsers

ChromeEdgeFirefoxOperaSafari
Desktop*
Mobile

*only Chromium based Edge

Demo

Hello app

The hello example introduced above:

SourcesDescription
helloHello app.
hello-localHello app that runs on a local server.
hello-local-external-rootHello app that runs on a local server but with a custom root directory.
hello-dockerHello app that run in a Docker container.
hello-gcloud-appengineHello app that run on Google Cloud App Engine.
See live
hello-gcloud-funcHello app that run on Google a Cloud Function.
See live

Live apps

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain go-app development. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:PHP基础教程-02 搭建环境准备
下一篇:如何构建可重复读取inputStream的request
相关文章

 发表评论

暂时没有评论,来抢沙发吧~