DEV Community

Cover image for 30 Facts About WebForms Core Technology - Part Three: Get Ready to Go Back
Elanat Framework
Elanat Framework

Posted on

30 Facts About WebForms Core Technology - Part Three: Get Ready to Go Back

#javascript #devops #dotnet #webformscore

WebForms Core introduces innovative and transformative concepts in web development. WebForms Core is considered a revolutionary technology in the web world and will have a significant impact on the development process in the 2020s. While web development has migrated from the Backend approach to the Frontend, WebForms Core, with its server-centric approach, simultaneously benefits from the server-side and client-side, creating a serious challenge for front-end frameworks. This technology combines the simplicity of server-side management with modern performance and interactivity capabilities.

WebForms Core is a modern technology with Lazy Load capability that avoids the transfer of several megabytes of JavaScript libraries and provides better performance compared to front-end frameworks. In addition, it reduces the number of lines of code required and supports Drag & Drop. It also provides access to the mouse position on the screen and keystrokes, which help in developing complex user interfaces.

Why WebForms Core is Revolutionary?

WebForms Core is a revolutionary technology because it fundamentally redefines how web applications are built and operated by shifting most of the complexity from the client to the server, streamlining development, improving performance, and enhancing scalability. Its server-centric model, combined with automatic client-server synchronization, offline capabilities, and support across multiple languages, marks a significant departure from traditional front-end and back-end paradigms dominated by JavaScript frameworks and REST/GraphQL APIs. While it leverages existing web standards like HTML, HTTP, and WebSocket, the way it orchestrates DOM manipulation, data transfer, and UI updates primarily from the server—without relying heavily on client-side JavaScript—introduces a novel approach that could reshape web development workflows and architectures. This convergence of features and architectural shifts positions WebForms Core as a potentially groundbreaking advancement in web technology, worthy of being called revolutionary.

Back to WebForms Core

This article is the final part in the "30 Facts About WebForms Core Technology" series, where we look at 10 more aspects of WebForms Core technology. We start this article with a good example comparing WebForms Core technology to a front-end development approach.

Server-Side Processing Without Overhead

In WebForms Core technology, the server efficiently generates action control codes and reduces server processing. It generates an INI instead of JSON, and in this respect, it sends lighter data than front-end frameworks. In fact, the server sends small commands in INI format, reducing bandwidth and improving data transfer performance. The INI format leads to automatic UI updates; the server responds with action control commands that WebFormsJS interprets to dynamically update the DOM and also easily updates specific parts of a page without reloading. This method simplifies server-client communication, improving overall performance, responsiveness and user experience.

Note: INI commands sent by the server to the client are sent automatically, and the developer only needs to call the methods of the WebForms class on the server.

Example

WebForms class methods

public void InsertClass(string InputPlace, string Class)
{
    WebFormsData.Add("ic" + InputPlace, Class);
}

public void Delete(string InputPlace)
{
    WebFormsData.Add("de" + InputPlace, "1")
}
Enter fullscreen mode Exit fullscreen mode

The above codes are part of the methods of the WebForms class on the server that create Action Control codes on the server (for the purpose of sending to the client). As you can see, generating the codes is a simple and lightweight process and does not require rendering or heavy operations on the server.

Using WebForms class methods

WebForms form;

form.InsertClass("<p>3", "my-class");
form.Delete("TextBox1");
Enter fullscreen mode Exit fullscreen mode

The above codes show how to call the methods of the WebForms class.

Action Controls response

[web-forms]
ic<p>3=my-class
deTextBox1=1
Enter fullscreen mode Exit fullscreen mode

As you can see, the server response to the client is also very small and consumes little bandwidth because only commands to apply changes to HTML tags are sent from the server to the client.

JSON in Front-End vs INI in WebForms Core

Let's compare and examine the WebForms Core technology with the front-end development approach with a practical example.

Front-end development approach: In this approach, APIs are created on the server and the data is serialized in JSON format. On the client, JavaScript is responsible for receiving JSON data from the API route to apply the data to HTML tags after receiving it.

Creating and sending JSON data

List<ContentCategory> categories = await _context.ContentCategories.ToListAsync();

string json = JsonSerializer.Serialize(categories);

Write(json);
Enter fullscreen mode Exit fullscreen mode

According to the above code, the data in the "ContentCategory" class is serialized in JSON format and the response to the client request is printed on the output.

What is sent from the server to the client:

JSON

[
  {"id": 1, "name": "Technology"},
  {"id": 2, "name": "Science"},
  {"id": 3, "name": "Art"}
  {"id": 4, "name": "Sport"}
]
Enter fullscreen mode Exit fullscreen mode

According to the JSON format above, the minified data size is 102 characters.

The following JavaScript, after receiving JSON data from the server, converts the data into an option tag and adds it to the select tag.

HTML and JavaScript

<select id="category"></select>

<script>
  const apiUrl = 'YOUR_API_ENDPOINT_HERE'; // Replace with your actual API URL

  async function fillSelect() {
    try {
      const response = await fetch(apiUrl);
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      const categories = await response.json();

      const selectElement = document.getElementById('category');
      selectElement.innerHTML = ''; // Clear existing options

      categories.forEach(category => {
        const option = document.createElement('option');
        option.value = category.id;        // Assuming 'id' is the identifier
        option.textContent = category.name;  // Assuming 'name' is the display text
        selectElement.appendChild(option);
      });
    } catch (error) {
      console.error('Failed to load categories:', error);
    }
  }

  fillSelect(); // Call the function to populate the select element
</script>
Enter fullscreen mode Exit fullscreen mode

As you can see, in the front-end development approach, the less server code there is, the more JavaScript code there is, and we face the problem of code clutter.

WebForms Core Development Approach: In this approach, data is usually applied to the HTML tags with the same first request of the HTML page (the number of requests in WebForms Core technology is less than in the front-end development approach). However, for a better comparison, we send data via API. In this approach, data is created via the WebForms class on the server, and the data is sent in INI format to the WebFormsJS library on the client, which applies the data to the HTML tags after receiving it.

Creating and Sending INI Data

List<ContentCategory> categories = await _context.ContentCategories.ToListAsync();

WebForms form = new WebForms();

foreach (var category in categories)
    form.AddOptionTag("category", category.Name, category.Id);

Control(form, true);
Enter fullscreen mode Exit fullscreen mode

According to the above code, using the methods of the WebForms class, the data in the ContentCategory class is added as commands to the option tag on the select tag. The data is sent in INI format after the client request.

What is sent from the server to the client:

Action Controls (INI)

[web-forms]
aocategory=1|Technology
aocategory=2|Science
aocategory=3|Art
aocategory=4|Sport
Enter fullscreen mode Exit fullscreen mode

The INI data size above is 96 characters
Compared to the front-end approach, the data sizes are close to each other and sometimes the JSON sent from the INI sent by WebForms Core technology may be smaller or larger.

Note: In future updates, we plan to consider the use of the dash character "-" as the previous input place. Therefore, the Action Controls data will be sent with a smaller size.
Example:
Action Controls (INI)

[web-forms]
aocategory=1|Technology
ao-=2|Science
ao-=3|Art
ao-=4|Sport
Enter fullscreen mode Exit fullscreen mode

As an example with future optimizations, only 75 characters are sent here.

HTML

<select id="category"></select>
Enter fullscreen mode Exit fullscreen mode

As is clear, in the WebForms Core approach, in addition to the server code being minimal, there is no need for JavaScript code and only HTML is sufficient.

There are many of them and we are faced with the problem of code clutter.

The "AddOptionTag" method used is also simply obtained from the sum of several strings and does not require heavy processing.

public void AddOptionTag(string InputPlace, string Text, string Value, bool Selected = false)
{
    WebFormsData.Add("ao" + InputPlace, Value + '|' + Text + (Selected ? "|1" : ""));
}
Enter fullscreen mode Exit fullscreen mode

Finally, we conclude that:

  • Serialization is a complex operation and requires more processing on the server than the operations of WebForms classes.
  • The size of INI data sent by WebForms Core technology is almost equal to the data sent in JSON format.
  • The WebForms Core approach is simple and in it the HTML remains very clean and untouched.

Rapid Development

By eliminating the need for front-end development, the development process of systems is faster. WebForms Core accelerates the development process by reducing the need for complex client-side programming. In this framework, developers can focus mainly on server-side logic, as the bulk of UI rendering is done automatically.

The technology’s server-side architecture enables dynamic content updates and reduces development time. There is also less effort required to manage changes and implement new features. Development teams will be able to test and iterate on their ideas faster without getting bogged down in the complexities of front-end frameworks.

This process accelerates the deployment cycle, as WebForms Core, with its server-side architecture and powerful server-side methods, facilitates rapid prototyping and application deployment. This technology has brought development to a level where a specific path is managed on the server side for each client request. Using WebForms Core technology, we are moving from the current back-end and front-end era back to the server-client era. As a result, web designers and programmers can independently advance the web development process without depending on each other.

Supports WebSocket Protocol

WebForms Core support for the WebSocket protocol enables real-time, two-way communication between the client and the server. This feature allows developers to create applications that require immediate data updates, such as chat applications, live dashboards, or collaborative tools, enhancing user interaction and engagement through real-time, real-time data exchange. Sending one-way responses from the server to the client provides developers with a powerful framework that can easily control the structure of the page without the need to prepare complex JavaScript structures on the client.

Stunning Performance of Action Controls Over WebSocket

In WebForms Core technology, you can take advantage of the high potential of Action Controls by using the WebSocket protocol.

In WebForms Core technology, the connection to WebSocket is automatic. After the WebSocket connection is established, you can control the HTML tags from the server side using the WebForms class without the client requesting it.

The following image shows the operation of WebForms Core technology after the WebSocket connection.

WebSocket in WebForms Core Technology

Server-Based Web Modernization

WebForms Core integrates easily with existing web projects and helps revitalize traditional server-based projects by adding modern interactive capabilities. The technology’s compatibility with server-based architectures allows for the upgrade of legacy systems without the need for a complete rewrite, making it a viable option for improving the user experience and adding dynamic capabilities to existing applications.

WebForms Core also simplifies the migration process of legacy web applications and enables their easy integration. This technology helps modernize legacy applications and server-heavy systems without the need for a complete rewrite of the user interface code. As a result, legacy systems can benefit from WebForms Core’s advanced features, improved performance, and better maintainability, while still maintaining their previous user interface.

High Compatibility

High Compatibility: WebForms Core is designed with compatibility in mind and works seamlessly with modern programming languages ​​and back-end frameworks and it aligns with best practices in software development such as MVC, MVVM, MVP and more. Whether you are using popular frameworks like .NET, Django, Spring. or Express.js, in standalone custom environments, or in a simple API with minimal features, this solution maintains stable performance and continuous integration capabilities. This high level of compatibility enables developers to integrate WebForms Core into their existing technology stacks without major challenges or additional overhead. The solution is fully compatible with today's web development standards and modern infrastructures such as progressive web apps (PWAs) and single-page applications (SPAs), client-side state management, bandwidth optimization, and more.

Status Management

WebForms Core includes advanced mechanisms for complex user interaction. This technology handles the most complex UI states and provides real-time UI updates without reloading the page, enhancing the user experience. It handles complex state management more efficiently than many front-end frameworks. If the Action Controls directive is not used in the server response, WebFormsJS recognizes that the received data is a part of the HTML page and automatically places that part in the designated tag.

WebForms Core provides various ways to select and manipulate DOM elements, providing flexibility in how developers interact with the user interface. When you use WebForms Core, you will enjoy working with HTML and the high capacity of form tags.

Example

ID

// Pattern
// InputPlace.Id(Id)
// Id

// Example
form.Delete(InputPlace.Id("id"));
form.Delete("id");
Enter fullscreen mode Exit fullscreen mode

Name

// Pattern
// InputPlace.Name(Name, {Index})
// (Name)

// Example
form.Delete(InputPlace.Name("name"));
form.Delete("(name)");
form.Delete(InputPlace.Name("name", 2));
form.Delete("(name)2");
Enter fullscreen mode Exit fullscreen mode

Tag

// Pattern
// InputPlace.Tag(Tag, {Index})
// <Tag>

// Example
form.Delete(InputPlace.Tag("p"));
form.Delete("<p>");
form.Delete(InputPlace.Tag("p", 4));
form.Delete("<p>4");
Enter fullscreen mode Exit fullscreen mode

Class

// Pattern
// InputPlace.Class(Class, {Index})
// {Class}

// Example
form.Delete(InputPlace.Class("my-class"));
form.Delete("{my-class}");
form.Delete(InputPlace.Class("my-class", 1));
form.Delete("{my-class}1");
Enter fullscreen mode Exit fullscreen mode

Query

// Pattern
// InputPlace.Query(Query)
// *Query

// Example
form.Delete(InputPlace.Query("#id .class"));
form.Delete("*#id .class"); // Never use it
Enter fullscreen mode Exit fullscreen mode

Query All

// Pattern
// InputPlace.QueryAll(Query)
// [Query

// Example
form.Delete(InputPlace.QueryAll("#id div"));
form.Delete("[#id div"); // Never use it
Enter fullscreen mode Exit fullscreen mode

Current DOM

// Pattern
// InputPlace.Current
// $

// Example
form.Delete(InputPlace.Current);
form.Delete("$");
Enter fullscreen mode Exit fullscreen mode

Target DOM

// Pattern
// InputPlace.Target
// !

// Example
form.Delete(InputPlace.Target);
form.Delete("!");
Enter fullscreen mode Exit fullscreen mode

Child

// Pattern
// InputPlace.AppendPlace(InputPlace)
// |

// Example
form.Delete("id".AppendPlace("<b>1"));
form.Delete(InputPlace.Id("id").AppendPlace(InputPlace.Tag("b", 1)));
form.Delete("id|<b>1");
Enter fullscreen mode Exit fullscreen mode

Parrent

// Pattern
// InputPlace.AppendParrent()
// /

// Example
form.Delete("{my-class}4".AppendParrent().AppendParrent());
form.Delete(InputPlace.Class("my-class", 4).AppendParrent().AppendParrent());
form.Delete("//{my-class}4");
Enter fullscreen mode Exit fullscreen mode

Upper

// Pattern
// InputPlace.Upper
// -

// Example
form.Delete(InputPlace.Tag("form"));
form.Delete(InputPlace.Upper);
form.Delete("<form>");
form.Delete("-");
Enter fullscreen mode Exit fullscreen mode

Note: Upper is a new feature that will be added later to the new version of WebForms Core technology:

Lazy Loading

Unlike traditional JavaScript, which requires scripts to be sent to the client before an event can be processed, WebForms Core only sends response data when an event is triggered. This means bandwidth is used more efficiently because the server responds only when necessary, reducing unnecessary data transfer. As a result, WebForms Core can deliver a more optimized experience with less client-side processing, leading to faster, more efficient interactions.

Web systems built with WebForms Core On initial load, the browser receives an HTML page and the WebFormsJS library. On subsequent loads, the browser will receive only the HTML page. This system can be configured so that on secondary requests (after the first load in the browser), only the content of the page is sent to the browser. In this technology, the server waits statelessly for the client request; therefore, there is no need to consume bandwidth for pre-prepared responses on the client. The server response includes Action Controls that are sent only after the request is sent. This feature is the lazy loading feature of WebForms Core technology.

In WebForms Core technology, the client cannot make any predictions about the server response before sending the request. The server response, regardless of its content, is interpreted by WebFormsJS and then applied to the HTML page. This feature makes the system flexible in terms of security and configuration; Because the client, without having any prior information, only interprets the response received from the server. This approach can prevent possible abuses and prevent the client from predicting or simulating the server's behavior.

If we want to compare this technology with other similar technologies, we can say that in systems built with front-end frameworks, JavaScript libraries on the client side cause most of the web structure to be executed on the client side and the possibility of system imitation is high. However, in WebForms Core, the possibility of copying and simulating the system is lower, because the data flow is controlled unpredictably on the server side.

It is Different from Microsoft's Former Web-Forms

WebForms Core is similar to Microsoft's former Web-Forms in name only, as well as its server-side architecture. The technology is not proprietary to Microsoft and was developed and published by Elanat. WebForms Core represents a significant evolution of Microsoft's traditional Web-Forms framework. While Microsoft's deprecated Web-Forms aimed to simplify web application development in the Microsoft ecosystem, it often led to challenges related to scalability, testability, and modern web standards. On the other hand, WebForms Core inherits all the advantages of Microsoft's Web-Forms, completely addressing its structural problems, and is designed to be lighter, more flexible, and more compatible with contemporary web development practices. The framework effectively separates the user interface from the business logic, supports multiple languages, and emphasizes performance and simplicity, making it better suited for modern, scalable web applications.

Image description

Note: Microsoft's dry and soulless .NET development team failed to address the numerous bugs of the former Web-Forms and abandoned it.

List of benefits of former Microsoft Web-Forms that WebForms Core inherits:

  • Rapid Development (RAD)
  • Easy to Learn and Use
  • State Management
  • Separation of Concerns
  • Event-Driven Model
  • Browser-Independent Rendering
  • Server-Side Control Management

List of disadvantages of former Microsoft Web-Forms that WebForms Core does not have:

  • Limited Control Over HTML Output & JavaScript
  • Heavy ViewState and Performance Issues
  • Lack of Clear Architectural Pattern and Separation of Concerns
  • Complexity with Event Handling and Page Life Cycle
  • Page Reload
  • Maintenance Overhead
  • Memory and Bandwidth Overhead
  • Server Processing
  • Specific to the .NET Framework
  • Lack of Offline Capability
  • Need for Markup in HTML
  • Lack of HTML Events Support

First, it Updates for CodeBehind

After testing and confirming the performance in stable conditions, WebForms Core versions are first developed for the CodeBehind framework. At the same time, a new version of the WebFormsJS library is also released independently in the GitHub repository. However, our strategy for updating WebForms classes related to server-side programming languages ​​is designed in such a way that it is not possible to update these classes immediately. The Elanat team plans to update the WebForms classes twice a year in accordance with the latest changes and improvements in the new version of the WebFormsJS library.

CodeBehind framework

If you are not using the CodeBehind framework, you can easily use the WebForms Core technology; however, its integration into the core back-end framework gives you a better experience of interacting with this technology. WebForms Core technology is integrated as a feature into the CodeBehind framework core and allows for automatic rendering of views along with Action Control codes in one go.

Note: You can ask the backend framework development teams to integrate WebForms Core technology into the core of your desired framework. We have explained how to integrate WebForms Core technology into backend frameworks in the following example:
How WebForms Core Technology Works in Back-End Frameworks

Continuous Development

WebForms Core technology was introduced in 2024, and it has been 11 months since the first version was released. Version 1.8 is now being released, and the technology has matured significantly during this time. Each new version of WebForms Core comes with increased capabilities and performance optimizations, allowing for better management of the server request-response cycle.

The Elanat team is constantly working on improving WebForms Core and maintains an active list of new features. These features are added to new versions after careful review and detailed analysis to provide the best experience for developers. In addition to adding new features, each new version comes with architectural optimizations and improvements to previous processes, which increase processing speed, reduce code complexity, and improve overall performance.

In fact, the Elanat team is constantly examining examples of complex user interfaces on the web and looking for ways to develop capabilities that enable the creation of advanced interactive user interfaces. WebForms Core technology is moving towards providing features that can create a Figma-like experience, complete with graphics processing, advanced animations, 3D interactions, and even web games.

We are currently adding support for transient DOM in WebFormsJS and will soon see the smooth operation of WebForms Core technology in a new version of this library. Features such as WASM support, SendBack method, and checksum status checking are planned to be gradually added to WebForms Core capabilities.

Conclusion

After examining these ten facts, one thing becomes clear: the glorification of the front-end has gone too far. We've handed over responsibilities that were never meant to leave the server—state management, routing, rendering logic—and in doing so, created complexity disguised as innovation.

WebForms Core doesn't just bring these responsibilities back to the server—it reminds us why they belonged there in the first place.

Do we really need reactive JavaScript frameworks managing state with three different caching layers?
Is it wise to split our logic across multiple stacks, languages, and teams just to render a button?
Why have we normalized code duplication, hydration headaches, and fragile client-side validation?

The front-end revolution promised speed and flexibility, but at what cost? WebForms Core offers a different path—one where the server remains in control, the client stays simple, and the architecture respects coherence over chaos.

It's time we question the modern front-end dogma.
Because maybe—just maybe—the server was the king all along.

Please share your thoughts on WebForms Core technology with us.

Top comments (3)

Collapse
 
nathan_tarbert profile image
Nathan Tarbert •

Growth like this is always nice to see kinda makes me wonder what keeps stuff like this moving forward for years not just the first launch

Some comments may only be visible to logged-in visitors. Sign in to view all comments.