Introducing a new Front-End Framework
Source: Dev.to
Introduction
WebForms Core — Bringing Server‑Command/Client‑Execution to the Front‑End
The front‑end ecosystem has long been dominated by state‑driven and component‑based frameworks. While these approaches are powerful, they often introduce unnecessary complexity for form‑centric, enterprise, and command‑driven applications.
WebForms Core was created to challenge this assumption.
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.
In this update, WebForms Core introduces two groundbreaking capabilities — WasmBack and FrontBack — enabling WebForms classes to run not only on the server, but also in WebAssembly and directly on the client. As a result, WebForms Core evolves into a truly distributed UI execution model, formalized through a new Commander/Executor architecture.
The Commander/Executor architecture frees the front‑end from state and component dependency, transforming it into a command‑driven model.
This article explores how WebForms Core now works on the front end, how the new FrontBack mechanism enables client‑side execution, and why this approach represents a fundamentally different way of building web interfaces with JavaScript.
How to Work with WebForms Core in Front
This WebForms class is written in JavaScript and is used on the front‑end, unlike other WebForms classes that run on the server or in WebAssembly.
Note – WebForms Core consists of two parts:
• Commander – WebForms classes for all programming languages.
• Executor – A front‑end library called WebFormsJS (physical file nameweb-forms.js).
WebFormsJS is placed only in the<head>of the HTML page; after the initial configuration you interact solely with the WebForms class functions.
Do not confuse this with theWebForms.jsclass used in Node.js (server‑side).
1. Add the WebForms class file
Copy the WebForms class files from the repository below into your project:
- (link to repository)
2. Create a view (HTML) file
Below is a minimal HTML page that loads WebFormsJS and invokes FrontBack on page load. The FrontBack call points to the module that contains your UI logic.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Using WebForms Core</title>
<script src="/path/to/web-forms.js"></script>
</head>
<body>
<button id="Button1">Click me!</button>
<script>
// FrontBack receives the load event and the path to the main module.
window.addEventListener("load", (event) => {
FrontBack(event, "/script/module/main.js");
});
</script>
</body>
</html>Why this approach?
In a typical server‑side scenario you would render the page with the output ofexportToHtmlComment, and WebFormsJS would automatically extract and execute the Action Controls. Because this example uses a static page, we manually triggerFrontBackon theloadevent.
3. Write the main module (/script/module/main.js)
Modules executed via FrontBack must expose a PageLoad function that receives the event argument. Additional arguments can be passed after the event argument if needed.
// /script/module/main.js
import { WebForms, HtmlEvent } from "./WebForms.js";
export function PageLoad(evt) {
const form = new WebForms();
// Register a front‑end click handler for the button.
form.setFrontEvent("Button1", HtmlEvent.OnClick, "/script/module/change-color.js");
// Return the response that WebFormsJS will process.
return form.response();
}4. Write the click‑handler module (/script/module/change-color.js)
When the user clicks the button, this module runs. It demonstrates several WebFormsJS capabilities:
- Adding a new
<h2>tag to the<body>. - Setting its inner text.
- Changing the text color.
- Changing the background color after a delay.
// /script/module/change-color.js
import { WebForms, InputPlace } from "./WebForms.js";
export function PageLoad(evt) {
const form = new WebForms();
// Add <h2> to the body and set its content.
form.addTag("", "h2");
form.setText("", "New H2 Tag");
form.setTextColor("", "orange");
// Change the body background after 2 seconds.
form.setBackgroundColor(InputPlace.tag("body"), "lightgreen");
form.assignDelay(2000);
return form.response();
}After you run the example, clicking Click me! will:
- Insert an
<h2>element with the text New H2 Tag. - Color that text orange.
- After two seconds, turn the page background light‑green.
Getting the Latest WebFormsJS Script
The most recent version of web-forms.js can be downloaded from the official repository:
- (download link)
Conclusion
WebForms Core’s FrontBack mechanism demonstrates how a command‑driven architecture can replace the traditional state‑centric, component‑heavy front‑end models. By moving UI logic into reusable WebForms classes that execute on the client (or in WebAssembly), developers gain:
- Unified code across server, WebAssembly, and client.
- Reduced bundle size – only the lightweight WebFormsJS executor is needed in the browser.
- Clear separation of what should happen (Commander) from how it is executed (Executor).
Give it a try in your next enterprise or form‑heavy application and experience a leaner, more maintainable front‑end workflow.
FrontBack and WasmBack: A Distributed UI Execution Framework
With the introduction of FrontBack and WasmBack, WebForms Core moves beyond its original server‑centric model and becomes a fully distributed UI execution framework. By embracing the Commander/Executor pattern, it offers a unified way to define UI behavior once and execute it across the server, WebAssembly, and the browser.
Unlike conventional front‑end frameworks that rely on virtual DOMs, component trees, or reactive state management, WebForms Core takes a command‑oriented approach. UI changes are expressed as explicit, serializable commands and executed by a lightweight front‑end executor, keeping the client simple and predictable.
This model is especially powerful for form‑driven applications, enterprise systems, and projects where consistency between back‑end and front‑end logic is critical. At the same time, the new FrontBack capability opens the door to modern client‑side interactivity without sacrificing architectural clarity.
WebForms Core is designed to completely replace any front‑end framework. This technology introduces a powerful alternative paradigm—one that prioritizes control, portability, and implementation transparency.