Better Examples

[ddouglas]

Note: This should be converted to a discussion

As somebody who really appreciates this lib and I'm eager to put some projects together to get a better understanding of PWAs and WASM in general, there is a severe lack of examples that one can use just to get started and get a base level understanding of how to use this library. There are good examples on the individual features, but what is missing is how they tie together.

I'd like to see about getting those examples put together by some of veterans of this repo that I've noticed are repeat commenters on issues. Until we can get these added to the main docs site, I'd like this issue/discussion be used to house links to them for future googlers of Golang WASM libs. I'll kick us off:

Request/Response for External Data

While looking at another issue by @krusty in #1038, I stumbled on an await package that he has in there that demo's what this process looks like. Up until I saw this, I naively thought that this would be much much simplier. Because of his work in this folder, I'll be more preprared when I get to this point in my apps development

https://github.com/krustowski/littr/blob/master/cmd/await/README.md

Examples Needed

• Examples of handling CRUD Lifecycle
• Example Applications such as the ever famous Todo List App (I'm actually working on this one)
• Explanation on why and if the Range func is prefered over looping and building a slice of app.Compo's instead

[krustowski]

Hi there,

thanks for mentioning that await fetch() prototype in go-app's JS wrapper. I have actually used it in the app (FE) itself later and made it much simpler (see the Fetch() function: https://github.com/krustowski/littr/blob/master/pkg/frontend/common/fetch.go#L121). The implementation is not great, but it does its job in fetching/passing the data from/to backend (BE).

Examples of handling CRUD Lifecycle

As far as the CRUD lifecycle handling is concerned, I could list some examples from the very repo mentioned already.

The architecture of the app's BE-FE interconnection is mainly inspired by @oderwat's work there:

https://github.com/oderwat/go-nats-app

The BE is a JSON API server that crunches and serves data from the embedded database. Both BE and FE routes are mounted to the very main HTTP server, so I can request data easily on the same host and port without dealing with the CORS f***ery.

Register example

The FE prevalidates the data passed in the registration form, packs them into the defined payload struct, and passes them to BE:

https://github.com/krustowski/littr/blob/master/pkg/frontend/register/event_handlers.go#L96

The response is then checked against the HTTP/201 response code and FE returns the result back to the user via a toast/snackbar:

https://github.com/krustowski/littr/blob/master/pkg/frontend/register/event_handlers.go#L114

This example does not parse any data sent back in payload from the BE.

List of users data parsing example

Another example I could point here is the actual data extraction from the very response from BE. In this scenario, the FE asks the BE for the list of users using the simple GET /users request:

https://github.com/krustowski/littr/blob/master/pkg/frontend/users/content.go#L51

The payload from the BE is then cast into a pointer to the data model struct defined before the actual API call (I somehow found this approach much efficient when extracting the data from a JSON response):

https://github.com/krustowski/littr/blob/master/pkg/frontend/users/content.go#L85

Finally, I can easily access the struct fields to assign them to the component via the ctx.Dispatch() function, which should safely update the main UI routine and invoke the component's Render() function to update the resulting UI view:

https://github.com/krustowski/littr/blob/master/pkg/frontend/users/content.go#L98

~

Hope someone will find this helpful.

[oderwat]

I fully agree that there could be more examples and especially some for different concepts for using Go-App. For example: Using events like @krustowski (and even @maxence-charriere) does is not my favorite style. This is utilising the JS bridge and breaks the type safety with all the conversions between JS and Go. I have a feeling that seasoned JS developers like to go that route. I like to stay as much the inside the Go domain as possible (using a lot of callback functions in the components) and I also do not "fear" a "global" package :)

We made some todo example years ago: https://github.com/metatexx/go-app-todo could be outdated by now.

I would see CRUD as backend-technology and this is solved a thousand times in thousand ways.

Examples on how to efficiently using APIs would be probably more interesting (for example on how to avoid using http.Client).

Another topic is how to share data between front-end and back-end with the same client or how to share data between the clients. One example would be https://github.com/oderwat/go-nats-app. But we made quite a loot of different implementations including SSE and using "Twirp"..

[ddouglas]

Thank You All so much for your examples. They are going to be so helpful. I need to put togehter an authenticated admin panel for a project I'm working on and I'm considering doing it in Golang WASM just so I don't have to deal with Next, but there were a few things I was struggling to understand due to the previously mentioned documentation issue. The links ya'll included in your post will be oh so beneficial.

@oderwat That is just about how I did my Todo App Demo.

@krustowski The links you provided are going to help so much setting up my BE calls. In my particular case, the WASM App will be servered from AWS via Cloudfront and the BE is going to be an API Gateway, so the only real challenge I'm seeing is the auth and setting up the redirects to Cognito and all that.

I'll report back when I have a few examples to provide.

[rtrzebinski]

You can check my WIP project -> https://github.com/rtrzebinski/simple-memorizer-4