Elanat Framework

Posted on Jun 1

30 Facts About WebForms Core Technology - Part Two: The Front Nightmare is Over

#backend #frontend #opensource #webformscore

Front-end development faces many challenges, including rapid changes in frameworks and tools that require constant learning. Compatibility with different browsers and devices also adds complexity, as each has its own unique behavior. In addition, managing the state of the application can be very difficult. Performance issues, such as optimizing loading speed and managing network requests, also affect the user experience. Finally, maintaining code in large projects and preventing unnecessary complexity is one of the main concerns for developers. However, Elanat solves most of these challenges by providing WebForms Core technology.

WebForms Core technology is a full-stack solution that offers one of the simplest approaches to modern web development, offering outstanding capabilities for manipulating DOM elements, enabling the creation of more interactive UI tools (similar to Figma) and adding more features over time and in multiple updates to enable the creation of even the most complex UIs. WebForms Core is not just another new framework, it is a paradigm shift in web development that delivers performance improvements optimized for modern runtime environments, delivering better speed and responsiveness.

In WebForms Core technology, a WebForms class on the server automatically communicates with the WebFormsJS library on the client. Both are open source and licensed under the MIT license.

This is the second part of the 30 Facts About WebForms Core series of articles, which explores 10 more topics in the evolution of this technology.

Works Offline

No need to request a server at all! WebForms Core also provides dynamic updates without constant communication with the server. One of the standout features of WebForms Core is its offline support, made possible through techniques such as "TagBack" and multi-response structures. This allows server responses to be used even without an active internet connection or in low bandwidth conditions. This technology can work seamlessly offline, providing a better user experience in situations where network connectivity is unreliable or unavailable, which is especially valuable for mobile or remote applications.

Example

Multi-Response Mechanism

Multi-response enables a single request to retrieve multiple responses, reducing unnecessary server communication.

Initialization

WebForms form = new WebForms();

form.SetGetEvent("btn_ResetFont", HtmlEvent.OnClick, "/responses#reset-font-size");
form.SetGetEvent("btn_IncreaseFontSize", HtmlEvent.OnClick, "/responses#increase-font-size");
form.SetGetEvent("btn_DecreaseFontSize", HtmlEvent.OnClick, "/responses#decrease-font-size");
form.SetGetEvent("btn_UseFontBold", HtmlEvent.OnClick, "/responses#use-font-bold");
form.SetGetEvent("btn_CleanFontBold", HtmlEvent.OnClick, "/responses#clean-font-bold");

Control(form);

Using the "SetGetEvent" method, the "/responses" path is defined with specific request indices using the "#" character.

Path "/responses"

WebForms form = new WebForms();

form.StartIndex("reset-font-size");
form.SetFontSize("<body>", 16);

form.StartIndex("increase-font-size");
form.IncreaseFontSize("<body>", 1);

form.StartIndex("decrease-font-size");
form.DecreaseFontSize("<body>", 1);

form.StartIndex("use-font-bold");
form.SetFontBold("<body>", true);

form.StartIndex("clean-font-bold");
form.SetFontBold("<body>", false);

new ClientCache(context.Response.Headers).Set(31536000); // One year

Control(form);

When a request reaches "/responses", the server processes all defined responses, segregating them using the "StartIndex" method. This approach mimics inline JavaScript but is optimized for efficiency.

This is similar to inline JavaScript but works more efficiently.

TagBack Mechanism

TagBack allows elements to interact dynamically without needing repeated server requests.

WebForms form = new WebForms();

form.SetTagEvent("btn_ResetFont", HtmlEvent.OnClick, "reset-font-size");
form.SetTagEvent("btn_IncreaseFontSize", HtmlEvent.OnClick, "increase-font-size");
form.SetTagEvent("btn_DecreaseFontSize", HtmlEvent.OnClick, "decrease-font-size");
form.SetTagEvent("btn_UseFontBold", HtmlEvent.OnClick, "use-font-bold");
form.SetTagEvent("btn_CleanFontBold", HtmlEvent.OnClick, "clean-font-bold");

Control(form);

form.Clean();
form.SetFontSize("<body>", 16);
Write(form.DoneToWebFormsTag("reset-font-size"));

form.Clean();
form.IncreaseFontSize("<body>", 1);
Write(form.DoneToWebFormsTag("increase-font-size"));

form.Clean();
form.DecreaseFontSize("<body>", 1);
Write(form.DoneToWebFormsTag("decrease-font-size"));

form.Clean();
form.SetFontBold("<body>", true);
Write(form.DoneToWebFormsTag("use-font-bold"));

form.Clean();
form.SetFontBold("<body>", false);
Write(form.DoneToWebFormsTag("clean-font-bold"));

This technique functions similarly to external JavaScript but offers enhanced performance and offline capabilities.

No Need for Additional Markup in HTML

The HTML in this technology is pure and you don't have to learn new markup design. One of the main advantages is that WebForms Core doesn't require developers to write or understand additional complex markup in HTML. The only difference is that they need to add the "web-forms.js" script in the head section of the HTML page, which is simple to do. This approach allows back-end developers to add interactivity without having to deal with the front-end markup design, making the technology accessible even to people with limited expertise.

Example

The following example is a section of an HTML page that is supported by WebForms Core technology without markup.

WebForms Core

<form>
    <input type="submit" value="Click Me"/>
    <p></p>
</form>

Examples of other frameworks or libraries can be seen below. All of these require markup in HTML.

HTMX

<button hx-get="/some-endpoint" hx-trigger="click" hx-target="#result">
    Load Content
</button>

<div id="result"></div>

Angular

<button (click)="showMessage()">Click Me</button>
<p *ngIf="message">You clicked the button!</p>

React

return (
<div>
    <button onClick={() => setMessage('You clicked the button!')}>
        Click Me
    </button>
    <p>{message}</p>
</div>
);

Vue.js

<button @click="showMessage">Click Me</button>
<p v-if="message">You clicked the button!</p>

Microsoft Web-Forms

<asp:Button ID="btnClick" runat="server" Text="Click Me" OnClick="btnClick_Click" />
<p runat="server"></p>

Note: In WebForms Core technology, HTML events are usually triggered through server code.

Supports All HTML Events

WebForms Core is capable of handling a wide range of HTML events such as clicks, key ups, mouse enter, and more, all from server-side code. With comprehensive event support, WebForms Core enables the creation of highly dynamic and interactive user interfaces without complex client-side scripting, making it an excellent choice for building real-time applications, interactive forms, chat, and dashboards. Developers can hook into these events directly from server-side code, simplifying development and ensuring consistent behavior across browsers and devices.

Example

using CodeBehind;

public partial class TextBoxController : CodeBehindController
{
    public void PageLoad(HttpContext context)
    {
        if (context.Request.Query.ContainsKey("keyup"))
        {
            TextBox_keyUp();
            return;
        }

        WebForms form = new WebForms();

        form.SetGetEvent("TextBox1", HtmlEvent.OnKeyUp, "?keyup");

        Control(form);
    }

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

        form.SaveValue("TextBox1");
        form.SetBackgroundColor("TextBox1", Fetch.Saved());
        form.SetCache(31536000);

        Control(form, true);
    }
}

In the above example, the "key up" event is set by requesting the query "keyup?" on the textbox. If a key is pressed on the textbox and then released, the "?keyup" route is requested from the server. The above controller is set up in such a way that if the query "?keyup" is present in the client request, the background color of the textbox changes based on its value.

How the above example works is shown in the image below.

Simple

WebForms Core Technology simplifies web application architecture by reducing dependencies and using a server-side approach. In this technology, the entire process, from event capture to HTML page updates, is managed in server-side code, resulting in a faster development cycle and easier maintenance, and enabling developers to create interactive web pages using server-side logic. Events, UI updates, and HTML rendering are all handled on the server, eliminating the need for extensive client-side programming. This results in a more efficient workflow and allows developers to focus on business logic rather than the complexities of the framework.

In this technology, without the need for complex API calls and setting up JSON or XML formats to send data, you can easily send data via form submission and not worry about maintaining page state.

This is thanks to the WebFormsJS library, which automatically handles the request-response cycle.

Easy to Learn

It is simple to learn and does not require a change in mindset or workflow, making it accessible to developers of different skill levels. It minimizes the learning curve. The technology is designed to be simple and accessible, requiring minimal changes to existing workflows or mindsets. Thanks to its straightforward setup and operation, developers can quickly and easily transform web networks without extensive training or paradigm shifts. This ease of learning increases deployment and lowers the barrier to entry for teams looking to implement interactive web features.

To use WebForms Core technology, you simply need to shift your perspective from the complexity of web development to a simple paradigm based on server-side DOM manipulation. Also, you only need to know HTML, a server-side programming language, and the WebForms class; of course, knowing how to use CSS also leads to higher quality UI.

Stateless Server

In WebForms Core technology, the backend operates in a fully stateless manner, meaning the server does not retain client data. Instead, the client is responsible for managing its own state. This architecture offers several advantages, including reducing server load and enhancing scalability. Since session data is not stored on the server, it can efficiently process multiple requests without being burdened by tracking individual client interactions. Furthermore, stateless design improves reliability and simplifies horizontal scaling, making it well-suited for distributed systems and cloud environments. Similarly, most modern front-end frameworks, such as React, Vue, and Angular, follow a stateless approach, ensuring efficient state management on the client side.

Adhering to the Code-Behind Pattern

WebForms Core ensures a clear separation of concerns, promotes clear code organization, and increases maintainability and clarity. This structure makes it easier to understand, maintain, and modify over time, and it also accelerates future development by providing a clean and maintainable architecture, reducing bugs, and simplifying upgrades. Developers can update the UI or business logic independently, reducing the risk of introducing bugs and facilitating team collaboration. Such an architecture increases the long-term maintainability and scalability of applications.

Unlike front-end frameworks where HTML is mixed with JavaScript code, in WebForms Core technology, HTML pages or tags are completely separated from server code.

Easier to Update

This technology reduces the use of JavaScript on the client side, which leads to better maintainability and fewer bugs. Fewer scripts mean fewer problems and easier troubleshooting, which ultimately leads to long-term stability and easier updates. Its structure consists only of the HTML page and server-side code. In WebForms Core technology, system updates (whether providing a new version or fixing bugs) are performed only on the server-side code, without worrying about the state of the JavaScript library cache.

Easy to Debug

By focusing on server-side response generation, WebForms Core architecture reduces client-side errors and debugging complexity because the responses from the WebForms class from the server to the WebFormsJS library on the client are pre-tested and verified, minimizing the chance of errors. This technology reduces the need to rely on complex client-side scripts and simplifies troubleshooting. In addition, WebForms Core is designed to be backward-compatible and avoid inconsistent client-side behavior, so applications built with it will reach a wider range of users without compatibility issues or dependency on modern browser features.

Better SEO

In most front-end frameworks, page content is loaded dynamically, which causes problems for the page index during crawling (search engines); as a result, pages perform worse in terms of SEO and are ranked lower in search engines. But in WebForms Core technology, due to the revolutionary ideas and advanced features in loading content on the first request, the page is displayed faster in the browser and guarantees optimization for search engines. Therefore, for content-rich applications, it provides better SEO and, as a result, better rankings for pages. The efficient rendering of this technology reduces bandwidth consumption and the number of requests to the server, and causes the content to be displayed faster in the user's browser, which leads to improved user experience, reduced duplicate tag rates, and increased interactivity.

Example

In this example, first, the last 10 lines of content are separated and added inside the "p" tag with the Content ID in the HTML page. According to the view section, there is also a content template in the page. The controller section is set up so that after the page loads, a request is made to render the content in the content template.

View

@page
@controller FirstContentRenderController
@model {FirstContentRenderModel}
<!DOCTYPE html>
<html>
<head>
    <title>WebForms Core First Content Render Example</title>
    <script type="text/javascript" src="/script/web-forms.js"></script>
</head>
<body>
    <h1>Latest Articles</h1>
    <p id="Content">@model.Content</p>
    <article>
        <div class="content">
            <h3>Number: </h3>
            <h2></h2>
            <p></p>
            <b>View: </b> 
            <p class="category">Category: <a href="/categories/"></a></p>
        </div>
    </article>
</body>
</html>

The "Body_OnLoad" method is created to wrap the HTML content and tags. Here the content template is initialized 10 times and repeated on the page.

Controller

using CodeBehind;

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

        WebForms form = new WebForms();

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

        Control(form);

        FirstContentRenderModel model = new FirstContentRenderModel();

        using (var db = new ContentDbContext())
        {
            var lastContents = db.Contents
                .OrderByDescending(c => c.ID)  // Assuming higher ID means newer content
                .Take(10)
                .ToList();

            foreach (var content in lastContents)
                model.Content += ($"{content.ID}\n{content.Title}\n{content.Text}\n{content.Category}\n{content.Views}\n");
        }

        View(model);
    }

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

        // Save content value
        form.SaveText("Content", "content");

        // Save content template
        form.SaveOuterText("<article>");
        form.DeleteText("<article>");

        form.AddText("<article>", Fetch.Saved());

        form.AddText("{content}-1|<h3>", Fetch.SavedLineConsume("content"));
        form.AddText("{content}-1|<h2>", Fetch.SavedLineConsume("content"));
        form.AddText("{content}-1|<p>", Fetch.SavedLineConsume("content"));
        form.AddText("{category}-1|<a>", Fetch.SavedLine("content"));
        form.AddAttribute("{category}-1|<a>", "href", Fetch.SavedLineConsume("content"));
        form.AddText("{content}-1|<b>", Fetch.SavedLineConsume("content"));

        // It is a repeat that returns up to 9 times to the third line (form.AddText("<article>", Fetch.Saved());)
        form.GoTo(3, 9);
        form.DeleteText("Content");
        form.SetCache();

        Control(form, true);
    }
}

The server response is also very small and lightweight and is requested only for the first time due to the use of a cache mechanism. This response is automatically interpreted by WebFormsJS and the content is placed in the template.

Action Controls after body onload

[web-forms]
@gtContent=content
@go<article>=.
dt<article>=1
at<article>=@cl.
at{content}-1|<h3>=@lLcontent
at{content}-1|<h2>=@lLcontent
at{content}-1|<p>=@lLcontent
at{category}-1|<a>=@lLcontent[0
aa{category}-1|<a>=href||@lLcontent
at{content}-1|<b>=@lLcontent
&=3|9
dtContent=1
cd=*

In many front-end frameworks, the content is sent from the server to the client as JSON, and the client is responsible for rendering it (placing the content in HTML tags). However, in the WebForms Core approach, the content is sent along with the HTML page without needing to be rendered. In this example, there is no functional difference between the front-end frameworks and WebForms Core, because in CSR mode, the HTML page and JavaScript libraries are first sent to the client, and after the page loads, a JSON template of the content is created on the server and sent to the client.

The WebForms Core approach in this example offers server processing performance similar to CSR in front-end frameworks. But by providing faster initial rendering, it revolutionizes one of the biggest challenges of front-end frameworks, namely SEO, and provides much better optimization for search engines. This is a strategic advantage over modern CSR and SSR stacks.

Both approaches put little strain on the server, but unlike CSR, the WebForms Core approach significantly reduces the number of requests. WebForms Core uses a caching mechanism to serve cached HTML pages instead of generating new responses for each request, which significantly reduces the number of requests. In contrast, CSR frameworks issue multiple requests for dynamic content updates, so each interaction can generate a new API call, increasing the overall volume of requests.

In this example, WebForms Core offers superior efficiency in bandwidth consumption, server processing, and request volume for content-heavy applications, in addition to excellent SEO optimization. Since repeated requests do not put much strain on the server, this approach will be more scalable.

We will soon fully explain the CSR mode in front-end frameworks and the WebForms Core approach in this example in a separate article.

Conclusion

WebForms Core presents an innovative approach to modern web development by bringing more control to the server side while keeping HTML clean and simple. This technology offers developers an alternative path to building interactive applications without heavy reliance on client-side JavaScript frameworks.

The solution shows particular promise in enabling offline functionality, improving SEO performance, and reducing frontend complexity. As WebForms Core continues to evolve, it provides developers with new options for creating responsive web applications. By demonstrating how server-side approaches can deliver rich user experiences, this technology expands the possibilities for web development architectures.

For teams exploring different ways to build web applications, WebForms Core represents an interesting and potentially valuable alternative worth considering as part of the modern development toolkit.