30 Facts About WebForms Core Technology - Part One: Let's Hug the Server
#html#javascript#webdev#webformscore
Elanat Framework

Elanat Framework @elanatframework

About: Elanat Team

Joined:
Jun 21, 2023

30 Facts About WebForms Core Technology - Part One: Let's Hug the Server

Publish Date: May 22
0 0

WebForms Core is an innovative web development technology introduced by Elanat in 2024. In this system, HTML tags are managed via the server, providing a development experience similar to desktop applications. It establishes a bi-directional automatic connection between the server and client, where client-side requests sent to the server are entirely HTML-based, and server-side data is generated through the WebForms class, then sent to the WebFormsJS library on the client side. To use this technology, simply add the WebFormsJS script to the <head> section of your HTML page and include the server-side WebForms class in your web project. This allows HTML tags to be manipulated easily using the methods of the WebForms class.

Why should we use WebForms Core?

Server Communication Needs: Most web-based systems require server interaction for over 90% of their operations, such as a content management system that must connect to the server for adding, deleting, and editing content. WebForms Core enables HTML tag control directly through the WebForms class on the server without needing JavaScript or front-end frameworks.

Optimized Bandwidth Usage: Traditional front-end frameworks require preloading JavaScript libraries for handling requests, sometimes causing multiple server calls to fetch additional libraries. However, WebForms Core eliminates unnecessary bandwidth usage before the actual interaction. This lazy loading approach ensures optimal performance by avoiding unnecessary data transfers before user engagement.

WebForms Core offers numerous advantages, making it an appealing choice for web development. This article is the first installment in a series exploring 30 key insights about this technology, covering 10 essential topics about WebForms Core. Two more articles will follow, each detailing 10 additional insights.

Tired of juggling front-end frameworks? WebForms Core lets you manage the DOM from the server!

WebForms Core

Note: All the examples provided in this article are built on the CodeBehind framework. WebForms Core technology is integrated as one of the core features of this framework.

Unified Server-Side Management

WebForms Core is server-centric, meaning HTML tag manipulation happens on the server rather than the client. WebForms Core allows you to manage all HTML DOM elements directly from the server, eliminating the need for separate front-end development and offering the benefits of back-end and front-end programming in a single model, resulting in a full-stack application development experience but without the complexities of the front-end. It dynamically edits, adds or removes HTML tags on the server side with simple commands, dynamically changes CSS properties, styles and classes and attributes, supports tag parameterization and can easily target specific tags or their parent/child elements.

Example

WebForms form = new WebForms();

form.AddOptionTag("ProgrammingLanguages", "C#", "csharp");
form.AddOptionTag("ProgrammingLanguages", "Python", "python");
form.AddOptionTag("ProgrammingLanguages", "JavaScript", "javascript");

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

In the above example, several new option tags are added to the select tag with the ID "ProgrammingLanguages".
The select tag after the server response will look like this:

<select id="ProgrammingLanguages">
    <option value="cpp">C++</option>
    <option value="php">PHP</option>
+   <option value="csharp">C#</option>
+   <option value="python">Python</option>
+   <option value="javascript">JavaScript</option>
</select>
Enter fullscreen mode Exit fullscreen mode

Faithful to HTML

This technology uses xmlHttpRequest to send client data, adhering to HTML standards but without reloading pages. In the simplest case, if the server response is not an Action Control command, it places the server response in the designated tag. In this technology, the persistence buttons automatically receive the click event and the data is sent via form submission in HTML, considering the GET and POST methods.

Submit information by submitting a form

<!DOCTYPE html>
<html>
<head>
    <title>WebForms Core Example</title>
+   <script type="text/javascript" src="/script/web-forms.js"></script>
</head>
<body>
    <h1>Contact Us</h1>
    <form action="/contact" method="post">
        Name:<input type="text" name="name" required><br>
        Email:<input type="email" name="email" required><br>
        Message:<br><textarea name="message" rows="4" cols="50" required></textarea><br>        
        <input type="submit" name="button" value="Submit">
    </form>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

In the HTML page above, the WebFormsJS script has been added to the head section.

What is sent from the client to the server?

In WebForms Core technology, data is sent as if it were an HTML page form submission.

message=Please send your product price list to my email account.&email=Adriano@gmail.com&name=Adriano&button=Submit
Enter fullscreen mode Exit fullscreen mode

As shown in the image below, we can receive the received data on the server and send the appropriate response to the client.

Send data to server by WebForms Core technology

Configurable for CSR and SSR

This technology can be configured for both client-side rendering (CSR) and server-side rendering (SSR) and implements the desired structure. On the client-side (CSR), after the browser renders the minimum HTM, the page content can be dynamically completed via additional server requests. It can also be implemented according to Server-Side Rendering (SSR), where the server generates the complete HTML for each page load. This flexibility increases performance by allowing developers to choose the rendering approach that best suits their application needs.

It is recommended to use CSR for pages that have a lot of requests. CSR mode first fetches the HTML template and then requires an additional request from the server to initialize the HTML tags with dynamic data. However, SSR mode requests the entire HTML page from the server only once. The choice between CSR and SSR depends on factors such as performance needs, SEO considerations, and user experience expectations.

Example

@page
@controller CsrModeController
<!DOCTYPE html>
<html>
<head>
    <title>WebForms Core CSR Example</title>
    <script type="text/javascript" src="/script/web-forms.js"></script>
</head>
<body>
    <h1>Latest Articles</h1>
    <main>
        <div class="content">
            <h2></h2>
            <p></p>
            <b>View: </b> 
            <p class="category">Category: <a href="/categories/"></a></p>
        </div>
    </main>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

In this example, a static HTML page is sent to the client first. In this page, a template has been added for the content list, which is initialized after a short delay.

using CodeBehind;

public partial class CsrModeController : CodeBehindController
{
    public void PageLoad(HttpContext context)
    {
        if (context.Request.Query.ContainsKey("fill-content"))
        {
            Body_OnLoad();
            return;
        }

        WebForms form = new WebForms();

        form.SetGetEvent("<body>", HtmlEvent.OnLoad, "?fill-content");

        Control(form);
    }

    private void Body_OnLoad()
    {
        WebForms form = new WebForms();

        form.SaveText("<main>");
        form.DeleteText("<main>");

        foreach (var content in contents)
        {
            form.AddText("<main>", Fetch.Saved());

            form.AddText("{content}-1|<h2>", content.Title);
            form.AddText("{content}-1|<p>", content.Description);
            form.AddText("{content}-1|<b>", content.Views);
            form.AddText("{category}-1|<a>", content.Category);
            form.AddAttribute("{category}-1|<a>", "href", content.Category.ToLower().Replace(" ", "-"));
        }

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

In the above controller class, first the OnLoad event is added according to the path (here query) "?fill-content" in the body tag. In this example, after the HTML page is called in the browser, according to the OnLoad event of the body tag, the path "?fill-content" is requested. On the server, this path is handled and first the values ​​inside the main tag are stored (content template). Then, with a loop, the template is continuously added to the main tag and then initialized. Finally, the response is sent to the client.

The advantages of using this method are reduced server processing and reduced bandwidth usage. In this example, the template is received once but is repeated and initialized multiple times on the client.

Note: This was a simple example of CSR functionality; you can use other strategies using the various capabilities of WebForms Core technology.

Event-Driven Architecture

WebForms Core offers high flexibility by enabling dynamic updates without constant server communication. The technology supports an event-driven architecture that responds to user interaction in real time and allows parts of the page to update independently. This flexibility makes it suitable for integration into various architectural patterns such as MVC, MVP, MVVM or presentation only, giving developers the freedom to choose the best one for their project needs.

Using WebForms Core technology, you can assign multiple events to DOM elements in HTML. Each event triggers a request to a server-defined route. These routes correspond to specific handlers that execute logic and optionally update parts of the UI.

Example

WebForms form = new WebForms();

form.SetGetEvent("<body>", HtmlEvent.OnLoad, "?body-onload");
form.SetGetEvent("<h2>", HtmlEvent.OnMouseEnter, "?h2-mouseenter");
form.SetGetEvent("Textarea1", HtmlEvent.OnDoubleClick, "?textarea-dblclick");

Control(form);
Enter fullscreen mode Exit fullscreen mode

The above example shows how to bind client-side HTML events to server routes using WebForms Core. In this case, query strings (e.g., ?body-onload) are used to represent those routes. When the specified events occur on the client side, WebForms Core sends a request to the corresponding server endpoint, allowing the server to handle the event and respond dynamically.

Automatic Communication

WebForms Core automates the communication between the server and the client, eliminating the need for manual scripting or complex AJAX calls. When the UI needs to be updated, calling WebForms class methods on the server causes action control commands to be sent directly to the client, and the client (WebFormsJS) then interprets these commands and executes them to dynamically update the DOM. This automatic synchronization ensures a responsive user experience and simplifies development, as developers do not need to write client-server communication code. In this technology, the problem of page reloading does not occur, and the state of the HTML page is maintained on the client. The server also detects the state of the page solely based on subsequent requests from the client.

Communication in WebForms Core

To develop web systems with WebForms Core technology, you only need to call the WebForms class on the server and manipulate the DOM elements in HTML using the methods of this class; the rest of the work is done automatically by the WebForms Core infrastructure.

Supports All Programming Languages ​​(Language-Agnostic)

WebForms Core is language-agnostic in design, supporting a wide range of programming languages ​​such as C#, Python, Java, PHP, Ruby, Swift, Elixir, Node.js, Go, and Rust. Elanat is also continuously expanding the support of this core to ensure coverage of more than 99% of web-based languages. The flexibility of WebForms Core allows for implementation in most programming languages, so that developers can benefit from its capabilities without changing the framework or language. This feature makes it easier to adopt this technology in diverse projects and eliminates language limitations.

Example of changing the background color of a form tag

C#
form.SetBackgroundColor(InputPlace.Tag("form"), backgroundColor);

C
WebForms_SetBackgroundColor(&webForms, InputPlace_Tag("form"), backgroundColor);

C++
form.SetBackgroundColor(InputPlace::Tag("form"), backgroundColor);

Dart
form.setBackgroundColor(InputPlace.tag('form'), backgroundColor);

Elixir
form = WebForms.set_background_color(form, InputPlace.tag("form"), background_color)

GO
form.SetBackgroundColor(ip.Tag("form"), backgroundColor)

Java
form.setBackgroundColor(InputPlace.tag("form"), backgroundColor);

Julia
WebForms.set_background_color!(form, InputPlace.tag("form"), background_color)

NodeJS - JavaScript
form.setBackgroundColor(InputPlace.tag('form'), BackgroundColor);

PHP
$form->setBackgroundColor(InputPlace::tag('form'), $BackgroundColor);

Python 
form.set_background_color(InputPlace.tag('form'), background_color)

R
form$SetBackgroundColor("<form>", bg_color)

Ruby
form.set_background_color(InputPlace.tag('form'), background_color)

Rust
form.set_background_color(InputPlace::tag("form").as_str(), background_color.clone());

Swift
form.setBackgroundColor(InputPlace.tag("form"), backgroundColor)
Enter fullscreen mode Exit fullscreen mode

Currently, the WebForms class has been created for the above programming languages. Please note that you can also indirectly use the above classes for most programming languages. For example, you can use the Java WebForms class for Scala, Kotlin, Groovy, and Clojure programming languages.

JavaScript Compatible

While WebForms Core minimizes the need for front-end programming, it is compatible with JavaScript for scenarios that demand intensive client-side processing. Developers can call complex JavaScript functions or integrate existing front-end scripts as needed, providing rich interactivity or specific behaviors not available on the server side. This flexibility allows developers to leverage the strengths of JavaScript without compromising the simplicity and server-side nature of WebForms Core.

Example

WebForms form = new WebForms();

form.AddText("PrimeNumbers", Fetch.Script("sieveOfEratosthenes(100000000)"));

Control(form);
Enter fullscreen mode Exit fullscreen mode

The above example calls a JavaScript function that calculates the set of prime numbers up to 100000000 (In my browser, the calculation took 2.6 seconds).
This example shows that we can offload processing to the client by calling JavaScript scripts and save server resources.

Interactions are done on the Front-End

It is true that in WebForms Core technology the development is done on the server-side, however the server sends the code to the client, and WebFormsJS interprets this code and then applies it to the HTML page. This means that the client browser performs its behavior based on the instructions of the server, rather than relying on front-end frameworks that work entirely on the client. The server handles the core logic, but the client simply interprets and displays the results, maintaining a balance between server control and client responsiveness.

How the server and client interact

Example of deleting content (or file) on the server and creating an interactive UI for the user

The client sends the data ID (or file name and path) to the server.

WebForms Core - Delete file

The server removes the data (or file) from storage and sends a command to the client to delete the associated data tag.

string fileName = context.Request.Form["Button"];

File.Delete("wwwroot/image/" + fileName);

WebForms form = new WebForms();

form.Delete("/" + InputPlace.Query($"img[title='{fileName}']"));

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

In this example, the user clicks the second delete button, the file name is sent to the server, and the server sends a command to the client to delete the image's parent tag that contains the delete button.

[web-forms]
de/*img[title$[eq];'Goat.jpg']=1
Enter fullscreen mode Exit fullscreen mode

The above code is the data sent by the server to the client. According to this code, the server spends a small amount of processing to build an INI template, which is approximately equal to the processing required by the server to build a JSON data template for front-end frameworks.

The client (WebFormsJS) receives the server command and then interprets it and applies it to the HTML page.

WebForms Core - Delete file

In this example, after requesting to delete the content, the client sees the tag related to that content deleted on its page.

According to this example, the following pattern is deleted in the HTML section.

<div>
    <img src="/image/Goat.jpg" title="Goat.jpg" />
    <input type="submit" name="Delete" value="Goat.jpg" />
</div>
Enter fullscreen mode Exit fullscreen mode

Multiple Response Support

WebForms Core supports batching multiple control updates into a single server request; this feature allows the server to send multiple responses to the client for related updates in a single response. Instead of making multiple separate requests for each update, the server bundles multiple commands or responses together. This allows for pre-configured commands to be sent for potential future requests, which reduces the number of server requests, resulting in improved performance, faster communication, and reduced network overhead.

Example

WebForms form = new WebForms();

form.StartIndex("show");
form.SetStyle("$/<p>", "display", "unset");
form.RemoveGetEvent("$", HtmlEvent.OnClick);
form.SetGetEvent("$", HtmlEvent.OnClick, "?answer#hide");

form.StartIndex("hide");
form.DeleteStyle("$/<p>", "display");
form.RemoveGetEvent("$", HtmlEvent.OnClick);
form.SetGetEvent("$", HtmlEvent.OnClick, "?answer#show");

Control(form, true);

new ClientCache(context.Response.Headers).Set(31536000); // One year
Enter fullscreen mode Exit fullscreen mode

The above codes are for the FAQ page, which has client cache enabled at the end. According to this example, both the show answer and hide answer commands are sent from the server at the same time. This example shows that the server is requested only to show the answers to the questions, and at the same time, the hide answer commands are sent so that no more requests are made to the server.

Having Powerful Caching Tools

This technology includes advanced caching strategies such as smart caching mechanisms that improve performance and reduce server load. Static parts of a web page, such as headers, footers, and menus, can be cached in the browser for long periods, reducing additional processing and data transfer. In addition, the Cache class can be used to cache various parts of a tag and the powerful Fetch class can be used to retrieve the cached data without having to be fetched from the server; these processes lead to further optimization in server interaction and enhance overall application responsiveness.

Example

@page
@controller CacheThemeController
<!DOCTYPE html>
<html>
<head>
    <title>WebForms Core Cache Example</title>
    <script type="text/javascript" src="/script/web-forms.js"></script>
</head>
<body>
    <label for="BackgroundColor">Background Color</label>
    <select id="BackgroundColor">
        <option value="white">White</option>
        <option value="green">Green</option>
        <option value="red">Red</option>
        <option value="blue">Blue</option>
        <option value="orange">Orange</option>
        <option value="pink">Pink</option>
        <option value="black">Black</option>
    </select>
    <label for="TextColor">Text Color</label>
    <select id="TextColor">
        <option value="white">White</option>
        <option value="green">Green</option>
        <option value="red">Red</option>
        <option value="blue">Blue</option>
        <option value="orange">Orange</option>
        <option value="pink">Pink</option>
        <option value="black">Black</option>
    </select>
    <form method="GET" action="?set-theme">
        <input type="submit" name="SetTheme" value="Set Theme" />
    </form>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

This code defines a simple web page that allows users to select background and text colors from dropdown menus and apply their selections. The HTML portion provides the UI with color options and a form that triggers a theme-setting action. When the user submits their selection, the request is processed by the controller, which stores the selected colors in a cache and applies them to the page dynamically. If a user revisits the page, previously saved colors are retrieved from the cache.

using CodeBehind;

public partial class CacheThemeController : CodeBehindController
{
    public void PageLoad(HttpContext context)
    {
        if (context.Request.Query.ContainsKey("set-theme"))
        {
            SetTheme_OnClick(context);
            return;
        }

        WebForms form = new WebForms();

        form.SetBackgroundColor("<body>", Fetch.Cache("background-color"));
        form.SetTextColor("<body>", Fetch.Cache("text-color"));

        Control(form);
    }

    private void SetTheme_OnClick(HttpContext context)
    {
        WebForms form = new WebForms();

        form.CacheValue("BackgroundColor", "background-color");
        form.CacheValue("TextColor", "text-color");

        form.SetBackgroundColor("<body>", Fetch.Cache("background-color"));
        form.SetTextColor("<body>", Fetch.Cache("text-color"));

        form.SetCache();

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

The controller handles theme changes by checking for the "set-theme" query parameter. If present, it runs "SetTheme_OnClick", caching the selected colors and applying them to the page. Otherwise, it retrieves stored values and applies them. This approach improves performance by minimizing repeated selections and ensuring a consistent user experience. Let me know if you want a deeper breakdown of any section.

Cache in WebForms Core

According to the example above, we can set the page theme state and maintain this state during initial load.

Conclusion

WebForms Core represents a transformative advancement in web development technology, offering a server-centric approach that simplifies DOM manipulation, enhances performance, and reduces reliance on traditional front-end frameworks. Its bi-directional, HTML-based communication model enables developers to manage complex interactions seamlessly from the server, supporting versatile configurations for CSR and SSR, and maintaining compatibility across a wide range of programming languages. With powerful features such as automated client-server synchronization, intelligent caching, event-driven architecture, and JavaScript interoperability, WebForms Core empowers developers to build robust, efficient, and scalable web applications with greater ease and flexibility. As the first of its kind in 2024, it paves the way for a new paradigm where server and client work in harmony, delivering rich user experiences while streamlining development workflows.

Comments 0 total

    Add comment