Elanat Framework

Posted on Dec 26

WebForms Core 2 in NodeJS - Don't use React, Vue, or Angular

#node #react #vue #webformscore

The mental image most developers associate with server-driven frameworks is usually the same: slow, stateful, feature-poor, and tightly coupled with always-on online interaction.

WebForms Core, a technology developed by Elanat, breaks this long-held stereotype at a fundamental level.

Web development has gone through several major revolutions.

The first was the AJAX revolution, which freed the browser from page reloads.

The second was the rise of asynchronous servers, popularized by technologies like Nginx, which transformed backend scalability and performance.

WebForms Core represents the larger of the two.

This is not just another framework, nor is it an incremental improvement on existing models.

It introduces a new paradigm in server-driven web development—one that moves the web away from the traditional state/UI retrieval cycle and toward a command-and-run model.

Blazor Server is the most popular server-driven framework; it is a weak system compared to WebForms Core technology.

Comparing WebForms Core and Blazor Server

Aspect	WebForms Core (Command Flow)	Blazor Server (Diff Flow)
Core Paradigm	The server sends direct commands to mutate the DOM (e.g., `bc<body>=green`).	The server maintains a Virtual DOM of components, calculates differences (diffs), and sends them as updates.
Bandwidth Usage	Very low (only lightweight commands).	Moderate to high (depends on the size of the diff).
Server Processing	Very light (no diff calculation).	Heavy (continuous diff calculation).
Connection State	Completely stateless.	Mandatory Stateful (all application state is held on the server).
Server Scalability	Excellent (no diff overhead, lightweight connections).	Limited (each user requires a persistent SignalR circuit + heavy diff processing).
Latency	Very low (commands are executed quickly).	Moderate (latency from diff calculation and transmission).
Developer Experience	Similar to traditional server-side programming + fine-grained DOM control.	Similar to React/Vue but with C# (component-based).
Ecosystem	Any backend (popular programming language).	Only .NET (C#).

How to use WebForms Core technology?

Two steps are required:
1- On the client side: Add the WebFormsJS script to your HTML page.

<script type="module" src="/script/web-forms.js"></script>

Get the WebFormsJS script from the following link:
https://github.com/webforms-core/Web_forms/blob/elanat_framework/web-forms.js

2- On the server side: Import the WebForms class for your programming language.
Get the WebForms class associated with the server programming language from the following link:
https://github.com/webforms-core/Web_forms_classes

WebForms Core 2

WebForms Core 2 has been released by Elanat in the past few days. This version includes over 50 powerful new features. At Elanat, we are converting the WebForms class from C# to other popular web programming languages. Yesterday we created the WebForms class for PHP and today for NodeJS. In the next two weeks, we will also try to create the WebForms class in other programming languages.

Version 2 has many features such as: Service Worker, Custom Event, Async capability, Module loading, Web assembly execution, Format Storage, Master Pages, Front Back, Fetch escape, Queue management, Trigger Event, SSE, Update mechanism, Placeholder, External Template, Comment Mode, Retry Mechanism, Reflection capability, Automatic Gzip for sending data and files, Unit testing tool, JavaScript function assignment and many other powerful features.

Async Feature

In this article, we are going to teach you the new Async feature using NodeJS in the form of an example.

This code sets up a simple server with the Express framework running on port 3000 and using the WebForms class. In the main path (/), if the test_async parameter is present in the query, some initial messages are added to the form, then an asynchronous operation is started by calling form.async() and the result of loading the /delay address (the response of which is returned after 2 seconds) is added to the form, and then other messages are inserted; Finally, the output of the form is sent to the user. If the test_async parameter is not present, the user will be presented with an HTML button that, when clicked, will send the request with the ?test_async=true query. Also, the path /delay is defined, which can be used with setTimeout after 2 seconds of the text "Async in WebForms Core work fine!" returns the In this way, the example shows how to handle synchronous and asynchronous messages in WebForms and display the result in the HTTP response.

const express = require('express');
const bodyParser = require('body-parser');
const { WebForms, Fetch } = require('./WebForms');

const app = express();
const PORT = 3000;

app.use(express.static("public"));

app.use(bodyParser.urlencoded({ extended: true }));

app.get('/', (req, res) => {
    const form = new WebForms();
    if (req.query.test_async) {

        form.message("Message before Async 1"); // Previous command
        form.message("Message before Async 2"); // Previous command
        form.message("Message before Async 3"); // Previous command
        form.async();
        form.message(Fetch.loadUrl("/delay"));
        form.message("Message after Async 4"); // Next command
        form.message("Message after Async 5"); // Next command
        form.message("Message after Async 6"); // Next command

        res.send(form.response());
    } else {
        form.setGetEvent("<button>", "onclick", "?test_async=true");

        res.send(`
<!DOCTYPE html>
<html>
<head>
  <title>Using WebForms Core</title>
  <script type="module" src="/script/web-forms.js"></script>
</head>
<body>
    <button>Click me to test async</button>
</body>
</html>
` + form.exportToHtmlComment());
    }
});

app.get("/delay", (req, res) => {
  setTimeout(() => {
    res.send("Async in WebForms Core work fine!");
  }, 2000);
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

The image below shows the page's behavior after clicking the button; all 6 messages are displayed immediately, but the message "Async in WebForms Core work fine!" is delayed by two seconds and executed last.

Calling the command "form.async();" It causes the next command to be executed async. If the number of commands is more, we should use "startBracket" and "endBracket" methods.

Example:

...
form.message("Message before Async 3"); // Previous command
form.async();
+form.startBracket();
form.message(Fetch.loadUrl("/delay"));
form.addTag("<body>", "h1");
form.setText("<h1>", Fetch.method("heavyTask"));
+form.endBracket();
form.message("Message after Async 4"); // Next command
...

Note: WebForms Core technology consists of two parts: server and client. On the client side, there is a library called WebFormsJS with the file name "web-forms.js" and on the server side, there is a class called WebForms with the extension related to the server programming language; for example, for C#, the extension is .cs. Please note that the extension of NodeJS classes is .js and this class should not be confused with the WebFormsJS library.

A Truly Multi-Language UI Technology

One of the most overlooked — yet revolutionary — aspects of WebForms Core is this:

The same UI runtime works across multiple server languages.

The exact same WebFormsJS engine can be driven by:

PHP
Node.js
.NET
Python
JAVA
And any popular programming language on the web

This means:

No language-specific front-end frameworks
No duplicated UI logic
No rewriting UI behavior when switching backend stacks

The UI protocol is language-agnostic.
Only the server-side authoring language changes.

This alone places WebForms Core in a category that very few technologies occupy.

More Than Features: A Coherent Architecture

Yes, WebForms Core can:

Build real game loops
React to DOM mutations
Provide advanced offline storage
Perform client-side diffs
Trigger logic based on DOM conditions

All of that is impressive.

But the async example proves something deeper:

WebForms Core has a temporal model of UI.

Time is not an afterthought.
It is part of the UI DSL itself.

A Fair Comparison

Technology	Async UI Model
React	Powerful, but complex
Vue	Simpler, JS-centric
Blazor Server	Heavy, stateful
WebForms Core	Declarative, non-blocking, language-agnostic

Final Thoughts

This Node.js example is small.
But its implications are large.

It demonstrates that:

Server-authored UI can be asynchronous
Async does not require client-side code
UI timing can be declarative
One runtime can serve many languages

WebForms Core is a powerful stateless server-side technology that provides full remote DOM control. It is an ambitious and radical technology that wants to dethrone React, Vue, and Angular.

It is proposing something different:

A language-independent, rule-driven, time-aware UI architecture.

And that is not a trick.
It is a new category.

DEV Community