ChromeDevToolsがバイクから標準に移行した方法

ChromeDevToolsが内部モジュールローダーから標準のJavaScriptモジュールにどのように移行したかについての簡単なメモ。移行が遅れた理由とその理由、移行の隠れたコスト、および移行が完了した後のDevToolsチームの結論について説明します。しかし、Web開発者ツールの歴史から始めましょう。

前書き

ご存知かもしれませんが、Chrome DevToolsはHTML、CSS、JavaScriptのWebアプリケーションです。何年にもわたって、DevToolsは機能が豊富で、スマートで、最新のWebプラットフォームに関する知識が豊富になっています。DevToolsは拡張されましたが、そのアーキテクチャは、ツールがWebKitの一部であったときのオリジナルを大部分思い出させます。



DevToolsのストーリーを説明し、ソリューションの利点と制限、およびそれらの制限を緩和するために行ったことについて説明します。それでは、モジュラーシステム、コードのロード方法、およびJavaScriptモジュールを使用することになった方法について詳しく見ていきましょう。

最初は何もありませんでした

フロントエンドには、多くのモジュラーシステムとそのツール、および標準化されたJavaScriptモジュール形式があります。これは、DevToolsが開始されたときではありませんでした。このツールは、12年以上前に作成されたWebKitコードの上に構築されています。



DevToolsでのモジュラーシステムの最初の言及は2012年にさかのぼります。それは、対応するソースのリストを備えたモジュールのリストの導入でした。 DevToolsのコンパイルとビルドに当時使用されていたPythonインフラストラクチャの一部。 2013年には、frontend_modules.json このコミットによってモジュールがファイルにチェックアウトされ、2014年には、別々のモジュールにチェックアウトされましたmodule.json（ここ）。例module.json：

{
  "dependencies": [
    "common"
  ],
  "scripts": [
    "StylePane.js",
    "ElementsPanel.js"
  ]
}

2014年以降module.json、開発者ツールでモジュールとソースファイルを指すために使用されています。その間に、Webエコシステムは急速に成長し、UMD、CommonJS、そして最終的には標準化されたJavaScriptモジュールなどの多くのモジュール形式が作成されました。ただし、DevToolsはに固執していmodule.jsonます。標準化されていない独自のモジュラーシステムには、いくつかの欠点がありました。

1. module.json 独自のビルドツールが必要でした。
2. IDEの統合はありませんでした。もちろん、彼女が理解したファイルを作成するには、特別なツールが必要でした:( jsconfig.jsonVSコードの場合）。
3. モジュール間で共有できるように、関数、クラス、およびオブジェクトがグローバルスコープに配置されています。
4. ファイルがリストされた順序は重要でした。信頼できるコードがアップロードされたという保証は、人間による検証以外にはありませんでした。

一般に、DevToolsモジュラーシステムおよびその他のより広く使用されているモジュール形式の現在の状態を評価したmodule.jsonところ、解決したよりも多くの問題が発生したという結論に達しました。

標準の利点

JavaScriptモジュールを選択しました。この決定がなされたとき、その言語のモジュールはまだNode.jsでフラグが付けられており、多数のNPMパッケージがそれらをサポートしていませんでした。とにかく、JavaScriptモジュールが最良の選択肢であると結論付けました。



モジュールの主な利点は、言語が標準化された形式であることです。短所をリストしたときmodule.json、私たちは、それらのほとんどすべてが、標準化されていない独自のモジュール形式の使用に関連していることに気づきました。標準化されていないモジュール形式を選択するということは、ビルドツールと同僚のツールを使用して統合を構築するために時間を費やす必要があることを意味します。これらの統合はしばしば壊れやすく、機能のサポートが不足しており、追加のメンテナンス時間が必要であり、時にはトリッキーなバグがありました。バグは結局ユーザーを襲った。



JavaScriptモジュールが標準であったため、これは、VSコードなどのIDE、Closure / TypeScriptコンパイラなどのタイプチェックツール、およびロールアップやミニファイアなどのビルドツールが記述されたソースコードを理解できることを意味しました。さらに、新しい人がDevToolsチームに参加するとき、彼らは専有を学ぶのに時間を無駄にする必要はありませんmodule.json。



もちろん、DevToolsが最初に開始されたとき、上記の利点はどれも存在しませんでした。ランタイムを実装するには、標準グループで何年もの作業が必要でした。モジュールのユーザーである開発者からのフィードバックには時間がかかりました。しかし、モジュールがその言語で登場したとき、私たちは独自のフォーマットをサポートし続けるか、新しいフォーマットへの移行に投資するかのどちらかを選択しました。

ノベルティの輝きにはどれくらいの費用がかかりますか？

JavaScriptモジュールには、使用したい多くの利点がありましたが、私たちは世界にとどまりましたmodule.json。言語のモジュールを利用することは、技術的な負債にかなりの努力を費やさなければならなかったことを意味しました。その間、移行によって機能が破損し、回帰バグが発生する可能性があります。



JavaScriptモジュールを使用しているかどうかではありませんでした。問題は、JavaScriptモジュールを使用する機能がどれほど高価かということでした。ユーザーを煩わせるリスクとリグレッション、エンジニアの移行にかかる時間、および運用するシステムの状態が悪化する期間のバランスをとる必要がありました。



最後の点は非常に重要であることが判明しました。理論的にはJavaScriptモジュールにアクセスできますが、移行中に、両方のタイプのモジュールを考慮に入れたコードになってしまいます。これは技術的に困難であるだけでなく、DevToolsで作業するすべてのエンジニアがそのような環境での作業方法を知る必要があることも意味します。彼らは常に自分自身に「このコードで何が起こっているのmodule.jsonか、それはJSであり、どうすれば変更を加えることができるのか」と自問する必要があります。

同僚のトレーニングに関する移行の潜在的なコストは、予想よりも高かった。

コストを分析した結果、その言語のモジュールに切り替える価値はまだあるという結論に達しました。したがって、私たちの主な目標は次のとおりです。

1. 標準モジュールが可能な限り有用であることを確認してください。
2. ベース上の既存のモジュールとの統合がmodule.json安全であり、ユーザーに悪影響（回帰エラー、ユーザーのフラストレーション）を引き起こさないことを確認してください。
3. DevTools移行ガイドを提供します。主に、偶発的なミスを防ぐためにプロセスに組み込まれたチェックとバランスを介して。

スプレッドシート、コンバージョン、技術債務

目標は明確でした。しかし、制限をmodule.json回避するのは困難でした。使用可能なソリューションを思い付くまでに、数回の反復、プロトタイプ、およびアーキテクチャの変更が必要でした。最終的に、移行戦略を使用してプロジェクトドキュメントを作成しました。この文書は、時間の最初の見積もりを与えました：2-4週間。

移行の最も集中的な部分は4か月かかり、最初から最後まで7か月が経過しました。

ただし、元の計画は時の試練に耐えてきました。配列scripts module.jsonにリストされているすべてのファイルmodulesを動的言語インポートによってロードする必要がある一方で、配列にリストされているファイルを使用する古い方法ですべてのファイルをロードするようにDevToolsランタイムに教えたかったのです。アレイ内にあるすべてのファイルは、ES6との間でmodules連携できます。 さらに、2つのフェーズで移行したいと考えました。最終的に、最後のフェーズをエクスポートとインポートの2つのサブフェーズに分割します。モジュールとフェーズは、大きなスプレッドシートで追跡されました。importexport









こちらの移行テーブルの抜粋。

エクスポートフェーズ

最初のステップは、モジュール/ファイル間で共有する必要があるすべてのエンティティのエクスポートステートメントを追加することでした。変換は、フォルダごとにスクリプトを実行することで自動化されました。module.jsonそのようなエンティティがあるとしましょう：

Module.File1.exported = function() {
  console.log('exported');
  Module.File1.localFunctionInFile();
};
Module.File1.localFunctionInFile = function() {
  console.log('Local');
};

ここではModule、モジュールの名前です。File1- ファイル名。コードツリーでは、次のようになりますfront_end/module/file1.JS。



上記のコードはこれに変換されます：

export function exported() {
  console.log('exported');
  Module.File1.localFunctionInFile();
}
export function localFunctionInFile() {
  console.log('Local');
}

/** Legacy export object */
Module.File1 = {
  exported,
  localFunctionInFile,
};

当初は、この段階でインポートを1つのファイルに書き換える予定でした。例えば、上記の例では、我々は書き直すでしょうModule.File1.localFunctionInFileにlocalFunctionInFile。ただし、2つの変換を自動化する方が簡単で、安全であることがわかりました。したがって、「すべてのエンティティを1つのファイルに転送する」ことは、2番目のインポートサブフェーズになります。



キーワードを追加するとexportファイルが「スクリプト」から「モジュール」に変わるため、それに応じてDevToolsインフラストラクチャの多くを更新する必要がありました。フレームワークには、動的インポートランタイムと、モジュールモードで実行するためのESLintなどのツールが含まれていました。



厄介なのは、テストが「非厳密」モードで実行されたことです。JavaScriptモジュールは、ファイルが厳密モードで実行されることを意味します。これはテストに影響しました。それが判明したように、テストの非自明数を含む、非厳密モードに依存していたテストオペレータが存在していますwith。



最終的に、最初のフォルダーの更新（エクスポートの追加）には約1週間かかり、リロードを数回試行しました。

インポートフェーズ

すべてのエンティティがexportステートメントを使用してエクスポートされた後、レガシーのためにグローバルスコープのままで、ESインポートを使用するには、すべてのエンティティ参照が複数のファイルにある場合は更新する必要がありました。最終的な目標は、グローバルスコープをクリアすることにより、期限切れのエクスポートをすべて削除することです。変換は、フォルダごとにスクリプトを実行することで自動化されました。



たとえば、次のエンティティmodule.json：

Module.File1.exported();
AnotherModule.AnotherFile.alsoExported();
SameModule.AnotherFile.moduleScoped();

に変換：

import * as Module from '../module/Module.js';
import * as AnotherModule from '../another_module/AnotherModule.js';

import {moduleScoped} from './AnotherFile.js';

Module.File1.exported();
AnotherModule.AnotherFile.alsoExported();
moduleScoped();

ただし、このアプローチには注意点があります。

1. すべてのエンティティが原則として命名されたわけではありませんModule.File.symbolName。一部のエンティティには名前が付けられているModele.Fileか、またはModule.CompletelyDifferentName。不一致は、古いグローバルオブジェクトから新しくインポートされたオブジェクトへの内部マッピングを作成する必要があることを意味しました。
2. moduleScoped. , Events, , Events. , , , import Events .
3. , . , . , , . , , ( DevTools). , , .

JavaScript

2019年9月の開始から6か月後の2020年2月に、最後のクリーンアップがui /フォルダーで実行されました。そのため、移行は非公式に終了しました。ほこりが落ち着いたら、2020年3月5日に正式に移行完了のマークを付けました。



現在、DevToolsはJavaScriptモジュールでのみ機能します。module.jsレガシーテストまたはアーキテクトのツールの他の部分との統合のために、一部のエンティティを（レガシーファイルの）グローバルスコープに配置しています。これらは時間の経過とともに削除されますが、開発を妨げるものとは見なされません。JavaScriptモジュールのスタイルガイドもあります。

統計学

この移行に関係するCL（チェンジリスト-GitHubプルリクエストと同様にGerritで使用される用語）の数の控えめな見積もりは約250 CLであり、ほとんどが2人のエンジニアによって行われます。行われた変更のサイズに関する最終的な統計はありませんが、変更された行の控えめな見積もり（各CLの挿入と削除の絶対差の合計）は約30,000行であり、これはすべてのDevToolsフロントエンドコードの約20％です。



エクスポートされた最初のファイルは、2019年12月の安定版リリースでリリースされたChrome79でサポートされています。インポートに切り替える最後の変更は、2020年5月の安定版リリースでリリースされたChrome83です。



安定したChromeでの移行による1つのリグレッションを認識しています。無関係なデフォルトのエクスポートが原因で、コマンドバーのコードスニペットの自動補完が機能しなくなりました。他にもいくつかのリグレッションがありましたが、自動テストケースとChromeCanaryユーザーから報告されています。Chromeの安定したリリースに入る前に、バグを修正しました。ここで 登録すると、ストーリー全体を見ることができます。すべてではありませんが、ほとんどのCLはこのエラーに関連しています。

私たちは何を学びましたか？

1. . , JavaScript ( ) , DevTools . , , , .
2. — , . , , . , , , .
3. (, ) . -. , Python Rollup.
4. (~20% ), . , , . , .
5. , . . , , , . , , — . , , .

, Level Up , - SkillFactory:

• Java- (18 )
• JavaScript (12 )

E

• Data Science (12 )
• - (8 )
• Machine Learning (12 )
• «Machine Learning Pro + Deep Learning» (20 )
• « Machine Learning Data Science» (20 )
• «Python -» (9 )
• DevOps (12 )
• (9 )
• UX- (9 )
• Web- (7 )