Coder Legion - Recent posts tagged full-stack

Alusus WebPlatform: Best UI Practices and Browser Sync Process

Sun, 12 Apr 2026 20:00:43 +0000

This article covers the approach used to write user interface programs using Alusus language and the WebPlatform library, in terms of how the code is written and how UI elements are handled during user interaction. It also explains how WebPlatform works behind the scenes to update the interface.

Accessing UI Widgets

Those familiar with the Alusus language, the WebPlatform library, and our previous articles and videos on the subject already know that the approach to building UI interfaces relies on the .{} operator to construct the element tree that forms the UI. For example, if we want to create a box containing a text label, an input field, and a button, the code would look like this:

Window.instance.setView(
    Box().{
        addChildren({
            Text(String("Enter data")),
            TextInput(),
            Button(String("Send")).{
                onClick.connect(closure (widget: ref[Widget], payload: ref[Int]) {
                });
            }
        });
    }
);

runEventLoop();

But how do we then programmatically interact with the input field (TextInput) to retrieve the value the user entered? It's straightforward: we keep a reference to it so we can interact with it later, as follows:

def input: SrdRef[TextInput];

Window.instance.setView(
    Box().{
        addChildren({
            Text(String("Enter data")),
            TextInput().{
                input = this;
            },
            Button(String("Send")).{
                onClick.connect(closure (widget: ref[Widget], payload: ref[Int]) {
                    useUserData(input.text);
                });
            }
        });
    }
);

runEventLoop();

In this example, we keep a reference pointing to the element. Its value is set when the element is created, and then inside the button's onClick handler, we use that variable to access the value entered by the user.

This approach works, but it has a problem: the variable input is only valid as long as execution hasn't left the current function. In the case of the main function this isn't an issue, since it's an infinite function — execution blocks at the runEventLoop() call indefinitely, so we never exit the function and the input variable remains valid for the entire lifetime of the program. However, if this was a different function — one that builds the tree and returns it to another function to display — we couldn't use local variables, because they are temporary and removed from memory when the function exits, even though the UI itself is still valid and displayed in the browser. In such cases, we have two options: use global variables (which we rarely recommend), or use the proper approach: relying on components.

Using Components

Components allow you to bundle a user interface together with its associated data and operations into a single reusable unit, much like components in frameworks such as React, Angular, and others. To create a component, you define a new class derived from the Component class, then build the user interface inside that class's constructor. In this case, you can define variables that reference UI elements as class members rather than as temporary local variables, which ensures they remain in memory as long as the component is in memory. The following example shows how to convert the code above into a component and how to use it later in the main function:

class MyComponent {
    @injection def component: Component;
    def input: SrdRef[TextInput];

    handler this~init() {
        def self: ref[this_type](this);
        this.view = Box().{
            addChildren({
                Text(String("Enter data")),
                TextInput().{
                    self.input = this;
                },
                Button(String("Send")).{
                    onClick.connect(closure (widget: ref[Widget], payload: ref[Int]) {
                        self.useUserData(self.input.text);
                    });
                }
            });
        };
    }

    handler this_type(): SrdRef[MyComponent] {
        return SrdRef[MyComponent].construct();
    }
}

@uiEndpoint["/"]
@title["Example"]
func main {
    Window.instance.setView(MyComponent());
    runEventLoop();
}

Notice that the class begins by declaring a variable of type Component annotated with @injection, and this is how inheritance is done in Alusus language. The @injection modifier tells the compiler to inject the members of the contained object into the scope of the containing object. This is essentially what inheritance is at its core — containment plus exposure of the inner class's members in the outer class, and the extends keyword that some languages provide is just a syntactic sugar for this.

Also notice that the initializer (constructor) declares a variable named self of the exact same type as this. We copy the value of this here so we can use it later inside the UI tree. The reason for this copy is to distinguish between the this referring to the component and the this referring to a UI element. This need arises because the .{} operator automatically defines a variable named this pointing to the element that precedes the operator. In other words, the keyword this inside the curly braces of TextInput().{ this } refers to the TextInput being created there, shadowing the outer this that refers to the component. So inside those curly braces, self refers to the component while this refers to the TextInput.

At the end of the class, we define a this_type() handler. This handler redefines what happens when the compiler sees parentheses used with the class name — as in Window.instance.setView(MyComponent()) inside the main function. By default, using parentheses with a class name creates a temporary (stack-allocated) instance of that class. For example, Int() creates a temporary Int value. But what we want for UI components is heap allocation using a SrdRef (shared reference), which keeps the object alive even after the function exits, as long as something holds a copy of that reference.

If the component accepts arguments in its initializer, the this_type() handler would look like this:

    handler this_type(arg: String): SrdRef[MyComponent] {
        return SrdRef[MyComponent]().{ alloc()~init(arg) };
    }

We could then instantiate the component like this: MyComponent(String("...")). In this definition, we declare a variable of type SrdRef[MyComponent] without allocating the object itself, then call alloc() to allocate memory, and ~init() to initialize it with the required arguments. When no arguments need to be passed, we can simply call the construct() function on SrdRef, which is a shortcut for calling alloc() followed by ~init().

Properties, Methods, and Callbacks

You can enable access to different widgets of your components from outside the component using regular Alusus class properties. For example, to make the the text of the input field accessible from outside the component you can add a text property to your component, like this:

    handler this.text: String {
        return this.input.text;
    }
    
    handler this.text = String {
        this.input.text = value;
        return value;
    }

Likewise, you can define methods and callbacks like any regular class. For example:

class MyComponent {
    @injection def component: Component;
    def input: SrdRef[TextInput];
    def onButtonClicked: closure();

    handler this.text: String {
        return this.input.text;
    }
    
    handler this.text = String {
        this.input.text = value;
        return value;
    }

    handler this~init() {
        def self: ref[this_type](this);
        this.view = Box().{
            addChildren({
                Text(String("Enter data")),
                TextInput().{
                    self.input = this;
                },
                Button(String("Send")).{
                    onClick.connect(closure (widget: ref[Widget], payload: ref[Int]) {
                        self.useUserData(self.input.text);
                        if not self.onButtonClicked.isNull() {
                            self.onButtonClicked();
                        }
                    });
                }
            });
        };
    }

    handler this_type(): SrdRef[MyComponent] {
        return SrdRef[MyComponent].construct();
    }
}

With the upper version of the component, you can now interact with these elements from outside the component, like this:

MyComponent().{
    text = String("some default value");
    onButtonClick = closure() {
        // Do something when the button is clicked
        doSomething(this.text);
    };
}

Cleanup and Resource Release

Unlike languages that rely on garbage collection — such as JavaScript, TypeScript, and others — Alusus uses reference counting for memory management. What distinguishes this approach is that the timing of object construction and destruction is well-defined, deterministic, and under full control, making it reliable for releasing resources created within a component. All we need to do is define a ~terminate handler (destructor) in the MyComponent class and perform any necessary cleanup inside it.

    handler this~terminate() {
        // Free resources allocated by this component
    }

In Alusus, we are guaranteed that ~terminate will be called immediately when the component is no longer needed — it won't linger in memory waiting for a garbage collector. This makes it reliable for resource cleanup. For example, if the useUserData function in our component sends a request to the server, we can cancel that request in the terminate handler, guaranteeing that the request is cancelled immediately when the component is removed from the UI (assuming no other references to the component are held elsewhere).

Behind the Scenes: How UI Updates Work

A question that may come to mind at this point is: when exactly are UI elements created in the browser, when are they removed, and how are they updated? Unlike React and many other libraries, the mechanism for creating and updating the UI in Alusus and WebPlatform is very simple and direct. There is no lifecycle (like that in React or Angular); instead, UI elements are created immediately when they are added to the window, or when they are connected to a tree that is currently attached to the window — and this happens within the same call that performs that attachment.

For example, when calling:

Window.instance.setView(MyComponent());

the UI elements (the text, input field, and button) will be created in the browser immediately, before setView returns. And if setView is called again with a different value, those elements will be removed and replaced with the new ones immediately, before setView returns. The same applies to calling addChildren on a Box widget or similar functions in other widget types.

When setView is called with a new value, the current view is removed and any terminate handlers within that view are called immediately, before setView returns. The same applies to Box.removeChildren, which will destroy the child and release all its resources before returning.

The same principle applies to UI updates: executing an operation like text.text = String("...") updates the interface immediately, before that operation completes.

As for data entered by the user, it is read directly from the browser when the corresponding property is accessed. For example, reading the input.text property reads directly from the input field in the browser — there is no need to synchronize data between the browser and Alusus objects.

This simplicity of design makes applications written with Alusus and WebPlatform more stable, better performing, and predictable. There is no complex process running behind the scenes — as there is in other libraries — that causes confusion and surprises for the developer.

Deeper Look Into Alusus WASM Based Chat Example

Fri, 13 Feb 2026 23:59:46 +0000

In our previous article Building a WASM Chat App Using Alusus we built a simple chat application using Alusus programming language and WebPlatform framework. In this article I'm going to step back and explain the code in more details.

The entire app was written in a single source file. This single source file contains everything in the project including requesting dependencies, defining and accessing the data model, back-end, front-end, as well as build and publish script. You might think that it's not a good idea to put everything in a single file anyway, and you would be right, but the ability to put everything in a single file is a very useful feature of Alusus language, because it means the language does not dictate how your project should be structured. This has two main benefits:

You can organize your project based on functionality, rather than based on where the code gets executed.
You can package related back-end and front-end code together. For example, the Identity library includes front-end components as well as related back-end endpoints, making it much simpler to maintain and use the library.

Requesting Dependencies

The project starts with few import statement, which is pretty standard, but one of the packages it imports is Alusus Package Manager (Apm), which it then use to import external libraries.

Apm takes care of fetching then importing dependencies from an external source. At this point the only external source it supports is GitHub. When a package is imported it looks locally for that package, and if it doesn't find it it automatically fetches it from GitHub, then it imports the package into the project. So, the user can manage his project's dependencies from within the source code, without needing to define those dependencies in external yaml, json, or xml files like most other package managers.

The Data Model

You can see in the code that all it takes to define the data model is to define classes and mark them with some modifiers. The ORM depends on those modifiers for generating the DB schema, while changes in the data model can applied using migrations, which are user defined functions marked with a modifier as well. Take a look at the message model for example:

@model["messages", 2]
class MessageModel {
    Rows.define_model_essentials[];

    @foreignKey["rooms", "name"]
    @VarChar["256"]
    @notNull
    @column["room_name"]
    def roomName: String;

    @foreignKey["users", "username"]
    @VarChar["256"]
    @notNull
    @column
    def username: String;

    @VarChar["1024"]
    @notNull
    @column
    def message: String;

    @BigInteger
    @notNull
    @column["creation_date"]
    def creationDate: Int[64];
    
    @migration[1, 2, { RoomModel: 1; UserModel: 1 }]
    function migrateToV2(db: ref[Rows.Db]): SrdRef[Error] {
        db.exec("alter table messages add column room_name varchar(256) not null references rooms(name)");
        db.exec("alter table messages add column username varchar(256) not null references users(username)");
        return SrdRef[Error]();
    }
}

Most of these attributes modifiers are self-explanatory. The are some details related to migrations, but migrations is a subject that's worth its own article, so will leave it for another time.

Using the model to fetch data from the DB is done through a syntax like this:

    def messages: Array[SrdRef[MessageModel]] = db
        .from[MessageModel]
        .where[roomName == body("roomName")~cast[String].trim()]
        .order[-creationDate]
        .select()
        .slice(0, MAX_MESSAGES);

In the upper statement it's using this model to fetch messages belonging to a specific room. There are few things to note here:

The use of square brackets. In Alusus square brackets aren't used for arrays like many other languages, instead, square brackets indicate parameters that are processed during compile time, compared to parenthesis which are used for passing parameters at run time. In this statement we are passing few things at compile time. This is because converting this call to an SQL statement happens at compile time, not run time, which is good for both performance as well as security.
Within the parameters of .where we are passing an expression. At compile time, this expression gets converted into an SQL where clause. This is a pretty clean and easily readable way for writing DB queries.
A similar thing applies to the .order call; what we are passing to order is an expression that tells the ORM how to order the result. In this case we are order by creationDate descending. Notice that we aren't passing a value here; we are passing the name of the model class' member variable.

Back-end and Front-end

You can see two different modifier types used for annotating endpoints: @beEndpoint (back-end endpoint) and @feEndpoint (front-end endpoint). Both of these are applied to functions to make them the entry point of that endpoint. Back-end endpoints are simply functions that receive a connection object that they can use to read request data and send back responses. These functions are part of the main app, so they, unlike front-end endpoints, get compiled to the same instruction set as the main app.

Front-end endpoints on the other hand are more complicated in terms of compilation. When you annotate a function with @feEndpoint that tells WebPlatform to:

Compile the function into WebAssembly.
Generate a corresponding HTML file (and potentially other related files).

This complexity, however, is handled completely by WebPlatform and the user doesn't need to worry about any of that. The user just uses some APIs to build a UI in a way similar to desktop applications. The user doesn't need to worry about writing HTML, CSS, Javascript, or build scripts; things just work. I don't know if web development can be made simpler and more intuitive than this.

Within the front-end function you'll see a call to Window.instance.setView which sets the browser's view. What gets passed to setView is a UI tree composed of widgets and components. This is similar to many other UI frameworks, but, unlike other frameworks, the syntax used to build the tree is standard Alusus syntax. No html, xml, or jsx syntax; just standard Alusus syntax that can be used to build UI trees and can also be used for other things.

The example also includes two components: TextEntry and Header. Those are simply classes that inherit from the Component class and set the view property of it. They set the view property inside the constructor, which in Alusus is defined using the handler this~init definition. The following syntax is what is used to define the inheritance:

@injection def component: Component;

There is a reason for this unusual syntax but that is worth its own article, so we'll not get into that for now. Finally, you'll often see components include such a definition:

    handler this_type(): SrdRef[Header] {
        return SrdRef[Header].construct();
    }

This handler overrides the parenthesis operator on the class itself, not the class instances. This is used to override the default behavior, which instantiates a temporary object, and replace it with a function that allocates an object on the heap and return a shared reference to it. This makes it easier to later on instantiate objects of this type when creating a UI tree.

The front-end function usually ends with a call to runEventLoop(). This is a blocking function that runs the event loop, similar to native app development.

Build & Publish Script

In the Deployment section of the article we replaced the entry point of the app with this:

Nashir.setup[Nashir.Config().{
    projectName = "chat";
    projectVersion = "v1";
    serverPort = 8000;
    initializer~no_deref = initializeServer~ast;
    dependencies.add(Rows.PostgresqlDriver.getBuildDependencies())؛
    publishDriver = Nashir.AlususNetPublishDriver();
}];
ProgArg.parse(2);

What these 8 lines of code give us is the following:

An entry point for running the server locally.
A build script that generates an executable.
A publish script that publishes the project to Alusus Net.
A set of command line arguments that the user can use to decide whether to run, build, or publish.

All of that was done with these few lines of code. Behind the scenes, these lines of code searches the code base for front end endpoints as well as static resource routes in order to determine what gets packaged with the app during the build. Basically, what takes a script to accomplish with other languages is done here with these few lines of code.

At the end of the call to Nashir.setup we just call ProgArg.parse to tell it to parse the command line arguments and perform the requested user action. The 2 argument just tells ProgArg the index at which command line arguments start. In this case it's 2 because the first arg will contain alusus and the second is the name of the main file passed to the compiler. If you use ProgArg from within pre-compiled code you'll need to pass 1 instead of 2 since you'll just call the executable itself rather than calling alusus and passing the main source to it.

Low Level Language

What we've seen so far may give you the impression that we are dealing with a pretty high-level language, but don't let this neatness deceive you. Alusus is a low level language; think C language kind of low-level. In fact, it's actually compatible with C so you can directly import C libraries and use them; all you need to do is to declare those functions then you can call them, just like in C you only need to declare the function or import a header that does it for you. What makes Alusus look like a high level language is the flexibility of the language that allow libraries to define new syntax or make calls to the compiler itself.

Going back to the example at hand, the compiler of Alusus doesn't know anything about packages, GitHub, back-end and front end points, static resource routes, deciding when to build to WebAssembly, data models, compiling DB queries to SQL, etc. All of those were features added by libraries. In fact, you may be surprised to know that Alusus' compiler doesn't even know what closures are; closures are added by the "closures" library which is built entirely in Alusus. This flexibility makes Alusus really unique and opens the door for many great features to be added in the future. Basically, you are getting even more flexibility than what dynamic high level languages provide, and you are combining that with the high performance of low level languages; the best of both worlds.

Stay tuned for future articles in which I'll be covering more areas of Alusus and its libraries.

Building a WASM Chat App using Alusus - Step 5: Deployment

Sun, 08 Feb 2026 19:17:10 +0000

In the previous article we finished building a basic web app with support for rooms, users, and password based authentication. It's now time to deploy our app to some server. The recommended method of deployment is to generate an executable for this app, then deploy the executable, rather than deploy the source code and have Alusus itself installed on the production machine. The easiest way to do this is to use Nashir to build the app and deploy it to Alusus Net, a low cost hosting service geared towards hosting Alusus based applications. To do this, first we need to import Nashir into our app:

Apm.importFile("Alusus/Nashir", { "Nashir.alusus", "PublishDrivers/AlususNet.alusus" });

Nashir is a general building and publishing tool that can support multiple publishing targets, so we need to tell it which hosting service we are publishing on, and that's why we are importing the AlususNet publish driver. With this imported, we can now use it in the program's entry point. All we need to do is replace the few lines in the entry point with the following:

func initializeServer {
    initializeDatabase();
}

Nashir.setup[Nashir.Config().{
    projectName = "chat";
    projectVersion = "v1";
    serverPort = 8000;
    initializer~no_deref = initializeServer~ast;
    dependencies.add(Rows.PostgresqlDriver.getBuildDependencies())؛
    publishDriver = Nashir.AlususNetPublishDriver();
}];
ProgArg.parse(2);

We do not need to create an entry point nor to manually start the server; Nashir will do all that for us, and it will give us the option of running the app directly, or generating an executable for it. The initializeDatabase call is now moved to a function, and that function is passed to Nashir through its config. We need to do this because we no longer want to initialize the DB directly; instead, we want the DB to be initialized by the new program entry point that will be generated automatically for us by Nashir. This will be clearer once you understand that the code at the root scope only gets executed during the JIT phase; generated executables on the other hand start from a specific function, then includes all its dependencies. This is one of the unique features of Alusus, and it allows projects to generate multiple binary builds from a single unified project, allowing Nashir in this case to generate separate builds for the front end and the back end.

The rest of the arguments in the call to Nashir.setup is pretty self explanatory, you give it the basic info of the project, the list of binary dependencies, and an instance of the publish driver to use for the actual publishing after the build is complete.

Nashir depends on a library called ProgArg, which is a library for managing program arguments. The final step is to call ProgArg.parse giving it the index from which to start parsing arguments. We start from 2 because arg 0 is alusus binary and arg 1 is the name of the source file. The call to ProgArg.parse will trigger the right action based on the user's command line arguments.

At this poine, when you run alusus chat.alusus you will be presented with the list of commands available to you. Running alusus chat.alusus start will start the application on your machine. The build command will generate an executable, and the publish command will generate the executable then publish it on Alusus Net. The remaining publishing steps will happen interactively in the terminal, where you will be asked to enter credentials for the account that you can create on https://alusus.net, select payment options and accept terms of service, then the publishing will start and your app will be available online within minutes under a subdomain of alusus.net, with HTTPS automatically enabled. In order to let the app connect to the DB within the container you'll need to connect using the system user rather than a Postgres user, which means setting your DB connection params as follows:

DB name: "root"
DB user: "root"
DB password: ""
DB host: ""
DB port: 0

You can either update the code so that it defaults to these values, or keep it as is and set these values as env vars from the Alusus Net dashboard, which is the recommended approach. Notice that Alusus Net won't let you add an env var with a value of "", so instead use a space string, i.e. " " and this will be trimmed in the getDbDriver function. Once you set these env vars in the dashboard make sure to restart the container to let the app pick those new values. The container will take 15 seconds or so to start up after which the app will be ready for use and you can now create rooms and chat with your friends across the world.

You can visit this page to view the final source code of our app: https://encommunity.alusus.org/t/building-a-chat-web-app-step-5-deployment/21

Stay tuned for upcoming articles where I will be explaining in more details what happens behind the scenes in this app, and what makes Alusus programming language a truely unique and promising programming language.

Building a WASM Chat App using Alusus - Step 4: Adding Users and Rooms

Thu, 05 Feb 2026 08:11:44 +0000

In the previous article we built a fully functioning chat application, but with no user authentication and with only one global room. It's now time to authenticate users and allow creating separate rooms. This will require updating the data model. We will add two more models, RoomModel and UserModel. Each of these models has a name (room name or username) and a password field. To avoid complexity we won't do any form of extra security measures needed in production apps and will stick with just password based authentication and will also just store the password in plain text, which is not a valid security method for production apps but is enough for this tutorial. Our MessageModel will also have two foriegn keys, username and roomName. The data model will now look like this:

@model["rooms", 1]
class RoomModel {
    Rows.define_model_essentials[];

    @VarChar["256"]
    @primaryKey
    @column
    def name: String;

    @VarChar["1024"]
    @notNull
    @column
    def password: String;
}

@model["users", 1]
class UserModel {
    Rows.define_model_essentials[];

    @VarChar["256"]
    @primaryKey
    @column
    def username: String;

    @VarChar["1024"]
    @notNull
    @column
    def password: String;
}

@model["messages", 2]
class MessageModel {
    Rows.define_model_essentials[];

    @foreignKey["rooms", "name"]
    @VarChar["256"]
    @notNull
    @column["room_name"]
    def roomName: String;

    @foreignKey["users", "username"]
    @VarChar["256"]
    @notNull
    @column
    def username: String;

    @VarChar["1024"]
    @notNull
    @column
    def message: String;

    @BigInteger
    @notNull
    @column["creation_date"]
    def creationDate: Int[64];
    
    @migration[1, 2, { RoomModel: 1; UserModel: 1 }]
    function migrateToV2(db: ref[Rows.Db]): SrdRef[Error] {
        db.exec("alter table messages add column room_name varchar(256) ...");
        db.exec("alter table messages add column username varchar(256) ...");
        return SrdRef[Error]();
    }
}

def schema: {
    RoomModel,
    UserModel,
    MessageModel
};

Notice that MessageModel now has a version of 2 and includes the migrateToV2 function. This is only needed if you want to upgrade the previous version to the new version. In this case it's just a tutorial so you can remove this function and just start with a fresh DB.

Our endpoints now will need to deal with multiple values in each request (username, room name, etc) so we'll need to use JSON request bodies rather than plain text as we did so far. Let's import the JSON library at the beginning of our app:

Apm.importFile("Alusus/Json");

We also need to have an endpoint to validate the credentials. To keep the app simple we will just have a single login endponit where you enter your username, password, room name, and room password. If the user does not exist, it will be created with the given password. If it does exist, then we'll just the password against the existing user and reject if the password doesn't match. We will do the same for room name. Our POST /validate-creds endpoint looks like this:

@beEndpoint["POST", "/validate-creds"]
func validateCreds (conn: ptr[Http.Connection]) {
    def postData: array[Char, 1024];
    def postDataSize: Int = Http.read(conn, postData~ptr, postData~size);
    def body: Json = String(postData~ptr, postDataSize);
    def roomName: String = body("roomName")~cast[String].trim();
    def roomPassword: String = body("roomPassword");
    def userName: String = body("userName")~cast[String].trim();
    def userPassword: String = body("userPassword");
    // Verify or create user.
    def users: Array[SrdRef[UserModel]] = db.from[UserModel].where[username == userName].select();
    if users.getLength() == 0 {
        db.save[UserModel](UserModel().{
            username = userName;
            password = userPassword;
        });
    } else if users(0).password != userPassword {
        Http.print(conn, "HTTP/1.1 401 Unauthorized\r\n\r\n");
        return;
    }
    // Verify or create room.
    def rooms: Array[SrdRef[RoomModel]] = db.from[RoomModel].where[name == roomName].select();
    if rooms.getLength() == 0 {
        db.save[RoomModel](RoomModel().{
            name = roomName;
            password = roomPassword;
        });
    } else if rooms(0).password != roomPassword {
        Http.print(conn, "HTTP/1.1 401 Unauthorized\r\n\r\n");
        return;
    }
    // Successful
    Http.print(conn, "HTTP/1.1 200 Ok\r\n\r\n");
}

The /validate-creds endpoint will be used by a login page that will validate the entered creds before taking the user to the chat page. The endoints that receive and return messages will also need to be updated to include the credentials in the body since we aren't creating any auth tokens. These will be updated in a similar way to the /validate-creds endpoint, so we won't list the code here to keep the article a bit shorter. The full final code for the entire app will be listed below.

In the front end we will define the following global variables:

def userName: String;
def userPassword: String;
def roomName: String;
def roomPassword: String;

This is so that we keep the creds entered by user in the login screen to be used later on during the chat. We will have a new function called login that will be responsible for creating the login form and waiting until the user has entered the creds and the creds have been validated by the backend. The function looks like this:

func login {
    def success: SrdRef[Promise[Int]] = Promise[Int].new();
    def notification: SrdRef[Text];
    def roomName: SrdRef[Input];
    def roomPassword: SrdRef[Input];
    def userName: SrdRef[Input];
    def userPassword: SrdRef[Input];

    Window.instance.setView(Box().{
        style.{
            height = Length.percent(100);
            height = Length.percent(100);
            display = Display.FLEX;
            layout = Layout.COLUMN;
            justify = Justify.CENTER;
            align = Align.CENTER;
        };
        addChildren({
            Text().{
                notification = this;
                style.{
                    margin = Length4.px(10);
                    fontColor = Color("f00");
                };
            },
            Input().{
                userName = this;
                style.margin = Length4.px(10);
                placeholder = String("Username");
            },
            Input().{
                userPassword = this;
                style.margin = Length4.px(10);
                placeholder = String("Password");
            },
            Input().{
                roomName = this;
                style.margin = Length4.px(10);
                placeholder = String("Room Name");
            },
            Input().{
                roomPassword = this;
                style.margin = Length4.px(10);
                placeholder = String("Room Secret");
            },
            Button(String("Submit")).{
                style.margin = Length4.px(10);
                onClick.connect(closure (widget: ref[Widget], payload: ref[Int]) {
                    notification.setText(String());
                    def json: StringBuilder[JsonStringBuilderMixin](1024, 1025);
                    json.format(
                        "{ \"userName\": %js, \"userPassword\": %js, \"roomName\": %js, \"roomPassword\": %js }",
                        userName.getText().trim(),
                        userPassword.getText(),
                        roomName.getText().trim(),
                        roomPassword.getText()
                    );
                    sendRequest(
                        "POST", "/validate-creds", "Content-Type: application/text", json, 10000,
                        closure (json: Json) {
                            def status: Int = json("eventData")("status");
                            if status == 200 {
                                Root.userName = userName.getText().trim();
                                Root.userPassword = userPassword.getText();
                                Root.roomName = roomName.getText().trim();
                                Root.roomPassword = roomPassword.getText();
                                success.resolve(0);
                            } else {
                                notification.setText(String("Login failed!"));
                            }
                        }
                    );
                });
            }
        });
    });

    await(success);
}

Overall the code is quite similar to the code of the chat screen, but the thing to notice here is the success promise instantiated at the beginning. At the end this promise is awaited by the await function, which transfers control to the message loop and waits there until the promise is resolved before returning.

The code of the UI's entry point is similar to how it was, except that it now calls login upfront, and that the body of the HTTP requests are now in JSON format and includes the credentials. JSON bodies are constructed like this:

def getMessagesJson: String = StringBuilder[JsonStringBuilderMixin](1024, 1025).{
    format(
        "{ \"userName\": %js, \"userPassword\": %js, \"roomName\": %js, \"roomPassword\": %js }",
        userName, userPassword, roomName, roomPassword
    );
};

That's it; we now have a chat app with users and rooms secured by passwords. CoderLegion has a small limit on the size of the article, so I can't list the entire source code here now that the app has grown a bit, but you can view it here: https://encommunity.alusus.org/t/building-a-chat-web-app-step-4-adding-users-and-rooms/20

In the next article we'll explain how to deploy this simple app and have it available to everyone over the internet.

Building a WASM Chat App using Alusus - Step 3: Persisting the Data

Wed, 04 Feb 2026 07:58:52 +0000

In the previous article we added a simple back end that kept the data in memory only. In this article we will be persisting the data to a PostgreSQL database.

We are still keeping all messages in a single pool, so we only need a single data model to store those messages. We will store the messages in a PostgreSQL database. After setting up Postgres you need to import the Rows ORM library, and this can be done by adding this line nexto the where we are importing WebPlatform:

Apm.importFile("Alusus/Rows", { "Rows.alusus", "Drivers/Postgresql.alusus" });

Notice that we are telling Alusus Package Manager to import the Postgresql driver in addition to the Rows library itself. This driver is part of the Rows library but is not imported by default in case the user wants to use a different database (MySQL for example) instead of Postgres.

Now that we have our ORM ready, let's build our persistence layer. Again, we can keep everything in the same file, chat.alusus. Our persistence layer looks like this:

//==============================================================================
// Database

macro envVarOrDefault[varName, defaultVal] CharsPtr().{
    this = System.getEnv(varName);
    if this == 0 this = defaultVal;
}

@model["messages", 1]
class MessageModel {
    Rows.define_model_essentials[];

    @VarChar["1024"]
    @notNull
    @column
    def message: String;

    @BigInteger
    @notNull
    @column["creation_date"]
    def creationDate: Int[64];
}

def db: Rows.Db;
def schema: {
    MessageModel
};

function initializeDatabase {
    db.init(closure(d: ref[SrdRef[Rows.Driver]]) {
        d = getDbDriver();
    });
    db.schemaBuilder[schema].migrate();
}

function getDbDriver(): SrdRef[Rows.Driver] {
    def driver: SrdRef[Rows.Driver] = Rows.PostgresqlDriver(Rows.ConnectionParams().{
        dbName = String(envVarOrDefault["CHAT_DB_NAME", "alusus"]).trim();
        userName = String(envVarOrDefault["CHAT_DB_USERNAME", "alusus"]).trim();
        password = String(envVarOrDefault["CHAT_DB_PASSWORD", "alusus"]).trim();
        host = String(envVarOrDefault["CHAT_DB_HOST", "0.0.0.0"]).trim();
        port = String.parseInt(envVarOrDefault["CHAT_DB_PORT", "5432"]);
    });
    if !driver.isConnected() {
        System.fail(1, String("Error connecting to DB: ") + driver.getLastError());
    }
    return driver;
}

Our model class is called MessageModel and it has two fields: message and creationDate. The getDbDriver function instantiates the Postgres driver with the right connection params. The initializeDatabase initializes the driver and also calls the migrate function of the schema builder to make sure the table is created.

With our data model ready, it's time to use it in the backend endpoints. We will no longer need the global array. Instead, we'll write the data to the database. We also won't need the mutex since the database engine internally handles synchronization. The backend will now look like the following:

//==============================================================================
// Backend

def MAX_MESSAGES: 12;

@beEndpoint["POST", "/messages"]
func postMessages (conn: ptr[Http.Connection]) {
    def postData: array[Char, 1024];
    def postDataSize: Int = Http.read(conn, postData~ptr, postData~size);
    def msg: MessageModel;
    msg.message = String(postData~ptr, postDataSize);
    msg.creationDate = Time.getTimestamp(0);
    db.save[MessageModel](msg);
    Http.print(conn, "HTTP/1.1 200 Ok\r\n\r\n");
}

@beEndpoint["GET", "/messages"]
func getMessages (conn: ptr[Http.Connection]) {
    // Fetch messages from DB.
    def messages: Array[SrdRef[MessageModel]] = db
        .from[MessageModel]
        .order[-creationDate]
        .select()
        .slice(0, MAX_MESSAGES);
    def response: StringBuilder(1024 * 10, 1024 * 5);
    def i: Int;
    for i = messages.getLength() - 1, i >= 0, --i {
        if i != messages.getLength() - 1 response += "\n";
        response += "- ";
        response += messages(i).message;
    }
    // Delete older messages.
    if messages.getLength() > 0 {
        db.from[MessageModel].where[creationDate < messages(messages.getLength() - 1).creationDate].delete();
    }
    // Send response.
    Http.print(conn, "HTTP/1.1 200 Ok\r\n");
    Http.print(conn, "Content-Type: text/plain\r\n");
    Http.print(conn, "Cache-Control: no-cache\r\n");
    Http.print(conn, "Content-Length: %d\r\n\r\n", response.getLength());
    Http.print(conn, response);
}

The main difference from the prev version is in how we save and load the data. We now save the data by instantiating a MessageModel object, set its member vars with the right values, then call db.save[MessageModel](msg). Loading the data is done using the db.from[MessageModel].order[-creationDate].select() statement, which loads it ordered descendingly by the creation date. For this example we continue to limit the messages to 12, but this limit can be changed or removed altogether. Deleting the old records is done by the following:

db.from[MessageModel].where[creationDate < messages(messages.getLength() - 1).creationDate].delete();

Which deletes all the messages that have a creation date older than the 12th message in the loaded data. Now the full source code looks like this:

import "Srl/String";
import "Srl/Time";
import "Apm";
Apm.importFile("Alusus/Rows", { "Rows.alusus", "Drivers/Postgresql.alusus" });
Apm.importFile("Alusus/WebPlatform");
use Srl;
use WebPlatform;

//==============================================================================
// Database

macro envVarOrDefault[varName, defaultVal] CharsPtr().{
    this = System.getEnv(varName);
    if this == 0 this = defaultVal;
}

@model["messages", 1]
class MessageModel {
    Rows.define_model_essentials[];

    @VarChar["1024"]
    @notNull
    @column
    def message: String;

    @BigInteger
    @notNull
    @column["creation_date"]
    def creationDate: Int[64];
}

def db: Rows.Db;
def schema: {
    MessageModel
};

function initializeDatabase {
    db.init(closure(d: ref[SrdRef[Rows.Driver]]) {
        d = getDbDriver();
    });
    db.schemaBuilder[schema].migrate();
}

function getDbDriver(): SrdRef[Rows.Driver] {
    def driver: SrdRef[Rows.Driver] = Rows.PostgresqlDriver(Rows.ConnectionParams().{
        dbName = envVarOrDefault["CHAT_DB_NAME", "alusus"];
        userName = envVarOrDefault["CHAT_DB_USERNAME", "alusus"];
        password = envVarOrDefault["CHAT_DB_PASSWORD", "alusus"];;
        host = envVarOrDefault["CHAT_DB_HOST", "0.0.0.0"];
        port = String.parseInt(envVarOrDefault["CHAT_DB_PORT", "5432"]);
    });
    if !driver.isConnected() {
        System.fail(1, String("Error connecting to DB: ") + driver.getLastError());
    }
    return driver;
}

//==============================================================================
// Backend

def MAX_MESSAGES: 12;

@beEndpoint["POST", "/messages"]
func postMessages (conn: ptr[Http.Connection]) {
    def postData: array[Char, 1024];
    def postDataSize: Int = Http.read(conn, postData~ptr, postData~size);
    def msg: MessageModel;
    msg.message = String(postData~ptr, postDataSize);
    msg.creationDate = Time.getTimestamp(0);
    db.save[MessageModel](msg);
    Http.print(conn, "HTTP/1.1 200 Ok\r\n\r\n");
}

@beEndpoint["GET", "/messages"]
func getMessages (conn: ptr[Http.Connection]) {
    // Fetch messages from DB.
    def messages: Array[SrdRef[MessageModel]] = db
        .from[MessageModel]
        .order[-creationDate]
        .select()
        .slice(0, MAX_MESSAGES);
    def response: StringBuilder(1024 * 10, 1024 * 5);
    def i: Int;
    for i = messages.getLength() - 1, i >= 0, --i {
        if i != messages.getLength() - 1 response += "\n";
        response += "- ";
        response += messages(i).message;
    }
    // Delete older messages.
    if messages.getLength() > 0 {
        db.from[MessageModel].where[creationDate < messages(messages.getLength() - 1).creationDate].delete();
    }
    // Send response.
    Http.print(conn, "HTTP/1.1 200 Ok\r\n");
    Http.print(conn, "Content-Type: text/plain\r\n");
    Http.print(conn, "Cache-Control: no-cache\r\n");
    Http.print(conn, "Content-Length: %d\r\n\r\n", response.getLength());
    Http.print(conn, response);
}

//==============================================================================
// Frontend Components

class Header {
    @injection def component: Component;

    handler this~init() {
        this.view = Box({}).{
            style.{
                padding = Length4.pt(4);
                borderWidth = Length4.pt(0, 0, 1.5, 0);
                borderStyle = BorderStyle.SOLID;
                borderColor = Color("000");
                justify = Justify.START;
                display = Display.FLEX;
                layout = Layout.COLUMN;
                background = Background(Color("fff"));
            };
            addChildren({
                Text(String("Wasm Chat")).{
                    style.fontSize = Length.pt(18.0);
                }
            });
        };
    }

    handler this_type(): SrdRef[Header] {
        return SrdRef[Header].construct();
    }
}

class TextEntry {
    @injection def component: Component;

    def onNewEntry: closure (String);
    def textInput: SrdRef[TextInput];

    handler this~init() {
        def self: ref[this_type](this);

        this.view = Box({}).{
            style.{
                display = Display.FLEX;
                layout = Layout.ROW;
                justify = Justify.SPACE_BETWEEN;
            };
            addChildren({
                TextInput().{
                    self.textInput = this;
                    style.{
                        flex = Flex(1);
                        margin = Length4.px(10);
                        height = Length.px(50);
                        fontSize = Length.pt(12.0);
                        borderStyle = BorderStyle.SOLID;
                        borderColor = Color("000");
                        borderWidth = Length4.px(1.5);
                    };
                    onKeyUp.connect(closure (widget: ref[TextInput], payload: ref[String]) {
                        if payload == "Shift+Enter" {
                            def newData: String = widget.getText().trim();
                            widget.setText(String());
                            if not self.onNewEntry.isNull() self.onNewEntry(newData);
                        }
                    });
                },
                Button(String("Send")).{
                    style.{
                        height = Length.px(50);
                        width = Length.px(50);
                        fontSize = Length.px(16.0);
                        justify = Justify.CENTER;
                        margin = Length4.px(10, 10, 10, 0);
                    };
                    onClick.connect(closure (widget: ref[Widget], payload: ref[Int]) {
                        def newData: String = self.textInput.getText().trim();
                        self.textInput.setText(String());
                        if not self.onNewEntry.isNull() self.onNewEntry(newData);
                    });
                }
            });
        };
    }

    handler this_type(): SrdRef[TextEntry] {
        return SrdRef[TextEntry].construct();
    }
}

//==============================================================================
// Frontend Pages

@uiEndpoint["/"]
@title["Wasm Chat"]
func main {
    def onFetch: closure (json: Json);

    Window.instance.style.{
        padding = Length4.pt(0);
        margin = Length4.pt(0);
    };
    Window.instance.setView(Box({}).{
        style.{
            height = Length.percent(100);
            justify = Justify.SPACE_BETWEEN;
            display = Display.FLEX;
            layout = Layout.COLUMN;
            background = Background(Color("aaa"));
        };
        addChildren({
            Header(),
            Text(String()).{
                style.{
                    flex = Flex(1);
                    width = Length.percent(100) - Length.px(20);
                    margin = Length4.px(10, 10, 0, 10);
                    fontSize = Length.pt(20.0);
                    borderStyle = BorderStyle.SOLID;
                    borderColor = Color("000");
                    borderWidth = Length4.px(1.5);
                    background = Background(Color("fff"));
                };
                onFetch = closure (json: Json) {
                    def status: Int[64] = json("eventData")("status");
                    if status >= 200 and status < 300 {
                        def data: String = json("eventData")("body");
                        if this.getText() != data {
                            this.setText(data);
                        }
                    }
                };
            },
            TextEntry().{
                onNewEntry = closure (newData: String) {
                    sendRequest(
                        "POST", "/messages", "Content-Type: application/text", newData, 10000,
                        closure (Json) {
                            sendRequest("GET", "/messages", null, null, 500, onFetch);
                        }
                    );
                };
            };
        })
    });

    startTimer(500000, closure (json: Json) {
        sendRequest("GET", "/messages", null, null, 500, onFetch);
    });
    sendRequest("GET", "/messages", null, null, 500, onFetch);

    runEventLoop();
}

//==============================================================================
// Entry Point

initializeDatabase();
Console.print("Starting server on port 8000...\nURL: http://localhost:8000/\n");
buildAndRunServer(Array[CharsPtr]({ "listening_ports", "8000", "static_file_max_age", "0" }));

That's it, the app is ready to save messages. You just need to make sure a Postgres server is running and the right connection params set in the code, then you can run the code. In the next article we will be adding support for users and rooms.

Building a WASM Chat App using Alusus - Step 2: Adding a Backend

Tue, 03 Feb 2026 07:14:04 +0000

Continuing the app we built in the previous article, we will now add a back end to enable chatting between multiple front ends.

Let's keep it simple for the first step and have the backend store the chat data in memory. We'll build two endpoints, one for posting a new message, and one for fetching the message history. We will skip the rooms for now and keep all messages in one global publicly available pool of messages, so everyone will see all messages from everyone. The messages for now will simply be stored in a global array of strings.

It's important to keep in mind that Alusus and WebPlatform are multi-threaded, so global variables will need to be thread safe. So, we will use a mutex to guard the access to this global array. Our backed will look like this:

//==============================================================================
// Backend

def MAX_MESSAGES: 12;
def messages: Array[String];
def mutex: Threading.Mutex;
Threading.initMutex(mutex~ptr, 0);

@beEndpoint["POST", "/messages"]
func postMessages (conn: ptr[Http.Connection]) {
    def postData: array[Char, 1024];
    def postDataSize: Int = Http.read(conn, postData~ptr, postData~size);
    Threading.lockMutex(mutex~ptr);
    if messages.getLength() >= MAX_MESSAGES messages.remove(0);
    messages.add(String(postData~ptr, postDataSize));
    Threading.unlockMutex(mutex~ptr);
    Http.print(conn, "HTTP/1.1 200 Ok\r\n\r\n");
}

@beEndpoint["GET", "/messages"]
func getMessages (conn: ptr[Http.Connection]) {
    Threading.lockMutex(mutex~ptr);
    def response: String = String.merge(messages, "\n");
    Threading.unlockMutex(mutex~ptr);
    Http.print(conn, "HTTP/1.1 200 Ok\r\n");
    Http.print(conn, "Content-Type: text/plain\r\n");
    Http.print(conn, "Cache-Control: no-cache\r\n");
    Http.print(conn, "Content-Length: %d\r\n\r\n", response.getLength());
    Http.print(conn, response.buf);
}

Each REST endpoint is a function marked with the @beEndpoint modifier, giving it the method and the route for that endpoint. You'll see that in each of these two endpoints we lock the mutex before accessing the global messages variable, then we unlock it afterwards.

You can put this backend code in a separate file and then import it from chat.alusus, and you can also keep inside chat.alusus. In Alusus, you do not have to separate the backend from the front end, nor do you need to run them separately; WebPlatform takes care of all of that for you.

Now that we have the backend, we need to hook the frontend to it. We have a text entry component that isn't listening to any events, so let's listen to the button click and key-up events and notify the owner:

class TextEntry {
    @injection def component: Component;

    def onNewEntry: closure (String);
    def textInput: SrdRef[TextInput];

    handler this~init() {
        def self: ref[this_type](this);

        this.view = Box({}).{
            style.{
                display = Display.FLEX;
                layout = Layout.ROW;
                justify = Justify.SPACE_BETWEEN;
            };
            addChildren({
                TextInput().{
                    self.textInput = this;
                    style.{
                        flex = Flex(1);
                        margin = Length4.px(10);
                        height = Length.px(50);
                        fontSize = Length.pt(12.0);
                        borderStyle = BorderStyle.SOLID;
                        borderColor = Color("000");
                        borderWidth = Length4.px(1.5);
                    };
                    onKeyUp.connect(closure (widget: ref[TextInput], payload: ref[String]) {
                        if payload == "Shift+Enter" {
                            def newData: String = String("- ") + widget.getText().trim();
                            widget.setText(String());
                            if not self.onNewEntry.isNull() self.onNewEntry(newData);
                        }
                    });
                },
                Button(String("Send")).{
                    style.{
                        height = Length.px(50);
                        width = Length.px(50);
                        fontSize = Length.px(16.0);
                        justify = Justify.CENTER;
                        margin = Length4.px(10, 10, 10, 0);
                    };
                    onClick.connect(closure (widget: ref[Widget], payload: ref[Int]) {
                        def newData: String = String("- ") + self.textInput.getText().trim();
                        self.textInput.setText(String());
                        if not self.onNewEntry.isNull() self.onNewEntry(newData);
                    });
                }
            });
        };
    }

    handler this_type(): SrdRef[TextEntry] {
        return SrdRef[TextEntry].construct();
    }
}

Now the owner of the component just needs to provide the onNewEntry callback. In the UI endpoint we will do two things:

Listen to new entries and send them over to the backend.
Periodically fetch the chat history from the backend and display it.

@uiEndpoint["/"]
@title["Wasm Chat"]
func main {
    def onFetch: closure (json: Json);

    Window.instance.style.{
        padding = Length4.pt(0);
        margin = Length4.pt(0);
    };
    Window.instance.setView(Box({}).{
        style.{
            height = Length.percent(100);
            justify = Justify.SPACE_BETWEEN;
            display = Display.FLEX;
            layout = Layout.COLUMN;
            background = Background(Color("aaa"));
        };
        addChildren({
            Header(),
            Text(String()).{
                style.{
                    flex = Flex(1);
                    width = Length.percent(100) - Length.px(20);
                    margin = Length4.px(10, 10, 0, 10);
                    fontSize = Length.pt(20.0);
                    borderStyle = BorderStyle.SOLID;
                    borderColor = Color("000");
                    borderWidth = Length4.px(1.5);
                    background = Background(Color("fff"));
                };
                onFetch = closure (json: Json) {
                    def status: Int[64] = json("eventData")("status");
                    if status >= 200 and status < 300 {
                        def data: String = json("eventData")("body");
                        if this.getText() != data {
                            this.setText(data);
                        }
                    }
                };
            },
            TextEntry().{
                onNewEntry = closure (newData: String) {
                    sendRequest(
                        "POST", "/messages", "Content-Type: application/text", newData, 10000,
                        closure (Json) {}
                    );
                    sendRequest("GET", "/messages", null, null, 500, onFetch);
                };
            };
        })
    });

    startTimer(500000, closure (json: Json) {
        sendRequest("GET", "/messages", null, null, 500, onFetch);
    });
    sendRequest("GET", "/messages", null, null, 500, onFetch);

    runEventLoop();
}

The rest of the app looks the same, and running the app is done the same way as shown in the previous section. The full source code now looks like this:

import "Srl/String";
import "Apm";
Apm.importFile("Alusus/Threading");
Apm.importFile("Alusus/WebPlatform");
use Srl;
use WebPlatform;

//==============================================================================
// Backend

def MAX_MESSAGES: 12;
def messages: Array[String];
def mutex: Threading.Mutex;
Threading.initMutex(mutex~ptr, 0);

@beEndpoint["POST", "/messages"]
func postMessages (conn: ptr[Http.Connection]) {
    def postData: array[Char, 1024];
    def postDataSize: Int = Http.read(conn, postData~ptr, postData~size);
    Threading.lockMutex(mutex~ptr);
    if messages.getLength() >= MAX_MESSAGES messages.remove(0);
    messages.add(String(postData~ptr, postDataSize));
    Threading.unlockMutex(mutex~ptr);
    Http.print(conn, "HTTP/1.1 200 Ok\r\n\r\n");
}

@beEndpoint["GET", "/messages"]
func getMessages (conn: ptr[Http.Connection]) {
    Threading.lockMutex(mutex~ptr);
    def response: String = String.merge(messages, "\n");
    Threading.unlockMutex(mutex~ptr);
    Http.print(conn, "HTTP/1.1 200 Ok\r\n");
    Http.print(conn, "Content-Type: text/plain\r\n");
    Http.print(conn, "Cache-Control: no-cache\r\n");
    Http.print(conn, "Content-Length: %d\r\n\r\n", response.getLength());
    Http.print(conn, response.buf);
}


//==============================================================================
// Frontend Components

class Header {
    @injection def component: Component;

    handler this~init() {
        this.view = Box({}).{
            style.{
                padding = Length4.pt(4);
                borderWidth = Length4.pt(0, 0, 1.5, 0);
                borderStyle = BorderStyle.SOLID;
                borderColor = Color("000");
                justify = Justify.START;
                display = Display.FLEX;
                layout = Layout.COLUMN;
                background = Background(Color("fff"));
            };
            addChildren({
                Text(String("Wasm Chat")).{
                    style.fontSize = Length.pt(18.0);
                }
            });
        };
    }

    handler this_type(): SrdRef[Header] {
        return SrdRef[Header].construct();
    }
}

class TextEntry {
    @injection def component: Component;

    def onNewEntry: closure (String);
    def textInput: SrdRef[TextInput];

    handler this~init() {
        def self: ref[this_type](this);

        this.view = Box({}).{
            style.{
                display = Display.FLEX;
                layout = Layout.ROW;
                justify = Justify.SPACE_BETWEEN;
            };
            addChildren({
                TextInput().{
                    self.textInput = this;
                    style.{
                        flex = Flex(1);
                        margin = Length4.px(10);
                        height = Length.px(50);
                        fontSize = Length.pt(12.0);
                        borderStyle = BorderStyle.SOLID;
                        borderColor = Color("000");
                        borderWidth = Length4.px(1.5);
                    };
                    onKeyUp.connect(closure (widget: ref[TextInput], payload: ref[String]) {
                        if payload == "Shift+Enter" {
                            def newData: String = String("- ") + widget.getText().trim();
                            widget.setText(String());
                            if not self.onNewEntry.isNull() self.onNewEntry(newData);
                        }
                    });
                },
                Button(String("Send")).{
                    style.{
                        height = Length.px(50);
                        width = Length.px(50);
                        fontSize = Length.px(16.0);
                        justify = Justify.CENTER;
                        margin = Length4.px(10, 10, 10, 0);
                    };
                    onClick.connect(closure (widget: ref[Widget], payload: ref[Int]) {
                        def newData: String = String("- ") + self.textInput.getText().trim();
                        self.textInput.setText(String());
                        if not self.onNewEntry.isNull() self.onNewEntry(newData);
                    });
                }
            });
        };
    }

    handler this_type(): SrdRef[TextEntry] {
        return SrdRef[TextEntry].construct();
    }
}

//==============================================================================
// Frontend Pages

@uiEndpoint["/"]
@title["Wasm Chat"]
func main {
    def onFetch: closure (json: Json);

    Window.instance.style.{
        padding = Length4.pt(0);
        margin = Length4.pt(0);
    };
    Window.instance.setView(Box({}).{
        style.{
            height = Length.percent(100);
            justify = Justify.SPACE_BETWEEN;
            display = Display.FLEX;
            layout = Layout.COLUMN;
            background = Background(Color("aaa"));
        };
        addChildren({
            Header(),
            Text(String()).{
                style.{
                    flex = Flex(1);
                    width = Length.percent(100) - Length.px(20);
                    margin = Length4.px(10, 10, 0, 10);
                    fontSize = Length.pt(20.0);
                    borderStyle = BorderStyle.SOLID;
                    borderColor = Color("000");
                    borderWidth = Length4.px(1.5);
                    background = Background(Color("fff"));
                };
                onFetch = closure (json: Json) {
                    def status: Int[64] = json("eventData")("status");
                    if status >= 200 and status < 300 {
                        def data: String = json("eventData")("body");
                        if this.getText() != data {
                            this.setText(data);
                        }
                    }
                };
            },
            TextEntry().{
                onNewEntry = closure (newData: String) {
                    sendRequest(
                        "POST", "/messages", "Content-Type: application/text", newData, 10000,
                        closure (Json) {}
                    );
                    sendRequest("GET", "/messages", null, null, 500, onFetch);
                };
            };
        })
    });

    startTimer(500000, closure (json: Json) {
        sendRequest("GET", "/messages", null, null, 500, onFetch);
    });
    sendRequest("GET", "/messages", null, null, 500, onFetch);

    runEventLoop();
}

//==============================================================================
// Entry Point

Console.print("Starting server on port 8000...\nURL: http://localhost:8000/\n");
buildAndRunServer(Array[CharsPtr]({ "listening_ports", "8000", "static_file_max_age", "0" }));

Now we can have multiple people chat over this simple chat application, but the data is not persisted yet, so if we restart the server all data will be gone. We will fix that in the next article.

Building a WASM Chat App using Alusus - Step 1: The UI

Mon, 02 Feb 2026 08:49:09 +0000

WebAssembly is a relatively new technology that allows building native apps for the web, which can provide extra performance, lower memory footprint, and improved security over traditional JS based web applications. In this tutorial we'll walk through building a simple WebAssembly based application. The app is a simple text based chat application. For this tutorial we'll use Alusus programming language, which provides good support for WebAssembly.

Requirements

We'll keep the requirement simple for the sake of this tutorial. When the user launches the app
he/she should be presented with a dialog where you enter a username, a user password, a room name, and a room password. Once the user enters those info, we'll log the user into that room. Like any other chat app, the room has an entry box where the user enters a new message, and an area for showing chat messages from all members of that room.

All you need in terms of development environment is to install Alusus language in any modern linux distro, and have any text editor.

Basic Chat Frontend

We will start off by building a basic UI. With Alusus and WebPlatform you build everything in Alusus itself without the need to embed any HTML or CSS; those will be generated for you by the compiler, so you build the app as if you are building a desktop application using some UI toolkit.

We will create two separate components, one for the header and one for the text entry, and we will have one main endpoint that displays the UI. Here is how the full code looks like:

import "Srl/String";
import "Apm";
Apm.importFile("Alusus/WebPlatform");
use Srl;
use WebPlatform;

//==============================================================================
// Frontend Components

class Header {
    @injection def component: Component;

    handler this~init() {
        this.view = Box({}).{
            style.{
                padding = Length4.pt(4);
                borderWidth = Length4.pt(0, 0, 1.5, 0);
                borderStyle = BorderStyle.SOLID;
                borderColor = Color("000");
                justify = Justify.START;
                display = Display.FLEX;
                layout = Layout.COLUMN;
                background = Background(Color("fff"));
            };
            addChildren({
                Text(String("Wasm Chat")).{
                    style.fontSize = Length.pt(18.0);
                }
            });
        };
    }

    handler this_type(): SrdRef[Header] {
        return SrdRef[Header].construct();
    }
}

class TextEntry {
    @injection def component: Component;

    handler this~init() {
        def self: ref[this_type](this);

        this.view = Box({}).{
            style.{
                display = Display.FLEX;
                layout = Layout.ROW;
                justify = Justify.SPACE_BETWEEN;
            };
            addChildren({
                TextInput().{
                    style.{
                        flex = Flex(1);
                        margin = Length4.px(10);
                        height = Length.px(50);
                        fontSize = Length.pt(12.0);
                        borderStyle = BorderStyle.SOLID;
                        borderColor = Color("000");
                        borderWidth = Length4.px(1.5);
                    };
                },
                Button(String("Send")).{
                    style.{
                        height = Length.px(50);
                        width = Length.px(50);
                        fontSize = Length.px(16.0);
                        justify = Justify.CENTER;
                        margin = Length4.px(10, 10, 10, 0);
                    };
                }
            });
        };
    }

    handler this_type(): SrdRef[TextEntry] {
        return SrdRef[TextEntry].construct();
    }
}

//==============================================================================
// Frontend Pages

@uiEndpoint["/"]
@title["Wasm Chat"]
func main {
    Window.instance.style.{
        padding = Length4.pt(0);
        margin = Length4.pt(0);
    };
    Window.instance.setView(Box({}).{
        style.{
            height = Length.percent(100);
            justify = Justify.SPACE_BETWEEN;
            display = Display.FLEX;
            layout = Layout.COLUMN;
            background = Background(Color("aaa"));
        };
        addChildren({
            Header(),
            Text(String()).{
                style.{
                    flex = Flex(1);
                    width = Length.percent(100) - Length.px(20);
                    margin = Length4.px(10, 10, 0, 10);
                    fontSize = Length.pt(20.0);
                    borderStyle = BorderStyle.SOLID;
                    borderColor = Color("000");
                    borderWidth = Length4.px(1.5);
                    background = Background(Color("fff"));
                };
            },
            TextEntry()
        })
    });

    runEventLoop();
}

//==============================================================================
// Entry Point

Console.print("Starting server on port 8000...\nURL: http://localhost:8000/\n");
buildAndRunServer(Array[CharsPtr]({ "listening_ports", "8000", "static_file_max_age", "0" }));

The code itself is pretty self explanatory; the UI endpoint is a function marked with the @uiEndpoint modifier. In this function we are doing two things: setting the main view then entering the event loop. The view is a Box, which is equivalent to a div in HTML, and in that box there is the header, a text view for viewing chat history, and the text entry component. The Text and Header components are simply classes that inherit from WebPlatform's Component class and create the component's view in the constructor.
If you are familiar with CSS you will recognize the styles we are assigning to each of the widgets. Each of these styles is equivalent to its HTML counterpart, but are defined in a strongly typed manner, and hence you'll see the use of enumerations and classes instead of plain strings.

Put all that code in a single file called chat.alusus, then run it like this:

alusus chat.alusus

Here is how the page looks like:

The UI currently does nothing as it's not linked to any backend yet. This is what we will be doing in the next article.

My journey from beginner to backend developer, sharing lessons, projects, and tips.

Tue, 14 Oct 2025 23:23:12 +0000

Title: From Beginner to Backend Developer: My One-Year Journey

Introduction

Hi, I’m The Duchess of Hackers, a Full-Stack Developer and Digital Marketer. Almost a year ago, I started my journey into backend development alongside my studies in Marketing & IT. It’s been full of challenges, discoveries, and growth here’s what I’ve learned.

Why I Started Learning Backend

I wanted to:

Understand how applications work behind the scenes
Build real-world projects
Combine marketing and tech knowledge to create solutions

I started with Python, moved to Flask, and gradually explored databases, APIs, and backend logic.

Key Projects and Lessons Learned

One of my first projects was a simple ATM simulator in Python. Through this, I learned:

Basic programming logic and control flow
How to structure a small project
The importance of testing and debugging

Each small project helped me gain confidence and prepared me for bigger challenges.

Tools and Resources That Helped Me

Languages & Frameworks: Python, Flask
Version Control: Git & GitHub
Development Environment: VS Code, WSL/Ubuntu
Learning Platforms: Online tutorials, coding communities, and practice challenges

Tip for beginners: Break problems into small, manageable steps, practice consistently, and don’t be afraid to ask for help.

Biggest Takeaways

Learning to code is a journey, not a race
Community support and feedback are invaluable
Document your projects and share your learning it helps both you and others

Call to Action

I hope my journey inspires other beginners to start coding, build projects, and keep growing.

If you’re starting your coding journey, I’d love to hear about your first project or challenge share it in the comments or connect with me on dev.to, GitHub, or LinkedIn.

Signature
Full-Stack Developer | Digital Marketer
The Duchess of Hackers
LinkedIn | GitHub | dev.to