GitHub: Warum lehnen wir jQuery ab?

Vor kurzem haben wir jQuery vollständig aus dem Front-End-Code von GitHub.com entfernt, was das Ende unseres schrittweisen Prozesses der schrittweisen Entfernung von jQuery über mehrere Jahre darstellt. In diesem Artikel wird beschrieben, wie wir uns in der Vergangenheit auf jQuery verlassen haben und mit der Zeit festgestellt haben, dass wir es nicht mehr benötigen. Am Ende haben wir es jedoch nicht durch eine andere Bibliothek oder ein anderes Framework ersetzt, sondern einen Standardbrowser verwendet. Die API implementiert alles, was wir tun brauchen.
jQuery bedeutete uns in den frühen Tagen sehr viel

GitHub.com begann Ende 2007, jQuery 1.2.1 zu verwenden, ein Jahr bevor Google Chrome veröffentlichte. Es gab keine Standardmethode zum Abfragen von DOM-Elementen über CSS-Selektoren oder zum dynamischen Rendern des Stils eines Elements, und die XMLHttpRequest-Schnittstelle des Internet Explorers litt wie viele andere APIs unter Inkonsistenzen zwischen Browsern.

jQuery macht es einfach, DOM zu manipulieren, Animationen und „AJAX“-Anfragen zu erstellen, im Grunde ermöglicht es Webentwicklern, modernere und dynamischere Weberlebnisse zu erstellen. Das Beste ist, dass mit jQuery für einen Browser entwickelter Code auch in anderen Browsern funktioniert. In den Anfängen von GitHub ermöglichte jQuery kleinen Entwicklungsteams, schnell Prototypen zu erstellen und neue Funktionen zu entwickeln, ohne den Code speziell an jeden Webbrowser anpassen zu müssen.

Die auf der einfachen Schnittstelle von jQuery basierende Erweiterungsbibliothek ist auch zum Grundbaustein des GitHub.com-Frontends geworden: pjax (https://github.com/defunkt/jquery-pjax) und Facebox ( https://github.com/defunkt/facebox).

Wir werden John Resig und die jQuery-Mitwirkenden nie vergessen, weil sie eine so nützliche und wichtige Bibliothek erstellt und gepflegt haben.

Spätere Webstandards

Im Laufe der Jahre wuchs GitHub zu einem Unternehmen mit Hunderten von Ingenieuren und baute nach und nach ein engagiertes Team auf, das für den Umfang und die Qualität von JavaScript-Code verantwortlich ist. Wir haben technische Schulden ausgeschlossen, und manchmal wachsen technische Schulden mit Abhängigkeiten, die uns am Anfang einen gewissen Wert verschaffen, aber dieser Wert nimmt mit der Zeit auch ab.

Wir können jQuery mit der schnellen Entwicklung von Webstandards vergleichen, die von modernen Browsern unterstützt werden:
$(selector)-Muster kann mit querySelectorAll() ersetzt werden;
kann jetzt mit Element.classList Implement ersetzt werden CSS-Klassennamenwechsel;
CSS unterstützt jetzt das Definieren visueller Animationen in Stylesheets anstelle von JavaScript.
Sie können jetzt Fetch Standard verwenden, um $.ajax-Anfragen auszuführen.
Die Schnittstelle addEventListener() ist stabil genug plattformübergreifend verwendet;
Wir können leichtgewichtige Bibliotheken verwenden, um das Ereignisdelegierungsmuster zu kapseln.
Mit der Entwicklung der JavaScript-Sprache ist ein Teil der von jQuery bereitgestellten Syntax überflüssig geworden.
Außerdem entspricht die Kettensyntax nicht der Art und Weise, wie wir Code schreiben möchten. Zum Beispiel:

$('.js-widget')
  .addClass('is-loading')
  .show()

Diese Syntax ist einfach zu schreiben, aber nach unseren Maßstäben vermittelt sie unsere Absicht nicht gut. Erwartet der Autor ein oder mehrere js-widget-Elemente auf der aktuellen Seite? Wenn wir das Seiten-Markup aktualisieren und versehentlich den Klassennamen js-widget weglassen, löst der Browser dann eine Ausnahme aus, die uns mitteilt, was schief gelaufen ist? Standardmäßig überspringt jQuery den gesamten Ausdruck, wenn nichts mit dem Selektor übereinstimmt, aber für uns war das ein Fehler.

Schließlich haben wir begonnen, Flow zum Annotieren von Typen zu verwenden, um eine statische Typprüfung zur Erstellungszeit durchzuführen, und haben festgestellt, dass die Kettensyntax nicht für die statische Analyse geeignet ist, da fast alle jQuery-Methoden denselben Ergebnistyp zurückgeben. Wir haben uns damals für Flow entschieden, weil Funktionen wie der schwache @flow-Modus es uns ermöglichten, nach und nach Typen auf unsere untypisierte Codebasis anzuwenden.

Alles in allem bedeutet das Entfernen von jQuery, dass wir uns stärker auf Webstandards verlassen können, die MDN-Webdokumentation de facto zur Standarddokumentation für Front-End-Entwickler machen, in Zukunft stabileren Code beibehalten und die 30-KB-Abhängigkeiten reduzieren können werden aus unseren Paketen entfernt, wodurch das Laden der Seite und die Ausführung von JavaScript beschleunigt werden.

Schrittweise Entkopplung
Obwohl wir uns das ultimative Ziel gesetzt haben, wissen wir auch, dass es nicht möglich ist, alle Ressourcen auf einmal für die Entfernung von jQuery bereitzustellen. Dieses übereilte Vorgehen kann zu Einbußen bei der Funktionalität der Website führen. Stattdessen haben wir die folgende Strategie übernommen:

1. 设定指标，跟踪整一行代码调用 jQuery 的比率，并监控指标走势随时间变化的情况，确保它保持不变或下降，而不是上升。
2. 我们不鼓励在任何新代码中导入 jQuery。为了方便自动化，我们创建了 eslint-plugin-jquery（https://github.com/dgraham/eslint-plugin-jquery），如果有人试图使用 jQuery 功能，例如 $.ajax，CI 检查将会失败。
3. 旧代码中存在大量违反 eslint 规则的情况，我们在代码注释中使用特定的 eslint-disable 规则进行了注解。看到这些代码的读者，他们都该知道，这些代码不符合我们当前的编码实践。
4. 我们创建了一个拉请求机器人，当有人试图添加新的 eslint-disable 规则时，会对拉取请求留下评论。这样我们就可以尽早参与代码评审，并提出替代方案。
5. 很多旧代码使用了 pjax 和 facebox 插件，所以我们在保持它们的接口几乎不变的同时，在内部使用 JS 重新实现它们的逻辑。静态类型检查有助于提升我们进行重构的信心。
6. 很多旧代码与 rails-behavior 发生交互，我们的 Ruby on Rails 适配器几乎是“不显眼的”JS，它们将 AJAX 生命周期处理器附加到某些表单上：

// 旧方法
  $(document).on('ajaxSuccess', 'form.js-widget', function(event, xhr, settings, data) {
    // 将响应数据插入到 DOM 中
  })

7. 我们选择触发假的 ajax* 生命周期事件，并保持这些表单像以前一样异步提交内容，而不是立即重写所有调用，只是会在内部使用 fetch()。
8. 我们自己维护了 jQuery 的一个版本，每当发现我们不再需要 jQuery 的某个模块的时候，就会将它从自定义版本中删除，并发布更轻量的版本。例如，在移除了 jQuery 的 CSS 伪选择器之后（如:visible 或:checkbox）我们就可以移除 Sizzle 模块了，当所有的 $.ajax 调用都被 fetch() 替换时，就可以移除 AJAX 模块。
这样做有两个目的：加快 JavaScript 执行速度，同时确保不会有新代码试图使用已移除的功能。
9. 我们根据网站的分析结果尽快放弃对旧版本 Internet Explorer 的支持。每当某个 IE 版本的使用率低于某个阈值时，我们就会停止向它提供 JavaScript 支持，并专注支持更现代的浏览器。尽早放弃对 IE 8 和 IE 9 的支持对于我们来说意味着可以采用很多原生的浏览器功能，否则的话有些功能很难通过 polyfill 来实现。
10. 作为 GitHub.com 前端功能开发新方法的一部分，我们专注于尽可能多地使用常规 HTML，并且逐步添加 JavaScript 行为作为渐进式增强。因此，那些使用 JS 增强的 Web 表单和其他 UI 元素通常也可以在禁用 JavaScript 的浏览器上正常运行。在某些情况下，我们可以完全删除某些遗留的代码，而不需要使用 JS 重写它们。

经过多年的努力，我们逐渐减少对 jQuery 的依赖，直到没有一行代码引用它为止。

自定义元素

近年来一直在炒作一项新技术，即自定义元素——浏览器原生的组件库，这意味着用户无需下载、解析和编译额外的字节。

从 2014 年开始，我们已经基于 v0 规范创建了一些自定义元素。然而，由于标准仍然在不断变化，我们并没有投入太多精力。直到 2017 年，Web Components v1 规范发布，并且 Chrome 和 Safari 实现了这一规范，我们才开始更广泛地采用自定义元素。

在移除 jQuery 期间，我们也在寻找用于提取自定义元素的模式。例如，我们将用于显示模态对话框的 facebox 转换为元素（https://github.com/github/details-dialog-element）。

我们的渐进式增强理念也延伸到了自定义元素上。这意味着我们将尽可能多地保留标记内容，然后再标记上添加行为。例如，默认显示原始时间戳，它被升级成可以将时间转换为本地时区，而对于，当它被嵌在

// local-time 根据用户的当前时区显示时间。
//
// 例如:
//   <local-time datetime="2018-09-06T08:22:49Z">Sep 6, 2018</local-time>
//
class LocalTimeElement extends HTMLElement {
  static get observedAttributes() {
    return [&#39;datetime&#39;]
  }
  attributeChangedCallback(attrName, oldValue, newValue) {
    if (attrName === &#39;datetime&#39;) {
      const date = new Date(newValue)
      this.textContent = date.toLocaleString()
    }
  }
}
if (!window.customElements.get(&#39;local-time&#39;)) {
  window.LocalTimeElement = LocalTimeElement
  window.customElements.define(&#39;local-time&#39;, LocalTimeElement)
}