強力なPWA
開発中にWebアプリケーションをデバッグするために使用しているツールは、プログレッシブWebアプリ自体であることをご存知ですか？ PWAについてまだ聞いたことがない場合は、ここに要点があります。PWAは、その機能においてネイティブアプリに匹敵する最新のWebのエクスペリエンスを構築できる次世代のWebアプリケーションです。
したがって、GoogleのDevToolsは、ご想像のとおり「ネイティブコード」ではなく、プログレッシブウェブアプリとして作成されていることを知っておくことは非常に興味深いことです。これは、複雑でリソースを大量に消費するタスクにも取り組むPWAの力を示しています。
DevToolsは常にPWAでしたか？
実際にはありません。DevToolsアプリケーションは元々Backbone.jsと呼ばれるフレームワークで作成されていました。これにより、jQueryが依然として主要なライブラリであるときに、サーバーに緊密にバインドされたWebアプリのMVCパターンを実装できました。現在、最新のプログレッシブWebアプリなど、Backbone.jsを無関係なオプションにする可能性のある他のオプションが存在します。 Backbone.jsの概念はまだ生きており、たとえばMeteor.jsなどのフレームワークで積極的に使用されていることに注意してください。
DevToolsは当初、カスタムモジュール形式も使用していましたが、これもカスタムpythonスクリプトで処理する必要がありました。現在、プラットフォームはTypescriptやECMAScriptなどの一般的に使用される標準を使用して、開発中の摩擦を減らしています。カスタムソリューションでは技術的負債が発生する可能性があるため、DevToolsの場合は実際に発生しました。また、カスタムpythonスクリプトを使用する代わりに、DevToolsは、Googleが開発した最新のオープンバンドラーであるRollupを介してバンドルされるようになりました。
150,000行のコード
2020年、DevToolsは合計150,000行のファーストパーティコードで構成され、非常に大規模なアプリケーションでした。これは、最新のWebアプリの重要な側面を浮き彫りにします。最新のツールを使用してコード分割などの言語機能を活用するPWAを使用すると、アプリケーションのサイズを必要なだけ大きくすることができます。
テストされていない場合は壊れています
ご覧のとおり、DevToolsは完全に移行されており、実質的にプロセス全体が脳移植になっています。開発者は、メインフレームワークだけでなく、モジュールシステムや言語も置き換えて、制御不能な状態のリグレッションや混乱を回避するための安全第一のアプローチを必要としていました。
したがって、チームはガイドラインの1つとして、「テストされていない場合は壊れている」と述べました。もう1つの重要なステートメント：「退屈なコードは最高のコードです。」この文を初めて読んだときに嫌いになるかもしれませんが、開発者の目標は、プログラムをできるだけ自己記述的で理解しやすいものにすることでした。したがって、いくつかの凝った言語機能を使用するのではなく、最高の読みやすさを提供することが最も重要です。
結論
このサイトの他の記事をご存知の場合は、PWAに関しては私がかなりのファンであることをご存知でしょう。それらはすべてあなたのブラウザでそのような素晴らしいパフォーマンスを提供します。 DevToolsは、視覚化するために多くのデータを処理するため、明らかに最も興味深い例の1つです。このすべての情報のソースは、DevToolsチームによってアップロードされ、このページの最後にある補遺にリンクされているYouTubeビデオです。
