jQuery의 역사와 레거시

jQuery - 이게 가장 인기가 많아 세상에는 JavaScript 라이브러리가 있습니다. 웹 개발 커뮤니티는 2000년대 후반에 jQuery를 만들어 내부적으로 jQuery를 사용하는 사이트, 플러그인 및 프레임워크로 구성된 풍부한 생태계를 만들었습니다.

그러나 최근 몇 년 동안 웹 개발을 위한 최고의 도구로서의 지위가 약화되었습니다. jQuery가 왜 인기를 얻었는지, 왜 유행에서 뒤쳐졌는지, 그리고 어떤 경우에 최신 웹사이트를 만드는 데 jQuery를 사용하는 것이 바람직한지 살펴보겠습니다.

jQuery의 간략한 역사

존 레시그(존 레시 그)는 2005년에 라이브러리의 첫 번째 버전을 만들었습니다. 2006년에 출판됨-m, BarCampNYC라는 이벤트에서요. ~에 jQuery 공식 홈페이지 저자는 다음과 같이 썼습니다.

jQuery는 자바스크립트는 코딩이 재미있어야 한다는 모토를 기반으로 한 자바스크립트 라이브러리입니다. jQuery는 일반적이고 반복적인 작업을 수행하고 불필요한 마크업을 모두 제거하여 짧고 우아하며 깔끔하게 만듭니다.

jQuery에는 두 가지 주요 장점이 있습니다. 첫 번째는 웹 페이지를 조작하기 위한 편리한 API입니다. 특히 요소를 선택하는 강력한 방법을 제공합니다. ID나 클래스별로 선택할 수 있을 뿐만 아니라 jQuery를 사용하면 다른 요소와의 관계를 기반으로 요소를 선택하는 등 복잡한 표현식을 작성할 수 있습니다.

// Select every item within the list of people within the contacts element
$('#contacts ul.people li');

시간이 지남에 따라 선택 메커니즘은 별도의 라이브러리로 발전했습니다. 찌는 듯이 덥다.

라이브러리의 두 번째 장점은 브라우저 간의 차이점을 추상화했다는 것입니다. 그 당시에는 모든 브라우저에서 안정적으로 작동할 수 있는 코드를 작성하기가 어려웠습니다.

표준화가 부족하다는 것은 개발자가 브라우저와 극단적인 경우 간의 수많은 차이점을 고려해야 한다는 것을 의미했습니다. 보세요 이 초기 jQuery 소스 코드 jQuery.browser를 검색하세요. 다음은 한 가지 예입니다.

// If Mozilla is used
if ( jQuery.browser == "mozilla" || jQuery.browser == "opera" ) {
        // Use the handy event callback
        jQuery.event.add( document, "DOMContentLoaded", jQuery.ready );

// If IE is used, use the excellent hack by Matthias Miller
// http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited
} else if ( jQuery.browser == "msie" ) {

        // Only works if you document.write() it
        document.write("<scr" + "ipt id=__ie_init defer=true " + 
                "src=javascript:void(0)></script>");

        // Use the defer script hack
        var script = document.getElementById("__ie_init");
        script.onreadystatechange = function() {
                if ( this.readyState == "complete" )
                        jQuery.ready();
        };

        // Clear from memory
        script = null;

// If Safari  is used
} else if ( jQuery.browser == "safari" ) {
        // Continually check to see if the document.readyState is valid
        jQuery.safariTimer = setInterval(function(){
                // loaded and complete are both valid states
                if ( document.readyState == "loaded" || 
                        document.readyState == "complete" ) {

                        // If either one are found, remove the timer
                        clearInterval( jQuery.safariTimer );
                        jQuery.safariTimer = null;

                        // and execute any waiting functions
                        jQuery.ready();
                }
        }, 10);
}

그리고 jQuery 덕분에 개발자는 이러한 모든 함정에 대한 걱정을 라이브러리 개발 팀의 책임으로 돌릴 수 있었습니다.

나중에 jQuery를 사용하면 애니메이션 및 Ajax와 같은 보다 복잡한 기술을 더 쉽게 구현할 수 있습니다. 라이브러리는 사실상 웹사이트의 표준 종속성이 되었습니다. 그리고 오늘날 그것은 인터넷의 엄청난 부분을 차지하고 있습니다. W3Techs는 이렇게 믿습니다. 현재 사이트의 74%가 jQuery를 사용하고 있습니다..

jQuery 개발에 대한 통제도 더욱 공식화되었습니다. 2011년에 팀 jQuery 보드를 만들었습니다.. 그리고 2012년 jQuery 보드에서는 jQuery 재단으로 변환.

2015년에 jQuery 재단은 Dojo 재단과 합병되었습니다. JS 재단을 만들려면, Node.js 재단과 병합되어 2019-m 생성 OpenJS 재단, 그 안에서 jQuery는 “획기적인 프로젝트.»

변화하는 상황

그러나 최근에는 jQuery 인기를 잃었다. GitHub 내 사이트의 프런트엔드에서 라이브러리를 제거했습니다.. 부트스트랩 v5 jQuery를 제거왜냐하면 그건 그의 것이기 때문이다"일반 JavaScript에 대한 가장 큰 클라이언트 종속성"(현재 크기는 30KB, 축소 및 압축됨). 웹 개발의 여러 추세로 인해 필수 도구로서의 jQuery의 위치가 약화되었습니다.

Браузеры

여러 가지 이유로 인해 브라우저의 차이점과 제한 사항이 덜 중요해졌습니다. 첫째, 표준화가 향상되었습니다. 주요 브라우저 개발자(Apple, Google, Microsoft 및 Mozilla)가 협력하여 개발하고 있습니다. 웹 표준 안에 웹 하이퍼텍스트 응용 기술 실무 그룹.
브라우저는 여러 가지 중요한 면에서 여전히 서로 다르지만 공급업체는 적어도 브라우저 대신 공통 데이터베이스를 검색하고 생성할 수 있는 수단을 보유하고 있습니다. 영구 전쟁 함께. 이에 따라 브라우저 API에는 새로운 기능이 추가되었습니다. 예: API 가져 오기 jQuery에서 Ajax 함수를 대체할 수 있습니다.

// jQuery
$.getJSON('https://api.com/songs.json')
    .done(function (songs) {
        console.log(songs);
    })

// native
fetch('https://api.com/songs.json')
    .then(function (response) {
        return response.json();
    })
    .then(function (songs) {
        console.log(songs);
    });

방법 쿼리선택기 и 쿼리선택기모두 중복된 jQuery 선택기:

// jQuery
const fooDivs = $('.foo div');

// native
const fooDivs = document.querySelectorAll('.foo div');

이제 다음을 사용하여 요소 클래스를 조작할 수 있습니다. 클래스 목록:

// jQuery
$('#warning').toggleClass('visible');

// native
document.querySelector('#warning').classList.toggle('visible');

사이트 jQuery가 필요하지 않을 수도 있습니다. jQuery 코드를 네이티브 코드로 대체할 수 있는 몇 가지 상황은 다음과 같습니다. 일부 개발자는 새로운 API에 대해 모르기 때문에 항상 jQuery를 고수하지만, 알고 나면 라이브러리를 덜 자주 사용하기 시작합니다.

기본 기능을 사용하면 페이지 성능이 향상될 수 있습니다. 많은 jQuery의 애니메이션 효과 이제 구현할 수 있습니다 훨씬 더 효과적 CSS를 사용하여.

두 번째 이유는 브라우저가 이전보다 훨씬 빠르게 업데이트되기 때문입니다. 대부분이 사용하는 "에버그린" 갱신 전략, Apple Safari는 제외됩니다. 사용자 개입 없이 백그라운드에서 업데이트할 수 있으며 OS 업데이트와 연결되지 않습니다.

이는 새로운 브라우저 기능과 버그 수정이 훨씬 더 빠르게 배포되고 개발자가 정식 버전이 출시될 때까지 기다릴 필요가 없음을 의미합니다. 사용해도 되나요 허용 가능한 수준에 도달하게 됩니다. jQuery나 폴리필을 다운로드하지 않고도 자신 있게 새로운 기능과 API를 사용할 수 있습니다.

세 번째 이유는 Internet Explorer가 전혀 무관한 상태에 가까워지고 있다는 것입니다. IE는 오랫동안 전 세계 웹 개발의 골칫거리였습니다. 버그는 널리 퍼져 있었으며 IE는 2000년대를 지배했고 지속적인 업데이트 전략을 사용하지 않았기 때문에 이전 버전이 여전히 일반적입니다.

2016년 마이크로소프트는 IE 폐기를 가속화했고, 지원 중단 11번째 및 이전 버전에서는 IE XNUMX로 지원이 제한됩니다. 그리고 점점 더 많은 웹 개발자가 IE 호환성을 무시하는 사치를 누리고 있습니다.

jQuery조차도 IE 8 이하 지원을 중단했습니다. 버전 2.0, 2013년에 출판되었습니다. 예를 들어 오래된 사이트와 같이 일부 경우에는 IE 지원이 여전히 필요하지만 이러한 상황은 점점 더 자주 발생합니다.

새로운 프레임워크

jQuery의 출현 이후 최신 리더를 포함하여 많은 프레임워크가 만들어졌습니다. 반응, 모난 и 뷰. jQuery에 비해 두 가지 중요한 장점이 있습니다.

첫째, 사용자 인터페이스를 구성 요소로 쉽게 분리할 수 있습니다. 프레임워크는 페이지 렌더링 및 업데이트를 처리하도록 설계되었습니다. 그리고 jQuery는 일반적으로 업데이트에만 사용되며 초기 페이지를 제공하는 작업은 서버에 맡깁니다.

반면에 React, Angular 및 Vue 구성 요소를 사용하면 HTML, 코드, 심지어 CSS까지 긴밀하게 결합할 수 있습니다. 코드 베이스를 자체 포함된 여러 함수와 클래스로 나누는 것처럼 인터페이스를 재사용 가능한 구성 요소로 나누는 기능을 사용하면 복잡한 사이트를 더 쉽게 구축하고 유지 관리할 수 있습니다.

두 번째 장점은 최신 프레임워크가 개발자가 인터페이스의 모양을 설명하고 원하는 것을 달성하기 위해 필요한 모든 변경 작업을 프레임워크에 맡기는 선언적 패러다임을 고수한다는 것입니다. 이 접근 방식은 jQuery 코드를 특징짓는 명령형 접근 방식과 반대됩니다.

jQuery에서는 변경 작업을 수행하는 단계를 명시적으로 기록합니다. 그리고 선언적 프레임워크에서는 "이 데이터에 따르면 인터페이스는 다음과 같아야 합니다."라고 말합니다. 이렇게 하면 버그 없는 코드를 훨씬 쉽게 작성할 수 있습니다.

개발자들은 웹 사이트 개발에 새로운 접근 방식을 채택했으며, 이로 인해 jQuery의 인기가 감소했습니다.

jQuery는 언제 사용하는가?

그렇게 할 때 해야 jQuery를 사용 하시겠습니까?

프로젝트의 복잡성이 증가하면 복잡성을 의미 있게 관리할 수 있는 다른 라이브러리나 프레임워크로 시작하는 것이 좋습니다. 예를 들어 인터페이스를 구성 요소로 나눕니다. 이러한 사이트에서 jQuery를 사용하면 처음에는 괜찮아 보일 수 있지만 어느 조각이 페이지의 어느 부분에 영향을 미치는지 확신할 수 없는 스파게티 코드로 빠르게 이어질 것입니다.

나는 그런 상황에 처해 있었기 때문에 변화를 시도할 때 어려운 일처럼 느껴졌습니다. jQuery 선택기는 서버에서 생성된 HTML 구조에 의존하기 때문에 어떤 것도 깨지지 않을 것이라고 확신할 수 없습니다.

그 반대편에는 약간의 상호작용성이나 동적 콘텐츠만 필요한 단순한 사이트가 있습니다. 네이티브 API로 할 수 있는 일이 훨씬 더 많기 때문에 이러한 경우에도 기본적으로 jQuery를 사용하지는 않습니다.

더 강력한 것이 필요하더라도 전문 라이브러리를 찾을 것입니다. 액시 오스 Ajax의 경우 또는 Animate.css 애니메이션용. 이는 작은 기능을 위해 모든 jQuery를 로드하는 것보다 쉬울 것입니다.

jQuery를 사용하는 가장 좋은 이유는 그것이 웹 사이트의 프런트 엔드에 대한 포괄적인 기능을 제공한다는 것입니다. 다양한 기본 API나 특수 라이브러리를 배우는 대신 jQuery 문서만 읽고 즉시 생산성을 높일 수 있습니다.

명령형 접근 방식은 확장성이 좋지 않지만 다른 라이브러리의 선언적 접근 방식보다 배우기가 더 쉽습니다. 기능이 명확하게 제한된 사이트의 경우 jQuery를 사용하고 차분하게 작업하는 것이 좋습니다. 라이브러리에는 복잡한 어셈블리나 컴파일이 필요하지 않습니다.

또한 사이트가 시간이 지나도 복잡해지지 않을 것이라고 확신하고 jQuery보다 더 많은 코드를 작성해야 하는 기본 기능에 관심이 없다면 jQuery가 좋습니다.

이전 버전의 IE를 지원해야 하는 경우에도 이 라이브러리를 사용할 수 있습니다. 그러면 jQuery는 IE가 가장 인기 있는 브라우저였던 시절처럼 여러분에게 서비스를 제공할 것입니다.

Prospection

jQuery는 조만간 사라지지 않을 것입니다. 그녀 적극적으로 개발, 많은 개발자는 기본 메소드를 사용할 수 있더라도 API 사용을 선호합니다. 이 라이브러리는 모든 세대의 개발자가 모든 브라우저에서 작동하는 웹 사이트를 만드는 데 도움이 되었습니다. 새로운 라이브러리, 프레임워크, 패러다임으로 여러 면에서 대체되었지만 jQuery는 현대 웹 생성에 매우 긍정적인 역할을 해왔습니다.

jQuery의 기능이 크게 변경되지 않는 한, 라이브러리 사용은 향후 몇 년 동안 계속 느리지만 꾸준히 감소할 가능성이 높습니다. 새로운 웹 사이트는 처음부터 보다 현대적인 프레임워크를 사용하여 구축되는 경향이 있으며 jQuery에 적합한 사용 사례는 점점 더 드물어지고 있습니다.

어떤 사람들은 웹 개발 도구가 쓸모없어지는 속도를 좋아하지 않지만, 나에게 그것은 빠른 발전의 증거입니다. jQuery를 사용하면 많은 일을 더 잘할 수 있습니다. 그녀의 후계자들도 마찬가지다.

출처 : habr.com