Heim >Web-Frontend >js-Tutorial >Das Frontend wird veraltet

Das Frontend wird veraltet

DDDOriginal: 2025-01-07 08:35:09245Durchsuche

Front-End is Becoming Obsolete

Im Jahr 2024 gab Elanat der Webentwicklung durch die Einführung von WebForms Core eine neue Bedeutung. Mit der WebForms Core-Technologie können Sie HTML-Tags vom Server aus verwalten. Diese Technologie vereinfacht den komplexen Prozess der Webentwicklung. Bei der WebForms Core-Technologie ist die Serverlast gering und ähnelt JSON-Antworten in Front-End-Frameworks. Die Antwort des Servers ist lediglich ein kleiner Befehl im INI-Format, der an den Client gesendet wird, was zu einer Aktualisierung der HTML-Seite führt. Diese Technologie ermöglicht es Benutzern, mit anderen Teilen der Anwendung zu interagieren, während sie auf die Antwort des Servers warten.

In diesem Artikel werden wir beweisen, warum das Frontend trotz WebForms Core-Technologie veraltet ist.

Kontaktszenario löschen

Das Szenario, das wir betrachten, ist die Anzeige einer Liste von Kontakten auf der Admin-Seite. In diesem Szenario kann der Administrator die Kontakte aus der Datenbank löschen, indem er auf die Schaltfläche „Löschen“ klickt. In diesem Szenario bleibt der Status der Seite erhalten und nach dem Löschen des Kontakts wird auch das Kontakt-Tag von der HTML-Seite entfernt.

In diesem Beispiel haben wir das CodeBehind-Framework verwendet.
Bitte beachten Sie, dass die WebForms Core-Technologie in allen Programmiersprachen und allen Backend-Frameworks verwendet werden kann.

Verwendung von JavaScript

In diesem Beispiel stellt HTML die Front-End-Struktur bereit, JavaScript übernimmt die clientseitige Logik und der C#-Controller übernimmt die serverseitigen Vorgänge.

Dieses HTML-Ergebnis richtet eine Webseite mit drei div-Elementen ein, die jeweils eine Nachricht und eine Schaltfläche enthalten. Wenn auf die Schaltfläche geklickt wird, wird die JavaScript-Funktion „DeleteContact“ mit einer bestimmten ID aufgerufen.

HTML-Ergebnis

<!DOCTYPE html>
<html>
    <head>
        <title>Using JavaScript</title>
        <script src="/script/contact.js"></script>
    </head>
<body>
    <div>



<p>In the head section, a link to an external JavaScript file named contact.js has been added; the content of the contact.js file is as follows.</p>

<p>This JavaScript file defines the DeleteContact function, which sends an HTTP request to delete a contact and deletes the contact tag.</p>

<p><strong>JavaScript file (contact.js)</strong><br>
</p>

<pre class="brush:php;toolbar:false">function DeleteContact(Id)
{
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function () 
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200 && xmlhttp.responseText == "true")
            document.getElementById("Row" + Id).outerHTML = null;
    }

    xmlhttp.open("GET", "/admin/contact/?do_delete=true&contact_id=" + Id, true);
    xmlhttp.send();
}

Im Controller prüft die Hauptmethode zunächst, ob die Abfragezeichenfolge einen Parameter namens do_delete enthält oder nicht; Falls vorhanden, wird die Methode btn_Delete_Click aufgerufen.
In der Methode btn_Delete_Click wird der Benutzer gelöscht und anschließend eine echte Zeichenfolge an den Client zurückgegeben.

Controller

using CodeBehind;

public class ContactController : CodeBehindController
{
    public void PageLoad(HttpContext context)
    {
        if (context.Request.Query["do_delete"].Has())
            btn_Delete_Click(context);
    }

    private void btn_Delete_Click(HttpContext context)
    {
        int Id = context.Request.Query["contact_id"].ToNumber();

        new Database().DeleteContact(Id);

        Write("true");
    }
}

Verwendung der WebForms-Kerntechnologie

In diesem Beispiel stellt HTML die Front-End-Struktur bereit, WebFormsJS übernimmt automatisch die clientseitige Logik und der C#-Controller übernimmt die serverseitigen Vorgänge.

Diese HTML-Ausgabe richtet eine Webseite mit drei div-Elementen ein, die jeweils eine Nachricht und eine Schaltfläche zum Senden innerhalb eines Formular-Tags enthalten. Wenn auf die Schaltfläche geklickt wird, bleibt der Seitenstatus statisch und ein XMLHttpRequest wird automatisch von WebFormsJS an den Server gesendet.

HTML-Ergebnis

<!DOCTYPE html>
<html>
    <head>
        <title>Using JavaScript</title>
        <script src="/script/contact.js"></script>
    </head>
<body>
    <div>



<p>In the head section, a link to an external JavaScript file named contact.js has been added; the content of the contact.js file is as follows.</p>

<p>This JavaScript file defines the DeleteContact function, which sends an HTTP request to delete a contact and deletes the contact tag.</p>

<p><strong>JavaScript file (contact.js)</strong><br>
</p>

<pre class="brush:php;toolbar:false">function DeleteContact(Id)
{
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function () 
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200 && xmlhttp.responseText == "true")
            document.getElementById("Row" + Id).outerHTML = null;
    }

    xmlhttp.open("GET", "/admin/contact/?do_delete=true&contact_id=" + Id, true);
    xmlhttp.send();
}

Hinweis: Bitte beachten Sie, dass die Control-Methode mit dem CodeBehind-Framework zusammenhängt. Wenn Sie mit einem Framework arbeiten, das noch nicht über das Technologiemodul WebForms Core verfügt, können Sie die Methode Form.Response() auf die Serverantwort einstellen.

Was verlangt der Kunde?
Die WebForms Core-Technologie ist der HTML-Struktur treu, daher wird die folgende URL angefordert.
/admin/contact/?btn_Delete=1

Was antwortet der Server?

using CodeBehind;

public class ContactController : CodeBehindController
{
    public void PageLoad(HttpContext context)
    {
        if (context.Request.Query["do_delete"].Has())
            btn_Delete_Click(context);
    }

    private void btn_Delete_Click(HttpContext context)
    {
        int Id = context.Request.Query["contact_id"].ToNumber();

        new Database().DeleteContact(Id);

        Write("true");
    }
}

Das Löschen eines Tags ist mit der WebForms Core-Technologie sehr einfach. Sie müssen lediglich eine Instanz der WebForms-Klasse erstellen, dann die Methode „Delete“ aufrufen und schließlich die Befehle mithilfe der Methode „Control“ senden.

Hinweis: Mit WebForms Core können Sie verschiedene Befehle auf die HTML-Seite anwenden, z. B. Tags erstellen, Attribute hinzufügen, die Hintergrundfarbe ändern usw.

Beispiel

In diesem Beispiel wird dem Benutzer 3 Sekunden lang eine Meldung angezeigt, dass der Kontakt erfolgreich gelöscht wurde.
Im folgenden Code wird zusätzlich zum Löschen des Kontakt-Tags ein h3-Tag am Ende des Formular-Tags hinzugefügt. In den folgenden Zeilen wird die Hintergrundfarbe dieses Tags in Grün geändert und der Text der Nachricht wird angezeigt dass der Kontakt erfolgreich gelöscht wurde, wird im h3-Tag hinzugefügt. Die Methode „Delete“ löscht auch das h3-Tag und die Methode „AssignDelay“ verursacht eine Verzögerung von 3 Sekunden für das Löschen des h3-Tags.

<!DOCTYPE html>
<html>
    <head>
        <title>Using WebForms Core Technology</title>
        <script src="/script/web-forms.min.js"></script>
    </head>
<body>
    <form action="/admin/contact">
        <div>



<p>In the head section, a link to the WebFormsJS library has been added.</p>

<blockquote>
<p><strong>Note:</strong> In WebForms Core technology, the WebFormsJS library on the front-end automatically communicates with the WebForms class on the back-end.</p>
</blockquote>

<p>In the controller, the main method first checks whether the query string contains a parameter called btn_Delete or not; if present, the btn_Delete_Click method is called.<br>
In the btn_Delete_Click method, the user is deleted and then an instance of the WebForms class is created and the Delete method is called, and finally, by calling the Control method, the commands of the created instance of the WebForms class are placed in the server response and sent to the client.</p>

<p><strong>Controller</strong><br>
</p>

<pre class="brush:php;toolbar:false">using CodeBehind;

public class ContactController : CodeBehindController
{
    public void PageLoad(HttpContext context)
    {
        if (context.Request.Query["btn_Delete"].Has())
            btn_Delete_Click(context);
    }

    private void btn_Delete_Click(HttpContext context)
    {
        int Id = context.Request.Query["btn_Delete"].ToNumber();

        new Database().DeleteContact(Id);

        WebForms Form = new WebForms();

        Form.Delete("Row" + Id);

        Control(Form);
    }
}

Die im obigen Beispiel vom Server an den Client gesendeten Codes entsprechen auch den folgenden Befehlen.

[web-forms]
deRow1=1

In der WebForms Core-Technologie entspricht der zum Generieren von INI-Codes erforderliche Verarbeitungsaufwand dem Verarbeitungsaufwand, der zum Serialisieren und Generieren des JSON-Formats im Entwicklungsprozess von Front-End-Frameworks erforderlich ist. Daher ist der Druck auf den Server optimal.

Dieses Beispiel zeigt deutlich, dass die WebForms Core-Technologie alle Vorteile von JavaScript bietet und es keinen Leistungsunterschied zwischen WebForms Core und JavaScript gibt. Die Vorteile der WebForms Core-Technologie kommen direkt Entwicklern zugute, die Einfachheit ohne Einbußen bei der Leistung suchen. Entwickler müssen keinen umfangreichen JavaScript-Code mehr schreiben, wodurch der Bedarf an speziellen Front-End-Kenntnissen weiter reduziert wird. Das ist das Markenzeichen moderner Webentwicklung!

Während sich die Webentwicklung in den letzten Jahren vom Back-End zum Front-End verlagert hat, stellt die unerwartete Einführung von WebForms Core eine große Herausforderung für die Front-End-Webentwicklung dar. WebForms Core löst Back-End-Probleme und ermutigt Webentwickler, sich auf das Back-End zu konzentrieren. Dies stellt einen großen Wandel in der Art und Weise dar, wie Entwickler an Webanwendungen herangehen.

Kernvorteile von WebForms:

Einfachheit: Der WebForms Core-Ansatz verwendet Standard-HTML-Übermittlungsformulare, die einfach, leicht und schnell zu implementieren sind, ohne dass zusätzliche JavaScript-Kenntnisse erforderlich sind.
Serverseitige Verwaltung: Die Verwaltungslogik liegt vollständig auf der Serverseite, was es zu einem leistungsstarken und professionellen Tool für Entwickler macht, die mit serverseitiger Programmierung vertraut sind.
Seitenstatus beibehalten: Die Verwendung von WebForms Core sorgt für eine reibungslose Benutzererfahrung, da Tags verwaltet werden, ohne die gesamte Seite zu aktualisieren.
Sofortiges Feedback: Tags ändern sich unmittelbar nach der Serverantwort, wodurch dem Benutzer sofortiges Feedback gegeben wird und Benutzer weiterhin mit der Seite interagieren können, während die Anfrage verarbeitet wird.
Kein Markup erforderlich: Diese Technologie erfordert kein Markup auf Seiten; wohingegen die Verwendung von JavaScript erfordert, dass das Ereignis direkt auf die Tags angewendet wird (oder indirekt mit der AddEventListener-Methode).
Reduzierte Bandbreitennutzung: Da der Server einfache Befehle in einem einfachen Format wie INI senden kann, wird der Bedarf an großen JavaScript-Paketen reduziert.
Erweiterte Interaktivität: Die WebForms Core-Technologie bietet leistungsstarke Tools zum Erstellen komplexer Benutzeroberflächen, zur Statusverwaltung und zur Gewährleistung einer reaktionsschnellen, interaktiven und ansprechenden Benutzererfahrung.

Abschluss

Die WebForms Core-Technologie von Elanat stellt einen revolutionären Ansatz dar, der die Landschaft der Webentwicklung erheblich verändern könnte. Durch die Verlagerung der Kontrolle vom Frontend auf die Serverseite und die Vereinfachung der Datenverwaltung stellt es die Dominanz bestehender clientseitiger Frameworks in Frage. Wenn diese Technologie an Bedeutung gewinnt, kann dies zu einer Neubewertung traditioneller Front-End-Entwicklungspraktiken führen, wodurch sie in bestimmten Kontexten möglicherweise an Relevanz verlieren.

Das obige ist der detaillierte Inhalt vonDas Frontend wird veraltet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript json less html Static String if for while format require continue using class finally Event delete function this background database Other

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Codewars – Baue einen Stapel WürfelNächster Artikel：Codewars – Baue einen Stapel Würfel

In Verbindung stehende Artikel

Mehr sehen