Skip to content

Commit c2396c6

Browse files
maxence-charrieremaxence-charriere
committed
Update README.md
1 parent eaf501f commit c2396c6

File tree

1 file changed

+47
-112
lines changed

1 file changed

+47
-112
lines changed

‎README.md‎

Lines changed: 47 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -13,33 +13,19 @@
1313
<a href="https://opencollective.com/go-app" alt="Financial Contributors on Open Collective"><img src="https://opencollective.com/go-app/all/badge.svg?label=open+collective&color=4FB9F6" /></a>
1414
</p>
1515

16-
**go-app** is a package to build [progressive web apps (PWA)](https://developers.google.com/web/progressive-web-apps/) with [Go programming language](https://golang.org) and [WebAssembly](https://webassembly.org).
16+
Go-app is a package for **building progressive web apps (PWA)** with the [Go programming language (Golang)](https://golang.org) and [WebAssembly (Wasm)](https://webassembly.org).
1717

18-
It uses a [declarative syntax](#declarative-syntax) that allows creating and dealing with HTML elements only by using Go, and without writing any HTML markup.
18+
Shaping a UI is done by using a **[declarative syntax](/syntax) that creates and compose HTML elements only by using the Go programing language**.
1919

20-
The package also provides an [http.handler](#http-handler) ready to serve all the required resources to run Go-based progressive web apps.
20+
It **uses [Go HTTP standard](https://golang.org/pkg/net/http) model**.
21+
22+
An app created with go-app can out of the box **run in its own window**, **supports offline mode**, and are **SEO friendly**.
2123

2224
## Documentation
2325

2426
[![go-app documentation](docs/web/images/go-app.png)](https://go-app.dev)
2527

26-
- [Getting started](https://go-app.dev/start)
27-
- [Architecture](https://go-app.dev/architecture)
28-
- [Reference](https://go-app.dev/reference) | [Go.dev](https://pkg.go.dev/github.com/maxence-charriere/go-app/v8/pkg/app)
29-
30-
- [Components](https://go-app.dev/components)
31-
- [Declarative syntax](https://go-app.dev/syntax)
32-
- [Routing](https://go-app.dev/routing)
33-
- [Concurrency](https://go-app.dev/concurrency)
34-
- [Javascript and DOM](https://go-app.dev/js)
35-
- [Static resources](https://go-app.dev/static-resources)
36-
37-
- [Built with go-app](https://go-app.dev/built-with)
38-
- [Install](https://go-app.dev/install)
39-
40-
## Sneak peek
41-
42-
### Install
28+
## Install
4329

4430
**go-app** requirements:
4531

@@ -51,115 +37,64 @@ go mod init
5137
go get -u github.com/maxence-charriere/go-app/v8/pkg/app
5238
```
5339

54-
### Declarative syntax
40+
## Declarative syntax
5541

56-
**go-app** uses a declarative syntax so you can write component-based UI elements just by using the Go programming language.
42+
Go-app uses a [declarative syntax](/syntax) so you can **write reusable component-based UI elements** just by using the Go programming language.
5743

58-
```go
59-
package main
60-
61-
import "github.com/maxence-charriere/go-app/v8/pkg/app"
44+
Here is a Hello World component that takes an input and displays its value in its title:
6245

46+
```go
6347
type hello struct {
64-
app.Compo
65-
name string
66-
}
48+
app.Compo
6749

68-
func (h *hello) Render() app.UI {
69-
return app.Div().Body(
70-
app.Main().Body(
71-
app.H1().Body(
72-
app.Text("Hello, "),
73-
app.If(h.name != "",
74-
app.Text(h.name),
75-
).Else(
76-
app.Text("World"),
77-
),
78-
),
79-
app.Input().
80-
Value(h.name).
81-
Placeholder("What is your name?").
82-
AutoFocus(true).
83-
OnChange(h.OnInputChange),
84-
),
85-
)
50+
name string
8651
}
8752

88-
func (h *hello) OnInputChange(ctx app.Context, e app.Event) {
89-
h.name = ctx.JSSrc.Get("value").String()
90-
h.Update()
91-
}
92-
93-
func main() {
94-
app.Route("/", &hello{})
95-
app.Route("/hello", &hello{})
96-
app.Run()
53+
func (h *hello) Render() app.UI {
54+
return app.Div().Body(
55+
app.H1().Body(
56+
app.Text("Hello, "),
57+
app.If(h.name != "",
58+
app.Text(h.name),
59+
).Else(
60+
app.Text("World!"),
61+
),
62+
),
63+
app.P().Body(
64+
app.Input().
65+
Type("text").
66+
Value(h.name).
67+
Placeholder("What is your name?").
68+
AutoFocus(true).
69+
OnChange(h.ValueTo(&h.name)),
70+
),
71+
)
9772
}
98-
99-
```
100-
101-
The app is built with the Go build tool by specifying WebAssembly as architecture and javascript as operating system:
102-
103-
```sh
104-
GOARCH=wasm GOOS=js go build -o app.wasm
10573
```
10674

107-
Note that the build output is named `app.wasm` because the HTTP handler expects the wasm app to be named that way in order to serve its content.
75+
## Standard HTTP
10876

109-
### HTTP handler
110-
111-
Once the wasm app is built, the next step is to serve it.
112-
113-
This package provides an [http.Handler implementation](https://pkg.go.dev/github.com/maxence-charriere/go-app/pkg/app#Handler) ready to serve a PWA and all the required resources to make it work in a web browser.
114-
115-
The handler can be used to create either a web server or a cloud function (AWS Lambda, Google Cloud function or Azure function).
77+
Apps created with go-app complies with [Go standard HTTP](https://golang.org/pkg/net/http) package interfaces.
11678

11779
```go
118-
package main
119-
120-
import (
121-
"net/http"
122-
123-
"github.com/maxence-charriere/go-app/v8/pkg/app"
124-
)
125-
12680
func main() {
127-
h := &app.Handler{
128-
Title: "Hello Demo",
129-
Author: "Maxence Charriere",
130-
}
131-
132-
if err := http.ListenAndServe(":7777", h); err != nil {
133-
panic(err)
134-
}
81+
// Components routing:
82+
app.Route("/", &hello{})
83+
app.Route("/hello", &hello{})
84+
app.RunWhenOnBrowser()
85+
86+
// HTTP routing:
87+
http.Handle("/", &app.Handler{
88+
Name: "Hello",
89+
Description: "An Hello World! example",
90+
})
91+
92+
if err := http.ListenAndServe(":8000", nil); err != nil {
93+
log.Fatal(err)
94+
}
13595
}
13696
```
13797

138-
The server is built as a standard Go program:
139-
140-
```sh
141-
go build
142-
```
143-
144-
Once the server and the wasm app built, `app.wasm` must be moved in the `web` directory, located by the side of the server binary. The web directory is where to put static resources, such as the wasm app, styles, scripts, or images.
145-
146-
The directory should look like as the following:
147-
148-
```sh
149-
. # Directory root
150-
├── hello # Server binary
151-
├── main.go # Server source code
152-
└── web # Directory for static resources
153-
└── app.wasm # Wasm binary
154-
```
155-
156-
Then launch the `hello` server and open the web browser to see the result.
157-
158-
Demo code and live demo are available on the following links:
159-
160-
- [Demo repository](https://github.com/maxence-charriere/go-app-demo/tree/v6)
161-
- [Live Hello world](https://go-app-demo-42.appspot.com)
162-
16398
## Contributors
16499

165100
### Code Contributors

0 commit comments

Comments
 (0)