DEV Community

Cover image for Everything Automated: No Client Routing, No Manual Mapping, No Frontend State Management, No Build Pipeline, No Separate UI API
Elanat Framework
Elanat Framework

Posted on

Everything Automated: No Client Routing, No Manual Mapping, No Frontend State Management, No Build Pipeline, No Separate UI API

WebForms Core, introduced to the web world in 2024 by the Elanat development team, is a structured response to the growing crisis of frontend complexity and JavaScript fatigue that has challenged the developer community in recent years. WebForms Core is a server-command–driven UI automation framework that minimizes client-side logic while preserving dynamic interactivity.

While mainstream web development paradigms have shifted toward moving all processing, state management, and rendering responsibilities to the browser, WebForms Core introduces a strategic shift through the Commander–Executor model, where:

  • The server acts as the centralized decision-making core.
  • The client is responsible only for executing commands.

WebForms Core

The fundamental objective of this technology is to eliminate the need for manual frontend coding, automate data serialization, intelligently manage events, and ultimately simplify development to the point where mastery of server-side languages alone enables the creation of highly dynamic and complex user interfaces.


Philosophical Foundations and the Necessity of WebForms Core in the Modern Ecosystem

The evolution of the web from static pages to Single Page Applications (SPAs) led to the emergence of heavyweight frameworks such as:

  • React
  • Angular
  • Vue.js

However, this evolution came at significant cost:

  • Increased JavaScript bundle sizes
  • Complex state management (Redux, Vuex, Context API)
  • SEO challenges
  • Separation of frontend and backend teams
  • Growing developer burnout from constant context switching

WebForms Core proposes a model in which automation is not a feature — it is the backbone of the system.

In this architecture:

  • WebFormsJS acts as a lightweight interpreter in the client.
  • It automatically converts server-issued commands into DOM changes.
  • No manual DOM diffing, mapping, or JavaScript orchestration is required.

Conceptually inspired by Microsoft ASP.NET Web Forms, WebForms Core eliminates its historical weaknesses such as:

  • Heavy ViewState
  • Platform dependency
  • Lack of HTML control

WebForms Core is a bidirectional protocol where:

  • Heavy execution occurs client-side via WebFormsJS.
  • Control logic is issued as Action Control commands from the server.

Developers are freed from:

  • Manual AJAX implementation
  • DOM event wiring
  • Server-client synchronization management
  • Building and maintaining separate REST/GraphQL APIs for UI interactions

Architectural Comparison

Parameter Modern SPA Frameworks WebForms Core
Decision Authority Client (JS logic) Server (central business logic)
Core Library Size 200–500 KB 40–110 KB (WebFormsJS)
State Management Manual (Redux, Vuex, Context API) Automatic (Stateless relative to DOM)
UI Update Mechanism Virtual DOM diffing Direct Action Control execution
Data Serialization Manual (JSON.stringify / Fetch API) Automatic based on form type and content
SEO Requires SSR / prerendering Natively SEO-friendly (HTML-first)
Development Complexity High (multiple layers) Very Low (server-centric development)

Action Controls Architecture: The Automated Language of Server–Client Interaction

The heart of automation in WebForms Core is the Action Controls protocol, designed in a lightweight INI-based format to minimize bandwidth consumption.

Instead of returning:

  • Entire HTML pages
  • Or large JSON payloads that require client-side interpretation and mapping

The server sends compact command blocks under the [web-forms] header.

Each line represents a direct operational instruction automatically executed by WebFormsJS.

An Action Control consists of:

  1. Operational code (first two characters)
  2. Tag definition (target identification)
  3. Target value

Examples:

  • st → Set Text
  • bc → Background Color

The protocol is transport-agnostic (HTTP, WebSocket, SSE)


Automatic Tag Identification System

WebForms Core eliminates the need for querySelector or JavaScript DOM lookups through a flexible text-based pattern system.

Elements can be targeted via:

  • ID – Simply by mentioning the ID name
  • Name – Using parentheses like (name). If a number follows, the corresponding index is selected
  • Tag Name – Using angle brackets like <tag>. This also supports indexing
  • Class Name – Using curly braces like {class}
  • CSS Query – Using the asterisk * followed by a query string
  • Reference targeting (-) – The dash character refers to the last identified tag, dramatically reducing server response size

Server-side examples:

form.SetText("myId", "Hello");
form.SetBackgroundColor("<form>", "red");
Enter fullscreen mode Exit fullscreen mode

No frontend code required. All UI changes are managed through simple server-side method calls.


Automated Request–Response Lifecycle

In traditional frameworks, developers must:

  • Listen for submit
  • Call preventDefault
  • Manually collect data
  • Use fetch with proper error handling
  • Manage loading states
  • Handle responses and update UI accordingly

In WebForms Core, this chain is fully automated:

  • Simply adding web-forms.js to the page header automatically:
    • Injects PostBack logic into submit inputs
    • Injects GetBack logic into <a target="_self"> tags
    • Handles all data collection and submission
Lifecycle Stage WebForms Core Automatic Action Developer Role
Event Identification Automatic PostBack/GetBack injection into submit buttons and <a> tags Standard HTML design
Data Collection Automatic serialization; Multipart detection for file uploads Define Input tags with proper Name attributes
Request Differentiation Automatic addition of Post-Back: true header for server-side identification Check for Post-Back header
Response Processing Automatic interpretation of Action Controls and DOM updates Call WebForms class methods on the server
Navigation Management Uses Service Worker and routeAlias for partial page updates Build pages and manage routes on the server

Intelligent Serialization & Smart Form Submissions (v2.0)

WebForms Core automatically handles data serialization based on content type:

  • Automatically detects multipart forms (file uploads → FormData)
  • Encodes standard forms as URL-encoded strings automatically
  • Adds a custom Post-Back: true header to all interactive requests

In version 2.0, this automation reaches a new level with Smart Form Submissions:

  • The client monitors changes using checksums (Checksums)
  • Only fields that have actually been modified are sent to the server
  • Unchanged fields are excluded from the request

Benefits:

  • Dramatically reduced bandwidth consumption
  • Reduced server validation load for unchanged data
  • Significantly improved performance, especially in forms with many fields

Practical Comparative Examples

Example 1: Rendering 196 Countries in a Dropdown

In React:

  • Create a backend API endpoint returning JSON data
  • Write JavaScript to fetch data with useEffect
  • Manage loading, error, and success states
  • Iterate through the data with .map()
  • Manually construct <option> elements
  • Render to DOM

In WebForms Core:

Server-side loop:

foreach (var country in countryList)
{
    form.AddOptionTag("country", country.Id, country.Name);
}
Enter fullscreen mode Exit fullscreen mode

Server automatically generates compact Action Control commands:

[web-forms]
aocountry=1|USA
aocountry=2|Italy
aocountry=3|France
...
Enter fullscreen mode Exit fullscreen mode

WebFormsJS on the client automatically receives these commands and inserts the elements into the appropriate tag.

Result: No client-side loop, no fetch calls, no state management, and complete elimination of frontend "code clutter." A backend developer can manage complex UIs without frontend expertise.


Example 2: Dynamic Style and Element State Changes

Consider a scenario where, after a button click, you need to:

  • Change the form's background color
  • Display a success message to the user
  • Disable the button
  • Automatically remove the message after 3 seconds

In WebForms Core, this is accomplished with a few lines of server-side code:

WebForms form = new WebForms();
form.SetBackgroundColor("<form>", "green");
form.AddTag("<form>", "h3");
form.SetText("<h3>", name + "! Your message was successfully sent.");
form.SetDisabled("(button)", true);
form.Delete("<h3>");
form.AssignDelay(3);
Write(form.Response());
Enter fullscreen mode Exit fullscreen mode

WebForms Core automatically packages these commands into INI format (bc<form>=green, st<h3>=..., sd(button)=1) and executes them on the client. The AssignDelay method automatically creates a timing delay for the previous command (deleting the message) without requiring setTimeout in JavaScript.


Stateless Commander–Executor Architecture

Unlike server-side models such as Blazor Server, which maintain a server memory circuit of the client DOM, WebForms Core:

  • Stores no client DOM snapshot in server memory
  • Performs no diff calculations
  • Maintains no per-user UI state

It follows a precise model: Stateless relative to the DOM

Conceptual Distinction

In this architecture:

  • UI State remains in the browser – All visual states like input values, menu open/closed status, elements added to DOM, and applied style changes stay on the client.
  • The server holds no copy of the client's DOM – Unlike architectures that maintain a "Shadow DOM" or "Circuit" for interactive server-side rendering.
  • Each request is processed independently – The server has no knowledge of the client's current state and doesn't need it.
  • The server only issues commands – Rather than sending data that the client must interpret, the server directly says: "Make tag X green."

This imperative command flow means:

  • Server memory consumption is independent of the number of online users
  • No need for server-side diff calculations between DOM versions
  • Each response contains only new execution commands
  • Near-zero latency and massive scalability

Result: Minimal client-side processing latency, massive scalability, and memory usage completely independent of concurrent user count.


Transient DOM Concept

WebForms Core introduces Transient DOM, an intelligent evolution of the Virtual DOM concept:

  • Multiple server-side DOM changes are batched together
  • Sent to the client in a single transaction
  • Applied all at once to the real DOM by WebFormsJS

Instead of communicating with the client after each change or forcing the client to re-render at every step, WebForms Core packages all modifications into a unified transaction.

Benefits:

  • No visual flicker during updates
  • Dramatically faster UI response time
  • Significantly reduced client workload
  • Elimination of intermediate rendering layers

Automation in Advanced Event Management and Synchronization

In traditional web development, going beyond standard HTML events (like click) requires writing custom JavaScript libraries. WebForms Core 2.0 eliminates this limitation by allowing developers to define new DOM events on the server side. These events are seamlessly attached to client elements and are recognized as first-class browser events.

Additionally, the TriggerEvent method allows the server to automatically execute any event on the client. For example, after completing a heavy server-side process, the server can automatically trigger the submit event of another form or the click event of a hidden button in the user's browser.

This transforms the server from a mere responder into an active orchestrator of the user interface.


Automatic External Data Fetching (Fetch Helper Class v2.0)

Version 2.0 introduces a revolutionary Fetch helper class that completely automates data extraction from external sources. This feature allows developers to command the client to retrieve data from an external API and display it in the UI without writing a single line of JavaScript.

Automatic Data Extraction Methods

WebForms Core supports various data formats, each suited to specific scenarios:

Data Type Method Typical Use Case Automation Advantage
JSON LoadJSON(url, path) REST/GraphQL APIs Supports XPath-like pathing for nested nodes (e.g., user.profile.name); eliminates client-side Async/Await
XML LoadXML(url, xpath) RSS feeds, sitemaps, structured reports Precise element extraction using full XPath standard
INI LoadINI(url, key) Language files, module settings Implement multi-language systems with a few lines of server code; no heavy i18n libraries needed
Plain Text LoadLine(url, line) Log files, line-based reports Direct access to specific text lines without parsing entire files

Process:

  1. The server issues the command
  2. The client performs the "fetch" and "processing" locally
  3. The server is not burdened with the bandwidth of receiving data from third-party APIs
  4. The server only orchestrates the operation

This eliminates:

  • Async/Await complexity in frontend code
  • Manual fetch logic and error handling
  • Heavy third-party client-side libraries
  • State management for external data

Automatic Modular Routing with CodeBehind

When combined with Elanat's CodeBehind framework, WebForms Core creates a completely automated ecosystem for routing and controller management:

  • No manual routing tables – The system automatically maps .aspx file structures to web routes
  • Controllers auto-detected – No need to register controllers manually
  • Modules auto-registered – Simply copy module files to the appropriate path

When a developer wants to add a new section (module) to a website, they only need to copy the relevant files to the specified directory. The framework automatically detects the corresponding controller and establishes WebForms Core communications.

This automatic modularity is one of the greatest advantages of this technology for large enterprise projects where continuous changes and adding new features are routine operations.


Advanced UI Automation Examples

Scenario 1: File Upload with Automatic Preview

In a traditional system, AJAX file upload with simultaneous preview requires managing FileReader in JavaScript and manual submission handling.

In WebForms Core, the server code is remarkably simple:

WebForms form = new WebForms();
form.AddTag("<form>", "h3");
form.AddText("<h3>-1", "File successfully uploaded.");
form.AddTag("<form>", "img");
form.SetAttribute("<form>|<img>-1", "src", FilePath);
form.SetWidth("<form>|<img>-1", 400);
Write(form.Response());
Enter fullscreen mode Exit fullscreen mode

Here, WebForms Core automatically creates the img tag, sets its src attribute, and adjusts its width—all without writing a single line of client-side code.

Scenario 2: Hierarchical Dropdown Menu Module

Creating a tree menu that loads from the server typically requires receiving JSON data and rebuilding the DOM structure on the client.

WebForms Core automates this process by calling a tree menu module using the LoadModule method and the module's specialized functions (such as ddm_AddItem and ddm_Render). The server sends only the menu structure with simple commands, and the system automatically injects the resulting HTML output into the appropriate location (e.g., a tag with a specific ID).


Automated Security and Data Protection

Automation in WebForms Core extends beyond UI to cover security aspects:

  • All business logic remains server-side – The client receives only execution commands
  • Zero risk of sensitive code exposure – Unlike SPAs where business logic often leaks into JavaScript bundles
  • Native server-side validation support – All validations execute on the server
  • Resistance to session management attacks – Due to the stateless nature of the architecture

In version 2.0, a native Unit Testing system is introduced that allows automatically testing the correctness of Action Control execution and DOM changes on the server side. This guarantees UI stability without requiring complex frontend testing tools like Selenium or Cypress.


Real-Time Automation (WebSockets & SSE) with Intelligent Caching

WebForms Core natively manages real-time interactions through built-in support for:

  • WebSocket – Full-duplex communication channels
  • Server-Sent Events (SSE) – One-way server-to-client streaming

The server can push Action Control commands to the browser without any client request. This enables:

  • Live dashboards that update in real-time
  • Chat systems with automatic message display
  • Online monitoring tools with instant alerts
  • Collaborative applications with synchronized UI states

All without manual connection handling on the client side.

Intelligent Caching (v2.0)

Version 2.0 introduces an intelligent caching system that automatically stores Action Control outputs for similar requests. This automation at the storage layer:

  • Dramatically reduces database and CPU load on the server
  • Decreases response times to milliseconds
  • Eliminates redundant processing of identical command sequences

Performance Benchmarks and Automation Metrics

Statistical analysis demonstrates WebForms Core's significant advantage in Server-Centric scenarios across critical performance indicators. Due to the elimination of heavy runtimes (complex Diffing mechanisms), Time to Interactive (TTI) is substantially reduced in typical server-centric projects.

Metric SPA Frameworks (React/Vue/Angular) WebForms Core Improvement Factor
Time to Interactive (TTI) 2–5 seconds < 1 second 2–5x faster
Client Processing Load High (Virtual DOM comparison) Very Low (direct command execution) Significant CPU reduction
Bandwidth Consumption Medium–High (JSON + metadata) Very Low (INI commands) Significant bandwidth reduction
Development Complexity High (multiple layer management) Very Low (server-centric development) Development time reduction

These improvements are not merely claims—they are the direct result of eliminating intermediate layers and automating processes that are performed manually or semi-automatically in other frameworks.


When to Use / When Not to Use

Suitable Scenarios

WebForms Core is particularly well-suited for:

  • Enterprise business applications with complex business logic
  • Admin panels and content management systems
  • Data-driven dashboards and reporting tools
  • CMS and modular systems requiring frequent extensions
  • Server-centric architectures prioritizing control and security
  • Projects where development speed and cost efficiency are critical

Less Suitable Scenarios

It may not be ideal for:

  • Offline-first applications requiring full client-side functionality
  • Highly interactive canvas/WebGL applications (games, design tools)
  • Client-heavy gaming environments
  • Applications requiring full client-side business logic execution
  • Scenarios where the application must function without a server connection

Security Advantages

Because:

  • All business logic remains server-side
  • The client receives only execution commands
  • No sensitive algorithms or business rules are embedded in client bundles

Business rules are never transferred to the client runtime, eliminating an entire class of security vulnerabilities common in SPAs.

Version 2.0 introduces:

  • Native Unit Testing for Action Controls
  • DOM verification without external tools like Selenium or Cypress
  • Built-in protection against common session-based attacks

Conclusion

WebForms Core, developed by Elanat, represents an intelligent redefinition of the server–client relationship in the modern era. By:

  • Eliminating manual frontend coding requirements
  • Automating data serialization and event management
  • Providing intelligent DOM control through Action Controls
  • Introducing an extremely lightweight protocol for server-client communication
  • Removing developer involvement in manual configurations and frontend complexities

This technology has successfully minimized the complexities prevalent in modern frameworks. The primary goal—reducing developer engagement with manual configurations and frontend complexities—has not only been achieved but has become a new standard for rapid, scalable web development.

For organizations seeking:

  • Lower development costs through reduced team specialization requirements
  • Higher security through server-centric architecture
  • Better performance through eliminated intermediate layers
  • Faster scalability through stateless design
  • Simplified maintenance through automatic modularity

WebForms Core offers a fundamentally different, server-empowered paradigm that reclaims control of the user interface from heavy client-side runtimes and restores architectural simplicity to modern web development. It presents a revolutionary approach, distinct from common Client-Centric models, that harnesses the full power of the server in service of the user interface.

Top comments (0)