Objectives

Understand how the frontend is organized.
Learn how JavaScript communicates with Go.
Understand the purpose of the generated wailsjs directory.
Follow a complete frontend → backend → frontend execution flow.

Project Layout (Frontend)

frontend/
├── src/
│   ├── main.js
│   ├── style.css
│   ├── app.css
│   └── assets/
│
├── wailsjs/
│   ├── go/
│   └── runtime/
│
├── dist/
└── package.json

Responsibilities

Directory	Purpose
`src/`	Application source code
`assets/`	Images, fonts, icons
`wailsjs/`	Auto-generated Go bridge
`dist/`	Built frontend
`package.json`	Frontend dependencies and build scripts

main.js

Unlike React or Vue templates, the JavaScript template places almost all frontend logic inside one file.

Responsibilities:

Build the UI
Register event handlers
Call Go backend methods
Update the page

Importing Go Functions

import { Greet } from '../wailsjs/go/main/App';

This is not importing your Go source code.

Instead it imports a generated JavaScript wrapper.

Generated Bridge

frontend/wailsjs/go/main/App.js

export function Greet(arg1) {
    return window['go']['main']['App']['Greet'](arg1);
}

Notice:

There is almost no logic.
It simply forwards the request to the Wails runtime.

This file is generated automatically.

Never edit anything inside wailsjs/.

TypeScript Declaration

App.d.ts

export function Greet(arg1: string): Promise<string>;

Although Go returns a plain string:

func (a *App) Greet(name string) string

JavaScript receives

Promise<string>

because communication with the native backend is asynchronous.

Calling Go

Greet(name)
    .then((result) => {
        resultElement.innerText = result;
    });

Execution pauses until Go finishes.

When Go returns, the Promise resolves.

Complete Execution Flow

User
 │
 ▼
Clicks Button
 │
 ▼
onclick="greet()"
 │
 ▼
window.greet()
 │
 ▼
Generated Wails Bridge
 │
 ▼
window.go.main.App.Greet()
 │
 ▼
Go Backend
 │
 ▼
App.Greet()
 │
 ▼
Return string
 │
 ▼
Promise resolved
 │
 ▼
Update HTML

End-to-End Example

Go

func (a *App) Greet(name string) string {
    return fmt.Sprintf("Welcome to AppName, %s!", name)
}

JavaScript

Greet(name)
    .then(result => {
        resultElement.innerText = result;
    });

No HTTP.

No REST API.

No JSON serialization.

No localhost server.

Wails vs Traditional Web Application

Traditional

Browser
    │
 HTTP
    │
Backend Server
    │
 JSON
    │
Browser

Wails

WebView2
    │
Generated Bridge
    │
Go Method
    │
Return Value

Communication remains inside the same application process.

Files Safe to Edit

app.go
main.go
frontend/src/main.js
frontend/src/style.css
frontend/src/app.css

Files NOT to Edit

frontend/wailsjs/
frontend/dist/

These are generated automatically.

Mental Model

main.go
   │
   ▼
App (Go)
   ▲
   │
Generated Bridge (wailsjs)
   ▲
   │
main.js
   ▲
   │
HTML Button
   ▲
   │
User

Key Takeaways

main.js contains the frontend logic.
wailsjs is generated by Wails.
JavaScript never calls Go directly; it calls the generated bridge.
Every exported Go method becomes a JavaScript function.
Go return values become JavaScript Promises.
The frontend waits asynchronously for the backend to finish.
Communication occurs entirely within the application—no HTTP server is involved.

Reflection Questions

Why does JavaScript receive a Promise even though Go returns a string?
Why should wailsjs never be edited?
Which file actually contains the frontend UI?
What happens between pressing Greet and seeing the updated text?
Which layer is responsible for communicating with Go?

Current Progress

✅ Environment ready

✅ Wails architecture understood

✅ Backend architecture understood

✅ Frontend architecture understood

✅ Go ↔ JavaScript bridge understood

At this point, the Wails template is no longer a “black box.” We understand the complete request/response path from the UI to Go and back.

Next Session

Session 3 – Building the First Real Feature

Replace the demo page with the first version of AppName:

Remove the Wails logo
Create a simple home screen
Add Open Lab and Open Notes buttons
Replace the demo Greet() function with the first real backend functionality
Prepare the project for Sprint 1

Tri's external memory

Explorer

Wails - Session 2 Frontend Architecture & Go Bridge