Reflection Feature in WebForms Core 2

WebForms Core 2 is coming soon from Elanat. WebForms Core is a challenge to the accepted principles that have governed web development for over a decade: front-end frameworks. It is a server-side technology that is stateless with minimal processing requirements, highly scalable and stable (much better than front-end frameworks), and free from the problems of heavy server overhead.

With a focus on cleanliness and simplicity, WebForms Core is a fundamental shift in the paradigm of server-client communication, which simultaneously creates a profound paradigm shift in the way web applications are developed.

This technology transforms the structure of the web from a "data stream" to an "instruction stream", which has positive consequences for performance, enabling full-stack development focused on server logic without the need for front-end frameworks, relying on a powerful server language (such as C#).

You may find this hype, unrealistic, or impossible after reading this exciting text; however, we assure you that WebForms Core technology will have a tremendous impact on web development.

WebForms Core version 2 will be released soon by Elanat. Version 2 includes about 40 new features and capabilities that will make WebForms Core technology surpass front-end frameworks.

As we promised earlier, before the release of WebForms Core version 2, we will continuously present some new features of this technology in separate articles.
In this article, we will discuss the new feature reflection.

Reflection

The reflection construct is a DOM reflection system that is used to dynamically manage and update HTML elements. It replaces or updates the content of an element (element) with new content (tag), while preserving the current state and event listeners. The reflection feature works in conjunction with the class attribute, internal tag events (such as onclick), and styles, and also adds children of the element to the selected tag.

Function details:

Inputs:

• InputOlace: Destination element (to be updated)
• OutputPlace or Tag: Source element (a Node) or HTML string

Processing steps:

• If tag is a Node: Copy it
• If tag is a string: Convert it to DOM
• Transfer event listeners
• Merge classes
• Merge styles (add new styles to existing styles)
• Transfer attributes (all attributes except class, style, and event handlers)
• Add children (add only children that do not exist)

Advantages:

• Preserve state: Event listeners are not destroyed
• Efficiency: Only necessary changes are applied
• Flexibility: Works with both strings and Nodes
• Memory management: Prevents duplication of elements

Note: In the reflection feature, the tag name can be anything and it doesn't matter and it won't be applied; however, it is recommended to use the tag with the name template. The template tag is not displayed in the HTML page.

Full example: Before and after function execution

Example use in WebForms class in server

SetReflection("<p>3", "<p class='menu'><br /></p>");
SetReflectionByOutputPlace("userCard", "userCardTemplate|<div>");

In the above code, in the first part, the "SetReflection" function, we directly inserted the HTML tag; of course, this is an example and we do not recommend you to do this; you can use the powerful Fetch class to get a tag or perform reflection operations in the second part. In this example, the fourth p tag will receive the "menu" class and the br tag.

But in the second part, the "SetReflectionByOutputPlace" function, we select the data of a node for reflection. The following example shows how this function works:

The main element to be updated

<div id="userCard" class="card" data-user="123" style="border: 1px solid #ccc; padding: 10px;">
    <h3>Old user</h3>
    <p>Email: [e-mail]</p>
    <button onclick="editUser()" class="btn-edit">Edit</button>
    <span>A tag</span>
</div>

The element that is to be reflected in the main element

<template id="userCardTemplate">
    <div class="card premium" data-user="456" data-role="admin" style="background-color: #f0f8ff; border: 2px solid blue; margin: 5px;">
        <h3>New user</h3>
        <p>Email: [e-mail]</p>
        <button onclick="deleteUser()" class="btn-delete">Delete</button>
        <div class="badge">VIP</div>
    </div>
</template>

Result

<div id="userCard" class="card premium" data-user="456" data-role="admin" style="border: 1px solid #ccc; padding: 10px; background-color: #f0f8ff; border: 2px solid blue; margin: 5px;">  
    <h3>New user</h3>
    <p>Email: [e-mail]</p>
    <button onclick="deleteUser()" class="btn-delete">Delete</button>
    <div class="badge">VIP</div>
    <span>A tag</span>
</div>