Could you describe how to get started with this tool?

[030]

I like the idea. Could you describe in the readme how to get started? Perhaps you could add an example project?

[advdv]

@030 Wow, that was quick. I've only just started to put some of the effort online, but welcome! How did you find this project if I may ask?

Unfortunately, the wirebase/wire cli is currently not very useful without the Go library that goes with it. The library is still in the works and I only expect it to be online in a couple of months but maybe you're interested giving your opinion general idea? The concept is this:

• In Wirebase the frontend is programmed using components, each component is a functional piece of the frontend: a list, a button, a chatbox etc
• components can be nested and there is one root component. This is conceptually similar to how React popularized it.
• Each component is a Go struct with 3 optional methods: Render(m wb.Msg), 'Subscribe()andUpdate()`. Each returns , declaratively, how the component should function and visualise.
• Render() returns a wb.View type that describes how the component should look, effectively HTML but we use generated go functions to make it expressive, type-safe and formatted by gofmt. The method receiver of Render() is not passed as a pointer as the state should not be muted in the render method.
• Update(m wb.Msg) is passed "Messages" (more on that later) and should update the fields (state) of the component. These fields can be used in the Render() method to display the component in a different way. As such the update method is the only method of the three that has its receiver passed as a pointer as its sole job is to update the state.
• The update method is also responsible for delegating messages to sub components if it deems it necessary.
• Almost all the messages that are passed to the component are defined by the developer of the components so the Update method will often consist of type assertions to trigger certain changes to the state.
• But one event is special and is defined by the Wirebase library: the Navigate message. This message will always be sent to the application first and should be delegated throughout the whole component tree.
• This message comes with the url path /foo/bar.txt, which component can assert to determine what html they would like to render. A Router library is shipped with the Wirebase library to make this easy.
• Optionally, the Update method can return Commands which are action that the runtime will perform for the application asynchronously (e.g an ajax request).
• Finally the Subscribe() method allows for defining event listeners that will trigger the sending of custom messages to the application.
• If this sounds familiar, it is heavily based on the Elm architecture

So how does this enable dynamic, static and single-page apps?

• When using Wirebase on the server as a http.Handler the component tree will be sent the Navigate message (see above) based on the http.Request url path, and the server will ask all components to render their view. This is then send as the http.Response body.
• When using Wirebase to generate static html pages the component tree will be send the a navigate message with a path that is passed as a CLI argument. Again, the tree is serialized to html and can now be stored on disk for
• But finally, Wirebase also compiles to WASM and comes with a loader of using the same component tree to create highly interactive frontend apps. Because each component can use the Subscribe() method to subcribe to events from the DOM, which are then passed to the Update() method.
• Because the component tree can be rendered on the server and on the client from the same codebase it allows for sending the html to the client to give immediate feedback and make it indexable for search engines. Then browser then runs the wasm file to make it interactive without any flickering.

Code example Your input is very valuable, so i'm curious to your impressions! I'm also located in the Netherlands so feel free to pm me.

package main

import (
    "github.com/wirebase/wb"
    "github.com/wirebase/wb/ajax"

    // this package allows for expressive declaration of HTML
    . "github.com/wirebase/wb/html"
)

// This example defines two message types, one to increment
// and one to decrement the counter.
type (
    increment struct{}
    decrement struct{}
    saved     struct{}
)

// Counter component has a very simple state, just a number
// to keep track of.
type Counter struct{ i int }

// NewCounter should initialize the component, in this case
// we start counting at 1
func NewCounter() *Counter {
    return &Counter{i: 1}
}

// Update is called whenever an event is available for the
// application to handle. This event might come from a Cmd
// that was scheduled or an user interaction. Optionally, a
// command can be returned that will be executed after
// Rendering (e.g a Ajax request).
func (c *Counter) Update(m wb.Msg) wg.Cmd {
    switch msg := m.(type) {
    case increment:
        c.i++
    case decrement:
        c.i--
    case saved:
        c.i = 0 //reset if saved
    }

    // lets imagine that we want to send an ajax request
    // if someone manages to increment it to 10. The ajax
    // request is send asyncronously by the runtime and
    /// sends 'saved' message back to the application when
    // its done.
    if c.i >= 10 {
        return ajax.NewRequest("post", "http://localhost/save_count", saved{})
    }

    return nil
}

// Render returns a declarative representation of the DOM
// that visually represents this component. The runtime
// will take care of removing and adding the necessary
// elements to present it to the user correctly. We use 
// dot imports here to make defining the html more 
// expressive.
func (c Counter) Render() wb.View {
    return Div(C{"id": "my-counter"}
        Button(c{"id": "inc"}),
        Span(c.i), //show the currently counting method
        Button(c{"id": "dec"}),
    )
}

// Subscribe may define a set of subscriptions that will
// cause the sending of messages to the application. Subscribe
// is called after render and after execution of any
// commands. It may subcribe differently based on the 
// component state.
func (c Counter) Subscribe() wb.Sub {
    return wb.MultiSub(

        // we use jqery like syntax to target elements in 
        // our view and declare listeners. Upon clicking
        // the respective button the `inc` or `dec` message 
        // will be send to the update method. 
        wb.Listen("#inc", "onclick", inc{})
        wb.Listen("#dec", "onclick", dec{})
    )
}

[030]

@advanderveer Regarding:

How did you find this project if I may ask?

I am following you on Github.

[advdv]

Cool! What do you think of the concept?