Maison >interface Web >js tutoriel >Le front-end devient obsolète

Le front-end devient obsolète

DDDoriginal: 2025-01-07 08:35:09268parcourir

Front-End is Becoming Obsolete

En 2024, Elanat a donné un nouveau sens au développement web en introduisant WebForms Core. La technologie WebForms Core vous permet de gérer les balises HTML depuis le serveur. Cette technologie simplifie le processus complexe de développement Web. Dans la technologie WebForms Core, la charge du serveur est faible et est similaire aux réponses JSON dans les frameworks front-end. La réponse du serveur est simplement une petite commande au format INI qui est envoyée au client, ce qui entraîne une mise à jour de la page HTML. Cette technologie permet aux utilisateurs d'interagir avec d'autres parties de l'application en attendant la réponse du serveur.

Dans cet article, nous allons prouver pourquoi, malgré la technologie WebForms Core, le front-end devient obsolète.

Scénario de suppression de contact

Le scénario que nous examinons consiste à afficher une liste de contacts sur la page d'administration. Dans ce scénario, l'administrateur peut supprimer les contacts de la base de données en cliquant sur le bouton Supprimer. Dans ce scénario, l'état de la page est conservé et après la suppression du contact, la balise contact est également supprimée de la page HTML.

Dans cet exemple, nous avons utilisé le framework CodeBehind.
Veuillez noter que la technologie WebForms Core peut être utilisée dans tous les langages de programmation et tous les frameworks back-end.

Utiliser Javascript

Dans cet exemple, HTML fournit la structure frontale, JavaScript gère la logique côté client et le contrôleur C# gère les opérations côté serveur.

Ce résultat HTML configure une page Web avec trois éléments div, chacun contenant un message et un bouton. Lorsque vous cliquez sur le bouton, il appelle la fonction JavaScript SupprimerContact avec un identifiant spécifique.

Résultat HTML

<!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();
}

Dans le contrôleur, la méthode main vérifie d'abord si la chaîne de requête contient ou non un paramètre appelé do_delete ; si elle est présente, la méthode btn_Delete_Click est appelée.
Dans la méthode btn_Delete_Click, l'utilisateur est supprimé puis renvoie une vraie chaîne au client.

Contrôleur

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");
    }
}

Utilisation de la technologie de base WebForms

Dans cet exemple, HTML fournit la structure frontale, WebFormsJS gère automatiquement la logique côté client et le contrôleur C# gère les opérations côté serveur.

Cette sortie HTML configure une page Web avec trois éléments div, chacun contenant un message et un bouton de soumission, à l'intérieur d'une balise de formulaire. Lorsque vous cliquez sur le bouton, l'état de la page reste statique et une XMLHttpRequest est automatiquement envoyée au serveur par WebFormsJS.

Résultat HTML

<!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();
}

Remarque : Veuillez noter que la méthode Control est liée au framework CodeBehind. Si vous travaillez avec un framework qui ne dispose pas encore du module technologique WebForms Core, vous pouvez définir la méthode Form.Response() sur la réponse du serveur.

Que demande le client ?
La technologie WebForms Core est fidèle à la structure HTML, l'URL suivante est donc demandée.
/admin/contact/?btn_Delete=1

Que répond le serveur ?

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");
    }
}

Supprimer une balise est très simple grâce à la technologie WebForms Core. Il vous suffit de créer une instance de la classe WebForms, puis d'appeler la méthode Delete, et enfin d'envoyer les commandes à l'aide de la méthode Control.

Remarque : À l'aide de WebForms Core, vous pouvez appliquer diverses commandes à la page HTML, telles que la création de balises, l'ajout d'attributs, la modification de la couleur d'arrière-plan, etc.

Exemple

Dans cet exemple, un message indiquant que le contact a été supprimé avec succès s'affiche à l'utilisateur pendant 3 secondes.
Dans le code suivant, en plus de supprimer la balise contact, une balise h3 est ajoutée à la fin de la balise form, et dans les lignes suivantes, la couleur de fond de cette balise est changée en vert, et le texte du message indiquant que le contact a été supprimé avec succès est ajouté à l'intérieur de la balise h3. La méthode Delete supprime également la balise h3 et la méthode AssignDelay provoque un délai de 3 secondes pour supprimer la balise h3.

<!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);
    }
}

Les codes envoyés du serveur au client dans l'exemple ci-dessus sont également conformes aux commandes suivantes.

[web-forms]
deRow1=1

Dans la technologie WebForms Core, la quantité de traitement requise pour générer des codes INI est égale à la quantité de traitement requise pour sérialiser et générer le format JSON dans le processus de développement des frameworks front-end ; par conséquent, la pression sur le serveur est à son niveau le plus optimal.

Cet exemple montre clairement que la technologie WebForms Core apporte tous les avantages de JavaScript, et qu'il n'y a aucune différence de performances entre WebForms Core et JavaScript. Les avantages de la technologie WebForms Core vont directement aux développeurs qui recherchent la simplicité sans sacrifier les performances. Les développeurs n'ont plus besoin d'écrire du code JavaScript détaillé, ce qui réduit encore davantage le besoin de compétences front-end spécialisées. C'est la marque du développement Web moderne !

Alors que le développement Web est passé du back-end au front-end ces dernières années, l'introduction inattendue de WebForms Core constitue un défi majeur pour le développement Web front-end. WebForms Core résout les problèmes de back-end et encourage les développeurs Web à se concentrer sur le back-end. Cela représente un changement majeur dans la façon dont les développeurs abordent les applications Web.

Avantages principaux de WebForms :

Simplicité : L'approche WebForms Core utilise des formulaires de soumission HTML standard, qui sont simples, faciles et rapides à mettre en œuvre sans nécessiter de connaissances supplémentaires en JavaScript.
Gestion côté serveur : La logique de gestion est entièrement côté serveur, ce qui en fait un outil puissant et professionnel pour les développeurs familiarisés avec la programmation côté serveur.
Maintenir l'état de la page : L'utilisation de WebForms Core offre une expérience utilisateur fluide, car les balises sont gérées sans actualiser la page entière.
Commentaires instantanés : Les balises changent immédiatement après la réponse du serveur, fournissant un retour immédiat à l'utilisateur et permettant aux utilisateurs de continuer à interagir avec la page pendant que la demande est en cours de traitement.
Aucun balisage requis : Cette technologie ne nécessite pas de balisage sur les pages ; alors que l'utilisation de JavaScript nécessite que l'événement soit appliqué directement aux balises (ou indirectement avec la méthode AddEventListener).
Utilisation réduite de la bande passante : Étant donné que le serveur peut envoyer des commandes simples dans un format léger tel que INI, le besoin de packages JavaScript volumineux est réduit.
Interactivité avancée : La technologie WebForms Core fournit des outils puissants pour créer des interfaces utilisateur complexes, gérer l'état et garantir une expérience utilisateur réactive, interactive et engageante.

Conclusion

La technologie WebForms Core d'Elanat représente une approche révolutionnaire qui pourrait modifier considérablement le paysage du développement Web. En déplaçant le contrôle du front-end vers le côté serveur et en simplifiant la gestion des données, il remet en question la domination des frameworks existants côté client. À mesure que cette technologie gagne du terrain, elle pourrait conduire à une réévaluation des pratiques traditionnelles de développement front-end, les rendant potentiellement moins pertinentes dans certains contextes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Codewars - Construisez une pile de cubesArticle suivant：Codewars - Construisez une pile de cubes

Articles Liés

Voir plus