フロントエンドは時代遅れになりつつある-jsチュートリアル-php.cn

Front-End is Becoming Obsolete

2024 年、Elanat は WebForms Core を導入することで Web 開発に新しい意味を与えました。 WebForms Core テクノロジーを使用すると、サーバーから HTML タグを管理できます。このテクノロジーは、Web 開発の複雑なプロセスを簡素化します。 WebForms Core テクノロジでは、サーバーの負荷は低く、フロントエンドフレームワークの JSON 応答と同様です。サーバーの応答はクライアントに送信される INI 形式の小さなコマンドであり、その結果 HTML ページが更新されます。このテクノロジーにより、ユーザーはサーバーの応答を待ちながらアプリケーションの他の部分と対話できるようになります。

この記事では、WebForms コアテクノロジにもかかわらず、フロントエンドが時代遅れになりつつある理由を証明します。

連絡先シナリオの削除

私たちが検討しているシナリオは、管理者ページに連絡先のリストを表示することです。このシナリオでは、管理者は削除ボタンをクリックしてデータベースから連絡先を削除できます。このシナリオでは、ページの状態が保持され、連絡先を削除した後、HTML ページから連絡先タグも削除されます。

この例では、CodeBehind フレームワークを使用しました。
WebForms Core テクノロジーは、すべてのプログラミング言語およびすべてのバックエンドフレームワークで使用できることに注意してください。

JavaScriptの使用

この例では、HTML がフロントエンド構造を提供し、JavaScript がクライアント側のロジックを処理し、C# コントローラーがサーバー側の操作を処理します。

この HTML 結果は、それぞれにメッセージとボタンを含む 3 つの div 要素を含む Web ページを設定します。ボタンをクリックすると、特定の ID を使用して DeleteContact JavaScript 関数が呼び出されます。

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

ログイン後にコピー

コントローラーでは、main メソッドがまずクエリ文字列に do_delete というパラメーターが含まれているかどうかを確認します。存在する場合、btn_Delete_Click メソッドが呼び出されます。
btn_Delete_Click メソッドでは、ユーザーが削除され、クライアントに true 文字列が返されます。

コントローラー

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

ログイン後にコピー

WebFormsコアテクノロジーの使用

この例では、HTML がフロントエンド構造を提供し、WebFormsJS がクライアント側のロジックを自動的に処理し、C# コントローラーがサーバー側の操作を処理します。

この HTML 出力は、form タグ内にメッセージと送信ボタンを含む 3 つの div 要素を持つ Web ページを設定します。ボタンをクリックすると、ページの状態は静的なままとなり、WebFormsJS によって XMLHttpRequest がサーバーに自動的に送信されます。

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

ログイン後にコピー

注: Control メソッドは CodeBehind フレームワークに関連していることに注意してください。 WebForms Core テクノロジモジュールをまだ備えていないフレームワークを使用している場合は、Form.Response() メソッドをサーバーの応答に設定できます。

クライアントは何を要求していますか?
WebForms Core テクノロジーは HTML 構造に忠実であるため、次の URL が要求されます。
/admin/contact/?btn_Delete=1

サーバーは何に応答していますか?

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

ログイン後にコピー

WebForms Core テクノロジーを使用すると、タグの削除が非常に簡単になります。 WebForms クラスのインスタンスを作成し、Delete メソッドを呼び出し、最後に Control メソッドを使用してコマンドを送信するだけです。

注: WebForms Core を使用すると、タグの作成、属性の追加、背景色の変更など、さまざまなコマンドを HTML ページに適用できます。

例

この例では、連絡先が正常に削除されたことを示すメッセージがユーザーに 3 秒間表示されます。
以下のコードでは、contact タグの削除に加えて、form タグの末尾に h3 タグが追加され、次の行ではこのタグの背景色が緑色に変更され、メッセージのテキストが連絡先が正常に削除されたことが h3 タグ内に追加されます。 Delete メソッドは h3 タグも削除し、AssignDelay メソッドは h3 タグの削除に 3 秒の遅延を引き起こします。

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

ログイン後にコピー

上記の例でサーバーからクライアントに送信されるコードも、次のコマンドに従っています。

[web-forms]
deRow1=1

ログイン後にコピー

WebForms Core テクノロジーでは、INI コードの生成に必要な処理量は、フロントエンドフレームワークの開発プロセスで JSON 形式をシリアル化して生成するのに必要な処理量と同じです。したがって、サーバーへの負荷は最適なレベルになります。

この例は、WebForms Core テクノロジーが JavaScript のすべての利点をもたらし、WebForms Core と JavaScript の間にパフォーマンスの違いがないことを明確に示しています。 WebForms Core テクノロジーのメリットは、パフォーマンスを犠牲にすることなくシンプルさを求める開発者に直接提供されます。開発者は大規模な JavaScript コードを記述する必要がなくなり、特殊なフロントエンドスキルの必要性がさらに減ります。これは現代の Web 開発の特徴です!

近年、Web 開発はバックエンドからフロントエンドに移行していますが、WebForms Core の予期せぬ導入はフロントエンド Web 開発にとって大きな課題となっています。 WebForms Core はバックエンドの問題を解決し、Web 開発者がバックエンドに集中できるようにします。これは、開発者が Web アプリケーションに取り組む方法における大きな変化を表しています。

Webフォームの主な利点:

シンプルさ: WebForms Core アプローチでは、標準の HTML 送信フォームを使用します。これは、追加の JavaScript 知識を必要とせずに、シンプル、簡単、迅速に実装できます。
サーバー側管理: 管理ロジックは完全にサーバー側にあるため、サーバー側プログラミングに精通した開発者にとって強力でプロフェッショナルなツールになります。
ページの状態の維持: WebForms Core を使用すると、ページ全体を更新せずにタグが管理されるため、スムーズなユーザーエクスペリエンスが提供されます。
インスタントフィードバック: サーバーの応答直後にタグが変更されるため、ユーザーに即時フィードバックが提供され、リクエストの処理中もユーザーはページの操作を続けることができます。
マークアップは必要ありません: このテクノロジーはページにマークアップを必要としません。一方、JavaScript を使用するには、イベントをタグに直接 (または、AddEventListener メソッドを使用して間接的に) 適用する必要があります。
帯域幅使用量の削減: サーバーは INI などの軽量形式で単純なコマンドを送信できるため、大規模な JavaScript パッケージの必要性が減ります。
高度な対話性: WebForms Core テクノロジーは、複雑なユーザーインターフェイスの作成、状態の管理、応答性、対話型、魅力的なユーザーエクスペリエンスの確保のための強力なツールを提供します。

結論

Elanat の WebForms Core テクノロジーは、Web 開発の状況を大きく変える可能性のある革新的なアプローチを表しています。制御をフロントエンドからサーバー側に移し、データ管理を簡素化することで、既存のクライアント側フレームワークの優位性に挑戦します。このテクノロジーが勢いを増すにつれて、従来のフロントエンド開発手法の再評価につながり、特定の状況ではそれらの関連性が薄れる可能性があります。

以上がフロントエンドは時代遅れになりつつあるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。