[JS] GITHUB이 Jquery를 삭제하다

GITHUB이 Jquery를 삭제하다

2018년 6월 GITHUB이 프론트 엔드 디펜던시로 JQUERY를 삭제 할 수 있었던 것에 대한 내용을 발췌한 글입니다.

우리는 최근 GitHub.com 프론트 엔드 코드의 종속성으로 jQuery를 삭제할 수있는 획기적인 작업을 완료했습니다. 

이것은 우리가 라이브러리를 완전히 제거 할 수있을 때까지 점차적으로 jQuery에서 분리되는 장기간의 전환의 끝을 의미합니다. 

이 글에서는 jQuery에 처음부터 어떻게 의존했는지, 더 이상 필요하지 않을 때 어떻게 실현했는지, 그리고 다른 라이브러리 나 프레임 워크로 대체하지 않고 표준 브라우저 API를 사용하여 필요한 모든 것을 얻을 수 있습니다.

GitHub.com은 2007년 말에 jQuery 1.2.1을 의존성으로 잡았습니다. 

Google이 Chrome 브라우저의 첫 번째 버전을 발표하기 1 년 전이었습니다. CSS 선택기로 DOM 요소를 쿼리하는 표준 방법이 없었으며 요소의 시각적 스타일을 애니메이션화하는 표준 방법이 없었으며 Internet Explorer에서 개척 된 XMLHttpRequest 인터페이스는 다른 많은 API와 마찬가지로 크로스 브라우징 이슈가 있었습니다.

jQuery는 DOM을 조작하고 애니메이션을 정의하고 "AJAX"요청을 만드는 것을 간단하게 만들었습니다. 

기본적으로 웹 개발자는 나머지에서 서서 더 현대적이고 역동적 인 경험을 할 수있었습니다. 

가장 중요한 점은 jQuery와 함께 하나의 브라우저에 내장 된 JavaScript 기능은 일반적으로 다른 브라우저에서도 작동한다는 것입니다. (크로스브라우징 이슈 해결) 

GitHub 초기에는 대부분의 기능이 여전히 복잡해지고 있었기 때문에 소규모 개발 팀이 각 웹 브라우저별로 코드를 조정하지 않고도 신속하게 프로토 타입을 작성하고 새로운 기능을 사용할 수있었습니다. (생산성)

하지만 점점 가치가 떨어지는 의존성에 대해서 고찰합니다.

jQuery에 관해서는 현대의 브라우저에서 지원되는 웹 표준의 급속한 진화와 비교하여 다음과 같이 나타 냈습니다.

1. $(selector) 패턴은 querySelectorAll()로 쉽게 대체 할 수 있습니다. 

2. 이제 Element.classList를 사용하여 CSS 클래스 이름을 전환 할 수 있습니다. 

3. CSS는 이제 JavaScript보다는 스타일 시트에서 시각적인 애니메이션을 정의하는 것을 지원합니다. 

4. $ .ajax 요청은 Fetch Standard를 사용하여 수행 할 수 있습니다. 

5. addEventListener() 인터페이스는 플랫폼 간 사용에 충분히 안정적입니다. 6. 경량 라이브러리로 이벤트 위임 패턴을 쉽게 캡슐화 할 수 있습니다. 

7. jQuery가 제공하는 일부 구문은 자바 스크립트 언어의 진화와 관련이 있습니다.

게다가, Chaining 구문은 앞으로 코드를 작성하는 방법을 만족시키지 못했습니다.

이 구문은 간단하게 작성할 수 있지만 표준에 따라 의도를 잘 전달하지 못합니다. 

작성자가이 페이지에서 하나 이상의 js 위젯 요소를 기대 했습니까? 또한 페이지 마크 업을 업데이트하고 우연히 js-widget 클래스 이름을 생략하면 브라우저에서 예외가 발생했음을 알려줍니다. 

기본적으로 jQuery는 초기 선택자와 아무 것도 일치하지 않을 때 자동으로 전체 표현을 건너 뜁니다. 

그러나 우리에게 그러한 행동은 기능이 아니라 버그였습니다.

결국 우리는 Flow를 사용하여 유형을 주석으로 작성하여 빌드시 정적 유형 확인을 수행하기를 원했으며 jQuery 메소드 호출의 거의 모든 결과가 동일한 유형이기 때문에 연결 구문이 정적 분석에 적합하지 않다고 결론을 냈습니다 . 

당시에는 @flow weak 모드와 같은 기능을 사용하여 대체로 유형이없는 코드베이스에 유형을 점진적이고 효율적으로 적용 할 수 있었기 때문에 대안을 통한 Flow를 선택했습니다.

대체로 jQuery와의 연결 해제는 웹 표준에 더 많이 의존 할 수 있고, MDN 웹 문서를 프론트 엔드 개발자를위한 사실상의 기본 문서로 만들고, 향후 탄력적 인 코드를 유지하며, 결국 우리의 페이지로드 시간 및 JavaScript 실행 시간을 가속화합니다.

하지만 결국 목표를 달성하더라도 jQuery에서 바닐라 JS로 모든 것을 다시 작성해야하는 모든 자원을 할당하는 것이 실현 가능하지 않다는 것을 알았습니다. 무엇보다도 그러한 급한 노력은 우리가 나중에 제거해야하는 사이트 기능에 많은 회귀를 초래할 수 있습니다. 

대신 우리는 새로운 코드에서 jQuery를 가져 오는 것을 꺼려했습니다. 자동화를 사용하기 위해 jQuery 기능 (예 : $ .ajax)을 사용하려고하면 CI 확인에 실패하는 eslint-plugin-jquery를 만들었습니다.

우리는 jQuery의 커스텀 빌드를 유지했으며, 더 이상 jQuery의 특정 모듈을 사용하지 않는다는 것을 확인한 후에는 커스텀 빌드에서 제거하고 더 슬림 한 버전을 출시 할 것입니다. 

예를 들어, visible 또는 : checkbox와 같은 jQuery 특정 CSS 의사 선택자의 최종 사용을 제거한 후에 Sizzle 모듈을 제거 할 수있었습니다. 

마지막 $ .ajax 호출이 fetch ()로 대체되면 AJAX 모듈을 제거 할 수있었습니다. 

이것은 자바 스크립트 실행 시간을 단축하는 동시에 새로운 기능이 제거 된 기능을 사용하려고 시도하지 않도록 보장하는 두 가지 목적을 수행했습니다.

우리 사이트 분석에 의하면 가능한 한 빨리 이전 Internet Explorer 버전에 대한 지원을 중단했습니다. 특정 IE 버전의 사용이 특정 임계 값 이하로 떨어지면 JavaScript를 제공하지 않고 최신 브라우저를 테스트하고 지원하는 데 집중할 것입니다. 초기에 IE 8-9에 대한 지원을 중단하면 다차원 적으로 처리하기 힘든 많은 기본 브라우저 기능을 채택 할 수있었습니다.

GitHub.com에서 프론트 엔드 기능을 구현하는 세련된 접근 방식의 일환으로, 우리는 가능한 한 많은 일반 HTML 기초를 없애고 점진적 향상으로 JavaScript 동작 만 추가하는 데 중점을 두었습니다. 

결과적으로 JS를 사용하여 향상 된 웹 양식 및 기타 UI 요소조차도 일반적으로 브라우저에서 JavaScript를 사용할 수 없게 설정되어 작동합니다. 

경우에 따라 특정 레거시 동작을 바닐라 JS로 다시 작성하지 않고 삭제할 수있었습니다.

수년에 걸친 이와 같은 노력 덕분에 우리는 jQuery에 대한 의존성을 점차적으로 줄였습니다. 이제는 한 줄의 코드조차 더 이상 jQuery를 참조하지 않습니다.

표준 브라우저 기능을 사용하도록 전환하는 데 도움이되는 polyfill입니다. 우리는 절대적으로 필요한 경우에만, 즉 별도의 "호환성"JavaScript 번들의 일부로 오래된 브라우저에 이러한 폴리필을 제공하려고합니다.

• github/eventlistener-polyfill
• github/fetch
• github/form-data-entries
• iamdustan/smoothscroll
• javan/details-element-polyfill
• jonathantneal/closest
• kumarharsh/custom-event-polyfill
• marvinhagemeister/request-idle-polyfill
• mathiasbynens/Array.from
• mathiasbynens/String.prototype.codePointAt
• mathiasbynens/String.prototype.endsWith
• mathiasbynens/String.prototype.startsWith
• medikoo/es6-symbol
• nicjansma/usertiming.js
• rubennorte/es6-object-assign
• stefanpenner/es6-promise
• webcomponents/template
• webcomponents/URL
• webcomponents/webcomponentsjs
• WebReflection/url-search-params
• yola/classlist-polyfill

출처 : 

https://githubengineering.com/removing-jquery-from-github-frontend/