ジェレミーワグナーとポッドキャストエピソード45を壊す：責任あるJavaScriptとは何ですか？

公開: 2022-03-10

簡単な要約↬このエピソードでは、責任あるJavaScriptについて話します。コードが責任を負うことはどういう意味ですか、そしてプロジェクトにどのように異なるアプローチをとるべきですか？ドリュー・マクレランが専門家のジェレミー・ワグナーと話をして調べます。

このエピソードでは、ResponsibleJavaScriptについて話します。コードが責任を負うことはどういう意味ですか、そしてプロジェクトにどのように異なるアプローチをとるべきですか？私は専門家のジェレミー・ワグナーと話をして調べました。

メモを表示

責任あるJavaScriptWebサイト
ABookApartから本を購入する
ジェレミーの個人ウェブサイト
Twitterのジェレミー

毎週の更新

スティーブンフーバーによって書かれたタッチ時代のフィッツの法則
Webデザインはうまくいった：フレデリックオブライエンによって書かれた完全に無意味
Nick Babich＆GlebKuznetsovによって書かれた音声ユーザーインターフェイスの作成について知りたいことすべて
LeonardoLosovizによって書かれたブロックプロトコルに参加するWordPressの意味
KnutMelvarによって書かれたMarkdownについての考え

トランスクリプト

ジェレミー・ワグナーの写真 Drew McLellan：彼はテクニカルライター、ウェブパフォーマンスオタク、開発者、スピーカーであり、現在Googleで働いています。彼はAListApart、CSS-Tricks and Smashing Magazineのために書かれており、新しいタイトル、ABookApartの責任あるJavaScriptの著者です。彼が熟練した技術者でありコミュニケーターであることはわかっていますが、スタンドアップパドルボードで世界一周をしたいと思っていることをご存知ですか？私の壊滅的な友人、ジェレミー・ワグナーを歓迎してください。こんにちはジェレミー、お元気ですか？

ジェレミー・ワグナー：私は壊している。元気ですか？

ドリュー：私はとても元気です。ありがとう。今日は、この責任あるJavaScriptのアイデアについてお話ししたいと思います。これはある種の新しいアプローチまたはテクニックですか、それとも文字通りJavaScriptを責任を持って使用することについて話しているのですか？

ジェレミー：私は文字通り、責任を持ってJavaScriptを使用することについて話しています。したがって、HTTPアーカイブによると、モバイルデバイスによってダウンロードされるJavaScriptの量の中央値が約58％増加し、昨年は約290キロバイトから約500キロバイトに増加しました。

ドリュー：うわー。

ジェレミー：私が責任を持ってJavaScriptを使用することについて話すとき、それはユーザーが最初に言うアプローチです…私たちが構築しているものが何であるかを批判的に評価し、現代のWeb開発プラクティスによって提供されるものの目標です。話す。そして、それは一種の…多分冗談ではないかもしれませんが、私は現代のWeb開発に夢中になっていませんでしたが、現代のWeb開発の副産物の1つは、プロジェクトに依存関係を追加するのが非常に簡単なことです。すべてがMPMのインストールであり、すべてのMPMのインストールにはコストがかかり、そのコストはさまざまです。しかし、私たちが見ているのは、そのHTTPアーカイブデータでは、95パーセンタイル…つまり、最も遅いエクスペリエンスの5％を意味しますが、最も遅いJavaScriptを出荷し、昨年は約875増加しました。キロバイトから約1.4メガバイト。

ドリュー：うわー。

ジェレミー：つまり、転送されるのは膨大な量のJavaScriptであり、読み込みパフォーマンスと実行時パフォーマンスの両方に影響があります。

ドリュー：そこでパフォーマンスについておっしゃいましたね。私の観点からすると、現代のWebエクスペリエンスは、10％のHTMLとCSS、90％のJavaScriptのようなもののようです。そして、それにはパフォーマンスに関する考慮事項が必要です。つまり、転送するデータの量についてお話しいただきましたが、JavaScriptを多く使用することで、パフォーマンスに関するその他の考慮事項があります。

ジェレミー：そうですね。ですから、インターネット接続が遅いので、私が米国に住んでいる場所を知っています。大都市の外に十分に行くと、どこに行くかによっては、インターネットの速度がどれほど遅くなるかに対処するのが少し難しくなります。これらの農村地域の一種であり、このような地域に住む人々にとって重要です。そのため、メガバイト単位のJavaScriptの出荷を開始するとき、その読み込みパフォーマンスの側面はすでに十分に困難ですが、iPhoneXやiPhone13などのiPhoneを持っていない人を扱っている場合もあります。

ジェレミー：彼らはフィーチャーフォンを使っているだけかもしれませんし、予算のあるAndroidフォンのようなもので、人生をナビゲートしようとしているだけかもしれません。つまり、オンラインバンキング、失業支援、またはその他の政府支援、アプリケーション用のポータルなどについて考えてみてください。オンライン学習では、過剰なJavaScriptが、大都市圏やブロードバンドインターネットのサービスが十分に行き届いていない大都市圏や低速デバイスに住むほど幸運ではない人々に実際に悪影響を与える可能性がある場所がたくさんあります。。私は開発者として、このような傾向があると思います…MacBookやこれらのハイエンドデバイスを購入しますが、JavaScriptを使いすぎるとこれらの問題がどこで発生するのか実際にはわからないことがあります。

ドリュー：そして、あなたがそこで述べたように、この種のことによって罰せられるのは、サービスにアクセスできないことによって最も失うのは、ある種の立場を持っている個人である場合があります。高速なデータ接続や非常に高性能なデバイスを持たない人々は、すべてを意味するサービスにアクセスすることがあります…それは彼らがアクセスできるすべてを意味します。ですから、それはある意味でほとんど人権問題になります。

ジェレミー：うん。つまり、Webのパフォーマンスはビジネス価値の観点から組み立てられる傾向があります。私はいくつかのe-comのパフォーマンスコンサルタントであり、大手食品会社、大手e-comのように…店のように、電気店のように、それをやりたくなりましたよね？なぜなら、あなたがビジネスで働くとき、つまり、あなたは明らかに財務を健全にしたいと思っており、ウェブパフォーマンスがその役割を果たしていると私は思います。それを証明するケーススタディはたくさんあると思います。しかし、その人間的な側面があり、食料品店のようなビジネスにとってもそういうものがあります。ええ、彼らは収益主導です。彼らは健全な財政を望んでいるので、ウェブのパフォーマンスはその一部ですが、彼らはまた重要なニーズに応えていますよね？あなたが食べなければならないようにね？

ジェレミー：そして、一部の人々のように、何らかの理由で家に帰る可能性があります。車に乗るだけでは簡単に乗れないかもしれません。彼らは車を持っていないかもしれません。したがって、彼らは栄養を得るためにこれらのサービスに依存していますが、それ以上に、必要な場合、特に危機介入やその種のもののような支援が必要です。虐待されて家から追い出されたパートナーがスマートフォンに目を向け、Googleを攻撃して危機介入と支援のポータルを見つけようとするかもしれないと言っても、それほど大げさではないと思います。そして、JavaScriptは、こうしたタイプの目標を妨げ、人間のニーズに応えることができます。少しだけ寄りかかる傾向があるとき。

ドリュー：つまり、過去18か月ほどで、COVIDと人々が孤立し、食料品の配達を注文する必要があることを垣間見ることができました。その時点で、Webは彼らのライフラインになります。彼らは天候に恵まれていると感じており、孤立しているために宿泊施設を離れることができず、食料を手に入れなければならず、必需品を手に入れなければなりません。そうですね、それは私たち全員にとって日常生活の中でますます重要な部分になっていると思います。

ジェレミー：その通りです。ある種のデバイスの話に戻ると、Tim Kadlecは数年前に素晴らしい作品を書きました。2年前、おそらく3年前だったと思いますが、それはパフォーマンスのロングテールの優先順位付けと呼ばれていました。そして、それを見ると…Webパフォーマンスの用語では、ラボデータとフィールドデータについて話します。また、ラボデータは、灯台を実行しているときや、WebページのテストでWebサイトをスローして、その動作を確認しているときのようなものです。これらはすべて本当に便利なツールですが、そのフィールドデータを見ると、実際には、オーディエンスが実際に誰であるかについて、より大きな画像とより大きなビューが得られ始めます。そしてこの記事では、TimKadlecがパフォーマンスのロングテールを優先することの意味について説明しています。これらすべてのデバイスの意味は、開発者が持っている可能性のあるデバイスほど強力で強力ではない可能性があります。

ジェレミー：そして、その記事の背後にある考え方は、90パーセンタイルまたは95パーセンタイルに焦点を当てることができれば、それらの人々のエクスペリエンスを向上させることができれば、高速デバイスを含むすべての人にとってより高速なWebを構築できるということです。そして、米国のデータポイントを攻撃します。これはstatcounter.comのようなものです。 28ポイントのようなもの…約28％の人がこのツールがキャプチャするiOSデバイスを使用しています。そしてそれらの約21％はAndroidです。また、Androidはモノリシックではないため、Androidはデバイスの長いテールのかなりの部分を占める傾向があります。複数のデバイスメーカーがAndroidスマートフォンを製造していますが、世界とは対照的に、世界は米国だけではないため、iOSを使用している人の約16％、Androidを使用している人の約41％です。したがって、これらの遅い、または潜在的に遅いエクスペリエンスを優先することは、実際に効果があります。

ドリュー：私はあなたの本でデバイスの熱スロットリングについて読みましたが、これは私がこれまで実際に考えたことのないものです。そこでの懸念は何ですか？

ジェレミー：そこでの懸念は、決してマイクロプロセッサの専門家ではありません。私はおそらく少し書きすぎているWeb開発者ですが、熱スロットリングの背後にある考え方は、電話やタブレットだけでなく、すべてのシステムに存在します。マイクロプロセッサは、過度のワークロードを処理したり、本当に一般的な作業負荷だけで、その作業の廃棄物は熱です。そのため、デバイスにはこれを軽減する方法があります。あなたのラップトップのように、パッシブとアクティブの両方の冷却装置があります。

ジェレミー：つまり、パッシブ冷却装置のようなものは、ヒートシンクやある種のヒートスプレッダのようなものです。そして、そのアクティブな部分は、熱をより効率的に分散させるためのファンのようなものです。カスタムPCビルドのようなものは、液体冷却のようなものを使用する場合があります。これは、比較的極端な例ですが、携帯性があなたのようなものである場合、携帯電話にはそれがありません。ことでしょ？

ジェレミー：したがって、これらのデバイスがこれらの重いワークロードに対処するために、デバイスがクロックレートを上げることができる状態になるまでクロックレートを下げるなど、プロセッサの速度を人為的に下げる場合があります。そして、それは意味があります。なぜなら、JavaScriptを何トンも、何トンも、何トンも噛んでいる場合、これらの大きなチャンクがネットワークに流れてくるのが好きだからです。したがって、コンパイルと実行の評価と解析による多くの処理が必要になります。そして、1メガバイトか2メガバイトのJavaScriptのようにそれを行っていて、さまざまなタブのようにバックグラウンドで他の多くのプロセスが実行されている場合、そのタイプのことは、あなたの状態を置くことができます...デバイスは熱的にスロットルされた状態になる可能性があります。これは、その余分な作業を引き受ける能力が低下することを意味します。

ドリュー：それは一種のネガティブフィードバックループです。そうですね。あなたはデバイスにやるべきたくさんの仕事を与えます。非常に熱くなり、スロットルバックする必要があるため、実際にその作業を実行する能力が低下します。

ジェレミー：そうですね。繰り返しになりますが、私はマイクロプロセッサの専門家ではありません。もし、これに本当に精通しているエンジニアが、おそらくいくつかの詳細について私を訂正することができれば、私は確信していますが、一般的な考え方は、そうです、その環境圧力が増加するにつれて、デバイスはより少なくなることができますその圧力が低下するまで、これらの重い作業負荷に対処します。

ドリュー：つまり、最新のApple M1 Maxのあらゆる種類のデバイス用にJavaScriptを作成しているのは、新しいプロセッサですよね。ラップトップから、Webページをレンダリングするのに十分な種類のRAMがほとんどないデバイスまで。しかし、Webはこのように始まったわけではありません。若いリスナーは、JavaScriptをまったく使用せずにインタラクティブなWebエクスペリエンスを構築していたことを知りたいと思うかもしれません。私たちの大きくて重いフレームワークは、私たちの元に戻すことになるでしょう。

ジェレミー：フレームワークには時間と場所があり、この本からの抜粋を読んだ人は、私がフレームワークに反対していると思うかもしれません。そして、私は確かにいくつかのフレームワークに批判的ですが、それらは目的を果たしており、優れたユーザーエクスペリエンスを維持する、または優れたユーザーエクスペリエンスをもたらす方法でそれらを使用することが可能です。しかし、私たちが十分に行っているとは思わないのは、これらのフレームワークがどのように害を及ぼすかという観点から、これらのフレームワークを批判的に評価することです。つまり、私が話しているタイプのことです。ボタンをクリックすると、バックグラウンドで多くのことが行われているため、デバイスがその入力に応答するのに2秒ほどかかります。アナリティクスの収集などのサードパーティのJavaScriptがあり、スレッドで実行されている他のものもあります。

ジェレミー：そして、フレームワークの実行時のパフォーマンスを批判的に評価しないと、ユーザーにより良いサービスを提供するための機会をテーブルに残す可能性があります。良い例ですが、私がいつも使いたいのは、反応と事前行動です。私はしばらくの間このドラムを叩いてきました。しばらく前にCSS-Tricksの記事を作成しました。これは、モバイルナビゲーションメニューのような基本的なクリック操作を紹介したものです。些細なことのように聞こえますが、すべてのデバイスで、reactがより優れたランタイムパフォーマンスを提供するということですが、基本的に同じAPIを備えています。違いがあり、少しの違いがあり、プレアクトコンパットで紙に書くことができるものがありますが、それは単純です...そして私は単純な選択を言うべきではありませんが、その選択、その基本的な選択は経験間の違いになる可能性がありますこれは、すべてのユーザーまたは少なくともほとんどのユーザーにとって非常にうまく機能するか、一部のユーザーに対してのみうまく機能するエクスペリエンスです。うまくいけば、それはある程度意味がありました。]

Drew：つまり、すべてのフレームワークとビルドツールを使用すると、ツリーシェイクや、出荷するバンドルの最適化、ブラウザーへの配信方法などを行うことで、常に改善されているようです。大きなフレームワークを使用する場合、そのような大きなアプリケーション、つまり独自のコードを作成しているときに、フレームワークがすべての抽象化のために出荷するコードを減らすことができるという転換点はありますか？

ジェレミー：それは答えるのが難しい質問です。その1つの側面は、フレームワーク自体が、最適化できないコードの量を表していることです。つまり、pre-actのような薄いフレームワークのように、またはたとえばスペルのように、それは大いに役立ちます。しかし、私が見た問題とHTTPアーカイブのデータは、この点をサポートしていると思います。マイクロプロセッサとネットワークの進歩が加速しているときはいつでも、その利益を消費する傾向があるようですよね？

ジェレミー：私たちは、実際に前進することのないこのトレッドミルにいる傾向があります。そして、私は、フレームワークの歴史がどのようなものであるかについて千里眼ではないように、または申し訳ありませんが、フレームワークの将来がどのように見えるかを知りません。収集できる効率の向上がいくつかあると確信しています。しかし、生のJavaScriptがどの程度であるかという点で現場に見られるのは、生のJavaScriptの量だけが使用されていることです。これが私たちが抜け出す方法を自動化できる問題だとは言わないでください。私たちは…人間であり、介入し、ユーザーの最善の利益となる決定を下さなければならないと思います。そうでなければ、私たちがこのトレッドミルを降りるのを見ることはありません。私のキャリアではないかもしれませんが、私にはわかりません。

ドリュー：この本では、ウェブサイトとウェブアプリについて説明し、違いを理解し、どちらを使用しているかを理解することで、開発と最適化の戦略を選択するのに役立ちます。それについて少し教えてください。

ジェレミー：それは本当に良い質問です。そして、これについては、この本の前置きのような、Responsible JavaScriptPartOneと呼ばれるAListApartのために書いた同名のタイトルの記事に書いています。これは、この用語に多くの負荷をかけるということです。テクニカルライターのように、私はこの2つが同じように使用されているのを目にします。私が見ているのはウェブサイトですが、それは一種のマルチエイジ体験であるという意味ですよね？それは文書のコレクションです。さて、ドキュメント…これらのドキュメントには、これらの小さな島のような機能が埋め込まれている可能性があります。最近の用語では、人々が物事を成し遂げることができる機能のこれらの小さな島です。

ジェレミー：しかし、WebアプリやWebアプリには、機能のようなネイティブアプリのような意味合いがあります。つまり、シングルページアプリケーションについて話しているのです。複雑な双方向性を促進するための大量のJavaScriptについて話しているのです。また、Webアプリモデルが理にかなっている場合もあります。たとえば、Spotifyはこの良い例です。これは、Webアプリとしてより適切に機能します。それを実際に使用したり、複数ページのアプリケーションとして設計したりすることは望ましくありません。従来のWebサイトと同様ですが、すべてのプロジェクトのデフォルトが次のようになっているため、持続可能なデフォルトではないと思います。「クライアント側ルーターや重いフレームワークなどのシングルページアプリケーションを出荷し、すべてをオフロードする必要があります。サーバーのようなものからクライアントへのレンダリングのこの処理の。」そこから、意図せずにユーザーを除外するようになり、それでもユーザーを除外するようになると思います。

ドリュー：大きな隔たりはありますか？私たちのアプローチでウェブサイトを公開する人々と、インタラクティブな機能を備えている可能性がある人々との間で、「私たちはソフトウェア会社です。私たちは製品、ソフトウェア製品、およびそれを提供するプラットフォームを作成するのは、複数のプラットフォーム用のネイティブアプリケーションではなく、Webです。」彼らはまったく異なる方法で問題に取り組んでいる可能性がありますか？その時点での見通しによって考慮事項は異なりますか？

ジェレミー：それは難しい質問です。それで-

ドリュー：言うのは大変でした。

ジェレミー：そういう会社は…とても良い例はニュースのようなものだと思いますよね？それは文字通りドキュメント、記事のコレクションであるため、それらは一種のウェブサイトモデルによってうまく提供されます。そして、それらの経験を開発する人々は、おそらく、Spotifyのような会社やEnvisionのような大規模なWebアプリケーションのような会社やそのようなものを持っている会社とは異なるスキルセットを持っているでしょう。そうそう、彼らはさまざまな角度からこれにやってくると思います。私が見たところ、セグメントがあるということです…あるいは、少なくともこれは、Web開発コミュニティ全体で、従来とは異なるソフトウェア開発から来たWeb開発者のセグメントが存在するということです。背景ですね。そして、私はその一人です。子供の頃、ウェブをいじっていましたよね？

ジェレミー：中学生のように、私が本当に好きだった当時のビデオゲームのようなすべての人のために愚かなファンページをやっています。そして、私はそのようなコンピュータサイエンスの教育を受けたことはありません。その過程で私が取り上げたコンピュータサイエンスの概念があります。次に、開発者のセグメントもあります。特に、過去5〜10年の間に、よりコンピュータサイエンス指向の方法でこれに取り組んでいる開発者のセグメントがあります。そして、それは…そうなると思います…それらの違いと経験は、それらのグループのそれぞれがウェブのためにどのように開発するのが最善かについて彼ら自身の結論を引き出すように導くでしょう。しかし、私はあなたが本当にできる唯一の方法だと思います…あなたがウェブのために持続的に開発できることは、あなたが構築しているものを批判的に評価し、それらの製品のユーザーに最も役立つアプローチに沿って調整しようとすることです。そして、それは私がこれらのことを評価するときにウェブサイトとウェブアプリモデルが私の頭の中にあるようなものです。

ドリュー：うん。おもしろい。つまり、本の中で、あなたは実際に私の作品のいくつかを引用しています。どうもありがとうございました。そして、基本的にPHP Apacheに気付いた退屈なテクノロジーを選択し、手巻きのJavaScriptを散りばめることで、特別な最適化を行うことなく、デフォルトで非常にスッキリとしたユーザーエクスペリエンスを作成できます。これは、サイトにアクセスしてコンテンツを表示するフロントエンドの訪問者にとって優れたユーザーエクスペリエンスになると思います。

ドリュー：しかし、実際には、ログインしてサイトにコンテンツを公開すると、コンテンツをオーサリングするための環境のようなものになります。 JavaScriptを多用するWebアプリのアプローチではなく、Webサイトのアプローチで構築するのは少し苦手だと思うので、私は考えています…あるいは両方である必要があります。フロントエンドを素敵な静的HTMLとCSS、そしてほんの少しのJavaScriptで公開し続ける必要があります。しかし、私がコンテンツオーサリングエクスペリエンスを提供したいバックエンドは、おそらく別のテクノロジーの選択の方が良いでしょう。それは必ずしもどちらか一方である必要はないので、それは非常に興味深いですか？バイナリの選択ではありません。それはもっとスペクトルです、あなたは言いますか？

ジェレミー：そうだね。そして、私たちは、Web開発がそのようなスペクトルであるということについて、コミュニティでより多くの議論が見られ始めていると思います。私の本に興味があるかもしれない人々のためにまっすぐに言うと、それは間違いなくスペクトルのウェブサイト側から来ています。繰り返しになりますが、それは常に良いデフォルトのようだと私は感じているからです。何かを構築する方法がわからない場合は、JavaScriptの使用を最小限に抑え、クライアントへの追加作業を最小限に抑える方法で構築することをお勧めします。とはいえ、気づいたのは素晴らしい経験だと思います。これらの使い古された、ある種の本当に「退屈な」テクノロジーは、目前のタスクに本当にうまく機能すると思います。そして、それは開発者にとって一種のオープンで有効な方法でそうしますよね？

ジェレミー：この種のことを実際にやってのけるために、州の管理店や州の管理フレームワークのような深い知識を持っている必要はありません。そして、私は、その特定のアプローチによって、注目されたことがうまく機能していると思います。しかし、あなたのポイントでは、クライアント上のすべてを管理するフレームワークのような重いもののように、すべてのクライアント側のルーティングにすべてを入れることなく、どのWebサイトにもスペクトルの中央に近づく機会があると思います。島のアプローチは、それがどのように見えるかを探求し始めていると思います。そして、私は認めます、私はおそらく意図せずにいくつかの島のタイプのことをしたことがあります。かなり前からあると思いますが、実際には名前を付けていません。しかし、おそらく中間点のように、優れたユーザーエクスペリエンスを提供するが、それでもよりインタラクティブなWebエクスペリエンスが見られるようになる可能性があることがわかったと思います。うまくいけば、それはひどく蛇行していませんでした。

ドリュー：それは、フラッシュの島を埋め込んだ時代に少し戻ったようなものです。

ジェレミー：うん。

ドリュー：これが私たちの小さなインタラクティブなセクションであり、残りの部分が流れているページの何か。

ジェレミー：ええ、フラッシュのように、なんてことだ、大学を卒業した私の個人的なポートフォリオの3回の反復は、高度なフラッシュのノックオフやホバー効果のように本当にくだらないものでした。そして、そのようなものは本当に、本当に楽しかったです。また、Flashを使用しなくなったために、コンテンツが大量に表示されなくなってしまうような場合もあります。そして、それは本当にひどいことですが、ある意味で、それは私たちが話しているこの種の島々の前兆のようなものでした。これは、静的なWebページやすべてのもののようにすることもできますが、その真ん中に置いたような、本当に豊かなインタラクティブな体験をすることができます。

Drew：長い間、プログレッシブエンハンスメントはWebエクスペリエンスを構築するためのベストプラクティスの方法と見なされてきました。それでもそうだと思いますか？

ジェレミー：それはおそらく…おそらく、プログレッシブエンハンスメントを行うためのより多くの作業であることを認めるでしょう。ある意味で、あなたは開発経験を分岐させているからです。サーバーがこれらの重要な相互作用のようなものを処理できるように、Webサイトの実行可能な最小限の機能を提供しようとしています。しかし、それに加えて、「さて、JavaScriptを使用して、この対話をもう少しスムーズに行えるようにしたいと思います」と言っています。私はまだそれがあなたのウェブサイトまたはあなたのアプリまたはあなたの製品であなたの目標を達成するための実行可能な方法だと思います。

ジェレミー：しかし、私が言いたいのは、ウェブサイト上のすべてのインタラクションがこの同期ナビゲーションの種類のパターンによって促進されなければならないことを決してお勧めしないということです。したがって、良い例のように、econWebサイトのチェックアウトページには必ずサーバールートが必要です。カートに物を追加するためのサーバールートが必要です。それから、物事が少し速く、より非同期になるように、それをもう少し楽しいものにするのに十分なJavaScriptを振りかけることができるはずです。

ドリュー：パフォーマンスの測定に関しては。主にGoogleから、コアWebバイタルについて多くのことを聞いています。それらは本当に私たちが測定すべきベンチマークアップですか？それとも、Googleが私たちに考えてほしいことなのか。これは、Googleで働き始めた難しい質問かもしれません。

ジェレミー：うん、うん。あなたが知っているので、私はここで自分自身のために話している。 Webバイタルは…最初のコアWebバイタルは、ユーザーエクスペリエンスのどの部分が重要であるかを定義するための良い試みだと思います。累積的なレイアウトシフトや最大のContentfulペイントなどの指標は、実際には定量化を開始していなかった方法でエクスペリエンスについて考え始めていると思います。特に累積的なレイアウトシフトの前に、あなたが怒り狂う瞬間があった場合、それはボタンがページなどを動き回るのが好きだからです。つまり、それを測定するのに役立つと思います。不完全です。そして、コアWebバイタルに取り組んでいる人なら誰でも、これらのメトリックのいくつかで改善が望まれることに同意すると思います。私が必ずしも完全に同意しない他の測定基準があります。最初の入力遅延と同様に、ピンを配置するのが難しいメトリックです。

ジェレミー：本当に便利だと思いますよね？あなたが文字通り言っているのは、ユーザーが最初に行ったインタラクションの遅延とインタラクティビティを測定したいのですが、コンテキストが少し不足しているからです。なぜなら、それは必ずしもJavaScriptに結びついているとは限らないため、いくつかの…多くのことがそれに影響を与える可能性があるからです。最初の入力遅延は、フォームフィールドにフォーカスすることによって発生する遅延を表すことができますか？そのタイプのもの、HTMLのもの。これらのメトリック…最初の入力遅延などのメトリックは…可能性があります…長いタスクAPIからのエントリ、要素のタイミング、およびそれらのタイプのものなどでコンテキスト化できる場合、それらは有益である可能性があります。最終的に、コアWebバイタルの将来は、優れたユーザーエクスペリエンスを実現するための測定に役立ち、役立つことが証明されると思います。それが私の個人的な意見です。

ドリュー：それは、常に自分自身に対して測定したり、自分自身の改善を測定したり、スコアが変化した場合に経験が悪化したかどうかを測定できるものの1つだと思います。信号機はあまり気にせず、自分が知っていることは気にしています。あなたのサイトのコンテキストと変更がどのように改善をもたらしたかについて。

ジェレミー：累積的なレイアウトシフトなどの指標は優れていると思いますが、それらも少し改善することでメリットが得られる可能性があります。現状では、累積レイアウトシフトは、主にロード中に発生するレイアウトシフトを測定します。ご存知のように、ユーザーがページにアクセスしてページにアクセスすると、いつでもレイアウトのずれが発生する可能性があります。ですから、確かにそのような現象の観察方法を改善するためにそれができると思う仕事は確かにあります。

ドリュー：レイアウトの安定性は、プログレッシブエンハンスメントを使用しているときに実際に達成するのが少し難しいことの1つだと思います。サーバーでレンダリングされたページをロードしてからクライアントで拡張を開始すると、そのようなレイアウトシフトが発生する危険性がありますね。

ジェレミー：もちろんです。そして、そのコンポーネントの寸法はさまざまな理由で変更される可能性があるため、コンポーネントの水和は一種のトリッキーになります。クライアント側のコンポーネントにコンテンツが存在する可能性があるように、クライアントで実行されるまで評価されない状態のために、サーバー上でレンダリングされません。それは非常に難しい問題です。私はここに座って、銀の弾丸が好きなふりをするつもりはありません。

Drew：インポートとコード分割の動的な種類について少し話したいと思いました。どちらも、エクスペリエンスの開始時にJavaScriptの巨大なバンドルをダウンロードして実行するという問題のさまざまな手法です。特に最も単純な小さなプロジェクトで、多くの小さな要求を行うことで過度に最適化するリスクはありますか、それとも、これらの問題が発生することを先取りして、最初からある種の実装にまったく害がないということですか？それとも、実際にパフォーマンスの問題が発生するまで待ってから、そのようなことを考える必要がありますか？

ジェレミー：それで、あなたが今言ったことの最後尾がこれを導く良い方法であることをお勧めします。もちろん、これらの最適化を非常に迅速かつ簡単に達成できない限り、時期尚早に最適化しようとすべきではありませんが、パフォーマンスの問題がそれほど多くない初期の段階で最適化に多大な労力がかかる場合は、コード分割は、おそらく発生する必要のないものです。おそらく、その機能を前もってロードすることができます。

ジェレミー：しかし、例えば、私は本の中でこれについて話します。大きなJavaScriptによって駆動される価値の高いインタラクションがある場合、私にとって、大きなJavaScriptは、圧縮されて60キロバイトのJavaScriptのチャンクになる可能性があるため、20キロバイトを意味する可能性があります。次に、メインバンドルまたは無数のバンドルのいずれかでそれを引き出すことができれば、サイトが出荷されている可能性があり、スタートアップのパフォーマンスを向上させることができます。

ジェレミー：しかし、この本では、いつ…または少なくともユーザーが価値の高いインタラクションを行う可能性があるかを知覚しようとすることについてのテクニックについて説明しています。したがって、私が使用する例はJavaScriptのチャンクです。 HTMLフォームの検証は優れているため、フォームのコンテンツを検証するために使用されますが、スタイルを設定することもできず、非常に簡単です。タイプはメールと同じですよね？それを特定の方法で評価します。ただし、クライアントでのフォームの検証は、スタイルを設定することもできるため、非常に役立ちます。そして、その検証の外観を、ブランドの美学やWebサイトの美学に近づけることができます。したがって、この例では、ユーザーがフォーカスする場合、フォーム内のフィールドのいずれかにフォーカスするだけでも、JavaScriptのその部分をプリロードするポイントです。

ジェレミー：それで、うまくいけば、それは、動的インポートが呼び出されたときに、ネットワークがそれをプルダウンするのに十分な時間があるフォームに記入するのに少し時間がかかるので、現金を打つことができることを願っていますすでにプリロードされているものを取得します。それは私があちこちで少し取り組んできたものであり、すべての状況で行うのは難しいです。たとえば、一部のデバイスには細かいポインタがないため、ホバー時に常にこれを確実に行うことはできません。彼らは…彼らは…それはタップ入力ですよね？したがって、ホバーは、たとえば、細かいポインタがある場合とは異なる時間に発生します。

Drew: One aspect of responsible JavaScript use is thinking about how we consume our users, available resources, be that sort of battery life or data allowance, if they're on a data plan. Are there techniques that we can lean on here to, to help us think about those things?

Jeremy: Yeah. So currently, or at least historically from the last… I don't know exactly when this feature shipped but Chrome for Android and there used to be a Chrome extension thing for this called Save Data. And what you would do is if in your settings, in Chrome for Android you would say, “Reduce data usage.” I forget exactly what the label is on the check box, but you check it, you turn it on and what that does is it sends this signal as a request header. And it's a request header that's called save data and it only has one token and it's just on. Because if it's off, the header just doesn't get sent. And you can… on the backend, at least, you can look at this header and you can decided, “Well, do I really need to send the styles and the JavaScript for this carousel or can I render this differently?

Jeremy: Or maybe you start thinking about stuff outside of JavaScript where maybe you send lower quality images. There's a lot of opportunities there to reduce data usage. This is evolving though, save data is still around. And I think it will be for the foreseeable future, but now we're converging on a media query called prefers reduced data. So we have stuff like prefers reduced motion, prefers color scheme, it's sort of in that vein where I anticipate that these will be operating system level settings that we can make to say, “I really want websites or apps to use less data with this signal.” And you can match it on the client side, with the prefers reduced data media query using match media in JavaScript.

Jeremy: So then you can use that in JavaScript to say, “maybe this functionality isn't the most important thing. Maybe we don't really need to load this associated video embed if the text serves the purpose.” That type of thing, but it also converges with the save data header, at least this is what I observed is when I turn on the save data feature in Chrome for Android, the prefers reduce dat: reduced media query matches, but it also sends save data so you can still act on this on the back end or the front end.

Drew: That's nice. So in a sort of app context, you might feel.. rendering a big data table, you might only return some very key columns. Out of that, the most commonly referenced, rather than the full data and really sort of reduce the amount of that's sent over the wire.

Jeremy: Right. Or you might say… you might pull APIs less frequently in JavaScript, that type of thing. It's kind of a hack need phrase, but it really is limited to your imagination. There's a huge space where I think that concept can be applied to deliver better user experiences. And I've used it with a client of mine in Wisconsin. In rural Wisconsin it's just like… it is an internet dead zone. Like it's so difficult to… I don't know how people cope with how slow it is. Maybe it's just because of my data plan and I might be roaming or whatever, but I've used this to some effect to say, “You know, maybe they don't need this carousel.” Somebody who's just kind of out there in the sticks who… there's a lot of farmland in Wisconsin, but there's also like a lot of forests and somebody might need some work done in logging, right? It's a logging company. And so maybe all of these images, aren't really crucial to that user experience. And they really just want to get to… the phone number or whatever it is, and they want to get to it as fast as possible.

Drew: One thing many of us do is write JavaScript in sort of new shiny versions of VS script and TypeScript sometimes, and then use build tools to transfer that down to older syntax for browsers that encounter out in the wild. In some ways that feels like an excellent practice because we're building a code base with nice more modern clean code. In the case of TypeScript, perhaps more reliable code, less bugs. But are there consequences of doing this transpilation process that we might need to be aware of?

Jeremy: Anytime you take a new syntax and you have to transform it so that it's more broadly compatible, that's going to generally… I have not done this comprehensive audit of all features, but generally I've observed that, that results in more JavaScript. And that makes sense because for things like default parameters on functions, which are well supported by the way, and probably you can ship… I think you could probably just ship that on transpile and be fine, but it's a good example. When that gets transformed, it has to inject a lot of helper code in the function to look… to evaluate those defaults, right? So you get that equivalent functionality.

Jeremy: Now, JavaScript is evolving all the time and I think for the time being, we're going to be coping with transpilation costs. And it definitely does have an impact. When I worked with an e-com company, we were able to reduce several of their bundles for their pages, anywhere between 10%, maybe even 5%, in some cases, to sometimes 30 or 40% when we used a technique to transpile two sets of bundles, right? I talked about this at smashing comp. The name that got kind of got tacked on it was differential serving where you say, “I'm going to generate these transformed bundles for older browsers and serve it to them.” And I'll generate a different bundle for users on modern browsers or evergreen browsers that will be smaller because there will be less of that transpilation overhead. And when we use that, there was a measurable improvement in the user experience. And there were signals that that engagement was better when we did this. That said, differential serving is an interesting thing because IE11 is kind of now like fading. It's taking time, but it's fading.

Jeremy: But Matt Hobbs who works for the UK government. I think he works on the NHS website. I think, don't quote me on that Matt. But he sent me some data that showed that there was still a fair amount of people who were still on Internet Explorer and not just internet or 11. Like there were some columns or row in this data rather, that showed that some people were still on like IE6 or IE7. And so you have to evaluate when it makes sense to do something like that, because it is a lot of extra work and it takes a lot of effort.

Jeremy: In the case of the NHS or literally any government service, I would say that it's virtually a mandate that you have to preserve a level of functionality that serves literally everybody, because you don't know where they're going to be accessing the web off of, right? The constraints we develop for are incredible, it's really, really hard. It's thousands and thousands of different types of devices and I think it makes a in those cases, but maybe not so much for your regular web app, right? It just depends on what the purpose is.

Drew: So keeping on top of the browsers that you need to support and the features that you need to transpile and keeping your configuration and your build tool up to date is… becomes quite important.

Jeremy: Yeah, for sure. This is sort of the more technical part of how you set up tool chains to do this, but… evaluating what your user base looks like is very important, because if a browser kind of falls out of a certain threshold of usage from significant to relatively insignificant, that might be the point at which you decide to evaluate, “Hey, maybe we need to bump things up in our browser's list configuration, so that we're transpiling bundles to be smaller since we don't need to ship those transforms anymore.” But it is kind of like another added step. And one of the approaches I talk about in the book is that you can write your JavaScript one in a couple ways.

Jeremy: You could decide that your style for using JavaScript will be to rely on older language constructs that are natively well supported. Like I think constant let are supported back to IE11. So it doesn't preclude you from using those types of things, but it allows you to ship less JavaScript. Whereas you… or you could say like the alternate approach might be that you are going to write JavaScript for newer browsers only, and accept that a segment of your users may not have functionality. But again, that depends on the purpose that your website is serving and whether or not it's crucial, right? Or infrastructure.

Drew: The web platform is moving on that at magnificent pace, it seems at the moment and there seem to be all sorts of things being added to CSS. For example, that offer capabilities that we previously have to lean on JavaScript for. It is one way to use JavaScript responsibly to just not use it and to lean on native browser features instead?

Jeremy: I think that also works for JavaScript itself where it makes sense to use an API directly rather than an abstraction of it. Definitely do that. But certainly in the case of HTML and CSS, there are things we can now do or will be able to do in CSS that we just don't need JavaScript for. So an example of this would be… what's the word for it? Truncation of content, right? That's something that we can do in CSS. Whereas I've been in situations or in projects where I've seen libraries or a library get downloaded that does that. And we don't necessarily need to really do that anymore because CSS can handle it.

Jeremy: Or we have access to these layout modes now where we don't really need. If we invest the time to learn these layout modes like grid, we don't really need to fall back on layout libraries to handle these things for us. And we can develop these experiences that are unique. And what's great about that is with layout modes like CSS grid, if they're abstracted, it kind of reduces what you can do with them, because you are only able to take advantage of what the abstraction offers. And if you really want to build some eye-catching layouts that really like push the boundaries of what's possible, I always like to point to Jen Simmons, her experimental layout lab homepage.

Jeremy: I don't know how you would achieve a layout like that if you abstracted it into its own sort of layout library. You almost have to use it… I would think more than almost, you would have to use CSS grid directly in order to accomplish something like that. And that is like zero JavaScript and it's incredible and it's really neat. And I think the web in general would benefit more if we leaned more heavily on CSS and other core web technologies, as much as we do on JavaScript, probably not possible, but one can dream.

Drew: So the book Responsible JavaScript is out now from a book apart. And I really like it, it's full of very practical information. It's very to the point, you know? There's not filler. It's not like reading a recipe online where you have to hear about a trip to Peru before you get to the nitty gritty. It's just like it's all straight in there and it's all very nicely written. Was it a challenge to put that set of information together?

Jeremy: I'll have to ask… if this is the case, but I Think Responsible JavaScript might be the longest book that A Book Apart has put out, but I would have to go and reach into the closet for my copy of a responsible responsive design to see if I beat out Scott Gel on that, because that was a bit of a book, an awesome book, by the way, it was challenging I'm… As your listeners can probably guess I'm sort of a naturally verbose person and, and, and recovering, trying to like be more succinct, but we really packed in as much as we could and kept it as straight to the point while still trying to retain some, some light lively pros. So it didn't like sound mechanical, but the result was that the manuscript is like 42,000 words. So it's a book, it's a chunk of words and we had a great time working on it. People at A Book Apart were fantastic and, and really setting up those guardrails so that we would be successful.

Drew: And it's very much a book that you can sort of dip into various parts. You don't need to read it cover to cover, to gain loads of helpful information. You can just sort of find the bit that's relevant to the problem that you're facing at the moment and dive in there. So I think that's really great about it. So I've been learning all about Responsible JavaScript. And what have you been learning about lately Jeremy?

ジェレミー：それが出てから私がやってきたことの一種は、CSSペイントAPIをいじることです。私はペイントAPIが本当に好きです。つまり、それは常にそれ自体で存在していたのです…。キャンバスのように2Dコンテキストが重要だったので、独自の方法でのように。それは…知らない人のために、CSS pain APIは、2Dキャンバスコンテキストを埋め込み、パラメータ化してCSSで制御できる方法です。これにより、次のようなアニメーションを作成できるなど、非常に興味深い可能性が広がります。以前はアニメートできなかったので、そのようなものです。

ジェレミー：そして最近、ブログを更新しています。つまり…私は巨大なファイナルファンタジーオタクです。リプレイしたばかりのファイナルファンタジーIIのように、15匹がいて、16匹がいつか出てくるのですが、それは一種のレトロなフィールドです。そのため、CSSペイントAPIを使用して、さまざまなタイルを使用してランダムな世界を生成してきました。ですから、川や草のタイルや木などを通り抜けるようなものがあります。そして、ユーザーがダークモードで私のウェブサイトにアクセスした場合のようにパラメータ化する…そのペイント作業は夜のようにレンダリングされます。それはちょうどその上に一種のオーバーレイとそのタイプのものを持っているでしょう。

ジェレミー：でも、ペインティングAPIは素晴らしいです。私はティム・ホルマンに叫び声をあげなければなりませんでした。彼、私はJSConf Australiaで彼に会い、彼はジェネレーティブアートワークについて話しました。それは本当に正しかった、それは本当に私が興味を持ったようでした。そして、Sam Richardは、前日のCSSConfでCSSペインティングAPIについて話しましたが、この2つが一緒になったとき、「うわー、これはとてもクールです」のようでした。だから私は実際にPaintletsと呼ばれることをしました！ Chromeにアクセスすると、Paintlets.Herokuapp.comになりますが、残念ながら、まだ十分にサポートされていないため、そうする必要があります。ランダムに生成されたさまざまなアートワークのように見えます。ええ、私はただ…それが私が夢中になっていることです、ごめんなさい。その長い話。

ドリュー：すごい。それはいいです。

ジェレミー：うん。うん。

ドリュー：親愛なるリスナーがジェレミーからもっと聞きたい場合は、ツイッターで彼を@malchataで見つけ、彼の執筆プレゼンテーション、ビデオ、プロジェクトを彼の個人ウェブサイトjeremy.codesで見つけることができます。責任あるJavaScriptはAから入手できます。離れて予約します。そして、あなたはresponsiblejs.devでそれについてのより多くの情報を見つけることができます。本日はジェレミーにご参加いただきありがとうございます。別れの言葉はありましたか？

ジェレミー：前進して、できる限り最善の方法でWebを構築し、ユーザーのことを頭に入れてみてください。それは私のマントラの一種であり、この本がそれを少し固執させることを望んでいます。