DEV Community

Cover image for Experience WebForms Core Technology in BackEnd or FrontEnd!
Elanat Framework
Elanat Framework

Posted on

Experience WebForms Core Technology in BackEnd or FrontEnd!

#javascript #frontend #node #webformscore

WebForms Core was initially introduced as a Server-Command / Client-Execution technology.

The original idea was simple but powerful: developers could write UI logic on the server using their preferred programming language, generate WebForms Core commands, and let a lightweight client-side engine execute those commands in the browser.

With the evolution of WebForms Core, this architecture has become even more flexible.

WebForms Core can now be experienced in both the Back-end and the Front-end.

This means that the same WebForms programming model can be used in different environments:

  • Server-side applications
  • Node.js applications
  • Front-end JavaScript modules
  • Static web applications
  • WebAssembly environments

The key to understanding this architecture is understanding the two main components of WebForms Core:

Commander and Executor

WebForms Core Architecture

WebForms Core consists of two independent parts.

                     WebForms Core
                           │
                ┌──────────┴──────────┐
                │                     │
            Commander              Executor
                │                     │
           webformscore           webformsjs
                │                     │
           WebForms.js           web-forms.js
                │                     │
       Generates commands ──► Executes commands
                │                     │
                └─────────────► Browser DOM
Enter fullscreen mode Exit fullscreen mode

Commander

The Commander is responsible for generating WebForms Core commands.

For JavaScript, the Commander package is:

webformscore
Enter fullscreen mode Exit fullscreen mode

The primary class inside this package is:

WebForms.js
Enter fullscreen mode Exit fullscreen mode

The Commander does not need to manipulate the DOM directly.

Instead, it creates commands describing what should happen.

For example:

const form = new WebForms();

form.setBackgroundColor("<main>", "lightgreen");
form.setTextColor("<li>*", "green");
Enter fullscreen mode Exit fullscreen mode

These commands can later be executed by the WebForms Core Executor.

Executor

The Executor is responsible for executing WebForms Core commands inside the browser.

The Executor package is:

webformsjs
Enter fullscreen mode Exit fullscreen mode

Its physical JavaScript file is:

web-forms.js
Enter fullscreen mode Exit fullscreen mode

It is loaded into the HTML page:

<script type="module" src="/script/web-forms.js"></script>
Enter fullscreen mode Exit fullscreen mode

The Executor receives WebForms Core commands and applies them to the browser DOM.

For example:

Commander
    │
    │ Generates commands
    │
    ▼
WebForms Core Response
    │
    ▼
WebFormsJS
    │
    │ Executes commands
    │
    ▼
Browser DOM
Enter fullscreen mode Exit fullscreen mode

Installing WebForms Core Packages

Both packages are available through npm.

Install the Commander

To install the JavaScript WebForms Core Commander:

https://www.npmjs.com/package/webformscore

npm install webformscore
Enter fullscreen mode Exit fullscreen mode

This package provides classes such as:

import { WebForms } from "webformscore";
Enter fullscreen mode Exit fullscreen mode

The Commander can be used in both server-side and front-end JavaScript environments.

Install the Executor

https://www.npmjs.com/package/webformsjs

To install WebFormsJS:

npm install webformsjs
Enter fullscreen mode Exit fullscreen mode

This package contains the WebForms Core browser Executor.

The package includes:

webformsjs/
├── web-forms.js
├── web-forms.min.js
├── README.md
└── LICENSE
Enter fullscreen mode Exit fullscreen mode

The normal development version is:

web-forms.js
Enter fullscreen mode Exit fullscreen mode

The production version is:

web-forms.min.js
Enter fullscreen mode Exit fullscreen mode

Both files are loaded as ES modules:

<script type="module" src="/script/web-forms.js"></script>
Enter fullscreen mode Exit fullscreen mode

or:

<script type="module" src="/script/web-forms.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Where Are npm Packages Installed?

When you run:

npm install webformscore webformsjs
Enter fullscreen mode Exit fullscreen mode

npm installs the packages inside:

node_modules/
Enter fullscreen mode Exit fullscreen mode

For example:

MyProject/
│
├── node_modules/
│   ├── webformscore/
│   └── webformsjs/
│
├── package.json
└── package-lock.json
Enter fullscreen mode Exit fullscreen mode

This is completely normal.

However, there is an important difference between the Commander and the Executor.

Using WebForms Core in Node.js

In a Node.js application, node_modules is used directly by the server-side JavaScript environment.

For example:

import { WebForms } from "webformscore";
Enter fullscreen mode Exit fullscreen mode

or, depending on the module configuration:

const { WebForms } = require("webformscore");
Enter fullscreen mode Exit fullscreen mode

The Commander can therefore be used directly by Node.js.

For example:

const form = new WebForms();

form.setFontSize("<main>", 30);
form.setBackgroundColor("<body>", "lightgreen");

const response = form.response();
Enter fullscreen mode Exit fullscreen mode

The generated response can then be sent to the browser.

WebFormsJS and the Browser

Unlike Node.js, a browser does not normally access:

node_modules/
Enter fullscreen mode Exit fullscreen mode

directly.

Therefore, WebFormsJS must be made available through the web server.

For example, in an Express application:

app.use(
    "/script",
    express.static("./node_modules/webformsjs")
);
Enter fullscreen mode Exit fullscreen mode

Now the browser can access:

/script/web-forms.js
Enter fullscreen mode Exit fullscreen mode

The HTML page can use:

<script type="module" src="/script/web-forms.js"></script>
Enter fullscreen mode Exit fullscreen mode

The physical file remains inside:

node_modules/webformsjs/web-forms.js
Enter fullscreen mode Exit fullscreen mode

but the browser receives it through the web server.

This means developers do not need to manually copy the WebFormsJS file into their project.

WebForms Core on the Server

The traditional WebForms Core architecture works as follows:

Browser
   │
   │ Sends form data
   │
   ▼
Server
   │
   │ Creates WebForms Commander
   │
   ▼
WebForms Commands
   │
   │ Sends response
   │
   ▼
WebFormsJS Executor
   │
   ▼
Browser DOM
Enter fullscreen mode Exit fullscreen mode

For example, a Node.js application can create a Commander:

const form = new WebForms();

form.setFontSize("<form>", 24);
form.setBackgroundColor("<form>", "lightgreen");
form.setDisabled("(button)", true);

return form.response();
Enter fullscreen mode Exit fullscreen mode

The server generates the commands.

The browser executes them.

This architecture allows developers to control the client-side DOM from server-side programming code.

WebForms Core on the Front-end

The JavaScript Commander introduces another powerful possibility.

The Commander itself can run in the browser.

This means WebForms Core can also be used to build front-end applications.

The following example demonstrates a small front-end application with three pages:

  • Main
  • About
  • License

The application uses the URL hash for navigation.

The HTML Page 

@page
<!DOCTYPE html>
<html>
<head>
  <title>Using WebForms Core</title>
  <script type="module" src="/script/web-forms.js"></script>
</head>
<body>
    <main>

    </main>

    <ul>
        <li><a href="#main">Main Page</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#license">License</a></li>
    </ul>

    <script type="module">
        FrontBack(null, "/script/module/only-front/root.js");
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

The WebFormsJS Executor is loaded inside the <head> section:

<script type="module" src="/script/web-forms.js"></script>
Enter fullscreen mode Exit fullscreen mode

Then the application starts by calling:

FrontBack(null, "/script/module/only-front/root.js");
Enter fullscreen mode Exit fullscreen mode

The FrontBack method loads and executes the specified module.

The Front-end Router

The following module acts as a simple hash-based router.

export function PageLoad(evt)
{
    function root()
    {
        const path = window.location.hash
            ? window.location.hash.substring(1)
            : "main";

        FrontBack(
            null,
            `/script/module/only-front/${path}.js`
        );
    }

    window.addEventListener("hashchange", root);

    root();
}
Enter fullscreen mode Exit fullscreen mode

When the page is loaded, the router checks the URL hash.

For example:

#main
Enter fullscreen mode Exit fullscreen mode

loads:

main.js
Enter fullscreen mode Exit fullscreen mode

and:

#about
Enter fullscreen mode Exit fullscreen mode

loads:

about.js
Enter fullscreen mode Exit fullscreen mode

The hashchange event allows the application to react when the user clicks a navigation link.

Main Page

The Main page uses the WebForms Commander.

import { WebForms } from "/script/module/WebForms.js";

export function PageLoad(evt)
{
    const form = new WebForms();

    form.setTextColor("<li>*", "green");

    return `
        <b>Main page</b>

        <p>
        WebForms Core initially introduced as a Server-Command/Client-Execution
        technology, WebForms Core focused on unifying UI logic across different
        back-end languages while keeping the front-end lightweight.
        With the release of version 2, this vision takes a major step forward.
        </p>
    `
    + form.exportToHtmlComment();
}
Enter fullscreen mode Exit fullscreen mode

First, a WebForms Commander is created:

const form = new WebForms();
Enter fullscreen mode Exit fullscreen mode

Then a command is generated:

form.setTextColor("<li>*", "green");
Enter fullscreen mode Exit fullscreen mode

The module also returns HTML content:

return `
    ...
`
Enter fullscreen mode Exit fullscreen mode

Finally, the WebForms commands are exported as HTML comments:

form.exportToHtmlComment();
Enter fullscreen mode Exit fullscreen mode

WebFormsJS automatically detects and executes these Action Controls.

This demonstrates an important capability of WebForms Core:

WebForms commands can travel together with HTML.

About Page

The About page demonstrates event handling.

import { WebForms, HtmlEvent } from "/script/module/WebForms.js";

export function PageLoad(evt)
{
    const form = new WebForms();

    form.setCommentEvent(
        "Button1",
        HtmlEvent.OnClick,
        "button-click"
    );

    form.startIndex("button-click");

    form.setFontSize("<main>", 30);

    return `
        <b>About page</b>
        <br>

        <button id="Button1">Click me!</button>

        <p>
        WebForms Core (WFC) is a powerful technology for
        managing DOM elements through the server and client!
        </p>
    `
    + form.exportToHtmlComment();
}
Enter fullscreen mode Exit fullscreen mode

The Commander defines an event:

form.setCommentEvent(
    "Button1",
    HtmlEvent.OnClick,
    "button-click"
);
Enter fullscreen mode Exit fullscreen mode

Then a command index is started:

form.startIndex("button-click");
Enter fullscreen mode Exit fullscreen mode

Commands added after this point belong to the event action.

form.setFontSize("<main>", 30);
Enter fullscreen mode Exit fullscreen mode

When the user clicks the button, the Executor performs the associated commands.

The Commander describes the event.

The Executor handles the event and executes the commands.

License Page

The License page demonstrates another simple WebForms command.

import { WebForms } from "/script/module/WebForms.js";

export function PageLoad(evt)
{
    const form = new WebForms();

    form.setBackgroundColor("<main>", "lightgreen");

    return `
        <b>License page</b>

        <p>
        All Elanat products are licensed under MIT.
        </p>
    `
    + form.exportToHtmlComment();
}
Enter fullscreen mode Exit fullscreen mode

The Commander generates:

form.setBackgroundColor("<main>", "lightgreen");
Enter fullscreen mode Exit fullscreen mode

The command is exported with:

form.exportToHtmlComment();
Enter fullscreen mode Exit fullscreen mode

Then WebFormsJS executes the command and changes the page.

A Simple Server-side Example

WebForms Core can also be used in a traditional server-side application. In this model, the Commander runs on the server, generates WebForms Core commands, and returns them to the browser. The WebFormsJS Executor then executes those commands on the client.

For example, in a Node.js application using the webformscore package:

import { WebForms, InputPlace } from "webformscore";

app.post("/change", (req, res) => {

    const form = new WebForms();

    form.setText(
        InputPlace.tag("h2"),
        "Hello from the Server!"
    );

    form.setBackgroundColor(
        InputPlace.tag("body"),
        "lightgreen"
    );

    form.setDisabled(
        InputPlace.name("button"),
        true
    );

    res.send(form.response());
});
Enter fullscreen mode Exit fullscreen mode

When the client sends a request to /change, the server creates a WebForms Commander and generates the required commands.

The response is then received by WebFormsJS, which executes the commands and updates the DOM.

The important point is that the server does not need to send a new HTML page. It can send only the required WebForms Core commands:

Browser
   │
   │ Request
   ▼
Node.js Server
   │
   │ WebForms Commander
   ▼
WebForms Core Response
   │
   ▼
WebFormsJS Executor
   │
   ▼
DOM Update
Enter fullscreen mode Exit fullscreen mode

This is the traditional Server-Command / Client-Execution model of WebForms Core.

Server or Front? Both!

The most interesting part of this architecture is that the WebForms programming model is not limited to one side.

WebForms Core Technology in Back-end or Front-end

The same core idea can work in different environments.

Server-side 

WebForms Commander
        │
        ▼
Server generates commands
        │
        ▼
WebFormsJS executes them
        │
        ▼
Browser
Enter fullscreen mode Exit fullscreen mode

Front-end 

WebForms Commander
        │
        ▼
Browser generates commands
        │
        ▼
WebFormsJS executes them
        │
        ▼
Browser DOM
Enter fullscreen mode Exit fullscreen mode

The programming model remains consistent.

const form = new WebForms();

form.setTextColor(...);
form.setBackgroundColor(...);
form.addTag(...);
form.setText(...);
Enter fullscreen mode Exit fullscreen mode

What changes is where the Commander is running.

Why Separate Commander and Executor?

The separation between webformscore and webformsjs provides several important advantages.

1. Multi-language Support

The Commander can be implemented in different programming languages.

For example:

C#
Java
Python
PHP
JavaScript
Go
Rust
C++
Enter fullscreen mode Exit fullscreen mode

Each language can generate the same WebForms Core command format.

WebFormsJS remains the centralized browser Executor.

2. Lightweight Client-side Execution

The browser does not need a different framework for every server-side language.

Regardless of whether the commands were generated by:

C#
Java
Node.js
Python
Rust
Enter fullscreen mode Exit fullscreen mode

the browser uses the same Executor:

WebFormsJS
Enter fullscreen mode Exit fullscreen mode

3. The Same Programming Model Everywhere

Developers can work with the familiar WebForms API:

const form = new WebForms();
Enter fullscreen mode Exit fullscreen mode

and then:

form.setText(...);
form.setBackgroundColor(...);
form.setFontSize(...);
form.addTag(...);
Enter fullscreen mode Exit fullscreen mode

This programming model can be used on the server or in the browser.

npm Packages Summary

Package Role Environment
webformscore Commander Server and Front-end
webformsjs Executor Browser

Installation:

npm install webformscore
Enter fullscreen mode Exit fullscreen mode

and:

npm install webformsjs
Enter fullscreen mode Exit fullscreen mode

Or both together:

npm install webformscore webformsjs
Enter fullscreen mode Exit fullscreen mode

Final Architecture

WebForms Core is not simply a JavaScript library and it is not limited to server-side programming.

It is an architecture based on a clear separation of responsibilities.

┌───────────────────────────────┐
│       WebForms Commander      │
│                               │
│   C# / Java / JS / Go / etc.  │
└───────────────┬───────────────┘
                │
                │ WebForms Core Commands
                ▼
┌───────────────────────────────┐
│       WebFormsJS Executor     │
│                               │
│        web-forms.js           │
└───────────────┬───────────────┘
                │
                │ DOM Operations
                ▼
┌───────────────────────────────┐
│         Browser UI / DOM      │
└───────────────────────────────┘
Enter fullscreen mode Exit fullscreen mode

The Commander decides what should happen.

The Executor makes it happen.

And now, with the JavaScript implementation of the WebForms Core Commander, developers can experience WebForms Core technology not only in the Backend, but also directly in the Front-end.

Experience WebForms Core Technology in Backend or Front!

The same architecture.

The same programming model.

Different environments.

Commander everywhere. Executor in the browser.

Top comments (0)