Client

Client allows to integrate components written with React, Preact, Solid, Vue or Svelte directly within a GOX application.

Client does not replace the GOX page system. Both models work in a complementary way: the pages and Templates generate the initial content on the server, while the Client components add interactivity in the browser only where it is necessary.

GOX automatically manages the compilation of components, their dependencies and their integration with the rest of the framework.

He knows how to invoke Actions from JavaScript and how to return Client Components directly from the server.

Use WebSocket to send and update Client Components in real time.

If you want to understand how GOX integrates the client frameworks in a natural way, see the documentation of Import Map.

Workflow

The development with Client begins by adding a framework to the project, creating the component within the client/<framework>/ and declaring it from a GOX module.

Add a framework

Use the CLI to add React to the project:

gox client add react

This command installs and sets up the dependencies necessary for GOX to compile components written with React.

Project organization

The Client components are stored within the directory client/.

Each framework uses its own directory, which allows the components to be organized independently when a project uses more than one framework.

client/
├── react/
├── preact/
├── solid/
├── vue/
└── svelte/

The internal organization of each directory is completely free and can be adapted to the project needs.

For example, a component written with React could be stored in:

client/react/menu.jsx

Declare a component

Once the framework is added and the component file is created, it is declared by the instruction. client.

The statement relates a Client component to your source file.

client Menu react {
    src: "menu.jsx"
}

The route of src is relative to the framework directory. In this case, GOX resolves the file as client/react/menu.jsx.

Full example

The following example states a component written with React and uses it from a GOX page.

module main

import "github.com/gox-lang/gox"

client Menu react {
    src: "menu.jsx"
}

func GET(ctx *gox.Context) gox.Page {
    return <html>
        <head>
            <title>React en GOX</title>
        </head>
        <body>
            <@Menu hydrate="idle" />
        </body>
    </html>
}

From this statement, GOX resolves the file within client/react/, compile the component and prepare the necessary modules to load it into the browser.

Integration with Go

Client is integrated with Go by a statement designed to maintain the same simple and explicit style of language.

No additional configuration files or external mechanisms are required to record components. Everything is declared directly from the application code.

The pages and the Templates continue to control the content generated on the server. The values produced by Go can be sent to the component as properties, and the client framework is only responsible for the interactivity that runs in the browser.

GOX resolves the statements, compiles the source files and automatically records their modules. To find out how these modules are incorporated into the page, please refer to the documentation on Import Map.

Best practices

• Keep each component within the directory corresponding to your framework.
• Use routes src concerning client/<framework>/.
• It adds interactivity only in those parts of the page that need it.
• It preserves business logic in Go and uses the Client component for browser experience.
• Choose the hydration mode according to the time the component must become interactive.

See also

• CLI
• Actions
• WebSocket
• Import Map

See Adapt to choose the axes and anchorage of the dimensional adaptation, or to deactivate it without affecting the CSS effects.