프런트 엔드는 더 이상 사용되지 않습니다-JS 튜토리얼-php.cn

Front-End is Becoming Obsolete

2024년 Elanat는 WebForms Core를 도입하여 웹 개발에 새로운 의미를 부여했습니다. WebForms Core 기술을 사용하면 서버에서 HTML 태그를 관리할 수 있습니다. 이 기술은 웹 개발의 복잡한 프로세스를 단순화합니다. WebForms Core 기술에서는 서버 부하가 낮고 프런트 엔드 프레임워크의 JSON 응답과 유사합니다. 서버 응답은 클라이언트로 전송되는 INI 형식의 작은 명령일 뿐이며 이로 인해 HTML 페이지가 업데이트됩니다. 이 기술을 통해 사용자는 서버 응답을 기다리는 동안 애플리케이션의 다른 부분과 상호 작용할 수 있습니다.

이 기사에서는 WebForms 핵심 기술에도 불구하고 프런트엔드가 더 이상 사용되지 않는 이유를 증명할 것입니다.

연락처 시나리오 삭제

우리가 보고 있는 시나리오는 관리자 페이지에 연락처 목록이 표시되는 것입니다. 이 시나리오에서 관리자는 삭제 버튼을 클릭하여 데이터베이스에서 연락처를 삭제할 수 있습니다. 이 시나리오에서는 페이지 상태가 유지되며 연락처를 삭제한 후 연락처 태그도 HTML 페이지에서 제거됩니다.

이 예에서는 CodeBehind 프레임워크를 사용했습니다.
WebForms Core 기술은 모든 프로그래밍 언어와 모든 백엔드 프레임워크에서 사용할 수 있으니 참고하세요.

자바스크립트 사용

이 예에서 HTML은 프런트엔드 구조를 제공하고 JavaScript는 클라이언트측 논리를 처리하며 C# 컨트롤러는 서버측 작업을 처리합니다.

이 HTML 결과는 각각 메시지와 버튼을 포함하는 세 개의 div 요소로 구성된 웹페이지를 설정합니다. 버튼을 클릭하면 특정 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();
}

로그인 후 복사

컨트롤러에서 기본 메소드는 먼저 쿼리 문자열에 do_delete라는 매개변수가 포함되어 있는지 여부를 확인합니다. 존재하는 경우 btn_Delete_Click 메소드가 호출됩니다.
btn_Delete_Click 메소드에서는 사용자가 삭제된 후 클라이언트에 실제 문자열을 반환합니다.

컨트롤러

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 출력은 양식 태그 내에 메시지와 제출 버튼을 포함하는 세 개의 div 요소가 있는 웹 페이지를 설정합니다. 버튼을 클릭하면 페이지 상태는 정적으로 유지되고 XMLHttpRequest는 WebFormsJS에 의해 자동으로 서버로 전송됩니다.

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 핵심 기술 모듈이 없는 프레임워크로 작업하는 경우 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 클래스의 인스턴스를 생성한 다음 삭제 메서드를 호출하고 마지막으로 Control 메서드를 사용하여 명령을 보내기만 하면 됩니다.

참고: WebForms Core를 사용하면 태그 생성, 속성 추가, 배경색 변경 등과 같은 다양한 명령을 HTML 페이지에 적용할 수 있습니다.

예

이 예에서는 연락처가 성공적으로 삭제되었음을 알리는 메시지가 3초 동안 사용자에게 표시됩니다.
다음 코드에서는 연락처 태그를 삭제하는 것 외에도 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 코드를 작성할 필요가 없으므로 전문적인 프런트 엔드 기술의 필요성이 더욱 줄어듭니다. 이것이 현대 웹 개발의 특징입니다!

최근 몇 년 동안 웹 개발이 백엔드에서 프런트엔드로 전환되는 동안 WebForms Core의 예상치 못한 도입은 프런트엔드 웹 개발에 있어 큰 과제입니다. WebForms Core는 백엔드 문제를 해결하고 웹 개발자가 백엔드에 집중하도록 권장합니다. 이는 개발자가 웹 애플리케이션에 접근하는 방식에 큰 변화가 있음을 나타냅니다.

WebForms의 핵심 장점:

단순성: WebForms Core 접근 방식은 추가 JavaScript 지식 없이도 간단하고 쉽고 빠르게 구현할 수 있는 표준 HTML 제출 양식을 사용합니다.
서버측 관리: 관리 로직이 완전히 서버측에 있으므로 서버측 프로그래밍에 익숙한 개발자를 위한 강력하고 전문적인 도구입니다.
페이지 상태 유지: WebForms Core를 사용하면 전체 페이지를 새로 고치지 않고도 태그가 관리되므로 원활한 사용자 환경을 제공합니다.
즉각적인 피드백: 서버 응답 후 태그가 즉시 변경되어 사용자에게 즉각적인 피드백을 제공하고 요청이 처리되는 동안 사용자가 페이지와 계속 상호 작용할 수 있습니다.
마크업 필요 없음: 이 기술은 페이지에 마크업을 요구하지 않습니다. 반면 JavaScript를 사용하려면 이벤트가 태그에 직접 적용되거나 AddEventListener 메소드를 사용하여 간접적으로 적용되어야 합니다.
대역폭 사용량 감소: 서버가 INI와 같은 경량 형식으로 간단한 명령을 보낼 수 있으므로 대규모 JavaScript 패키지의 필요성이 줄어듭니다.
고급 상호작용성: WebForms 핵심 기술은 복잡한 사용자 인터페이스 생성, 상태 관리 및 응답성이 뛰어나고 대화형이며 매력적인 사용자 경험을 보장하기 위한 강력한 도구를 제공합니다.

결론

Elanat의 WebForms 핵심 기술은 웹 개발 환경을 크게 바꿀 수 있는 혁신적인 접근 방식을 나타냅니다. 제어권을 프런트 엔드에서 서버 측으로 전환하고 데이터 관리를 단순화함으로써 기존 클라이언트 측 프레임워크의 지배력에 도전합니다. 이 기술이 주목을 받으면서 기존 프런트엔드 개발 방식이 재평가되어 잠재적으로 특정 상황에서는 관련성이 떨어질 수 있습니다.

위 내용은 프런트 엔드는 더 이상 사용되지 않습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!