Chrome Devサミットサイト:事例研究

9522 ワード

webdev javascript テキストリンク

Googleは、2013年以降、毎年11月ごろにChrome Devサミット(CDS)会議を開催している.それはChromeのエンジニアとウェブの人々に従事する場所ですcheck out the recordings here .
すべての会議ニーズits own website . CDSの場合では、情報とスケジュールデータを含む静的サイトです.予約は別のシステム(およびGoogleフォームのリベラルアプリケーション)で処理されました.2018年に、我々は前の仕事に関して建設して、これらの必要条件でサイトを書き直しました:

早急に

進歩的な(古いブラウザーを支える)

索引可能な

それで、我々がどのようにそれを造ったかについて見ましょう.👍

基礎

CDSサイトは簡単なノードで動作します.ページとそのサブページのプレーンHTMLをレンダリングします.コンテンツのすべてのビットは、それがFAQやスピーカーについての情報であるかどうか、ブラウザは、実際のURLを読み込むことができます何かです.私たちはプレーンHTMLを欲しがっている特定のフレームワークを使用していません.
私たちは初期のJavaScriptの経験をサポートしたいと思った.これは私たちにとって重要なことだったのは、ブラウザのロングテールを含んでいることです.😮📸

私たちはまだJSが欲しいです:もちろん、サイトが主に情報を提供することになっている間、それがあるためによい2、3の場所があります.

累進的強化

私たちのJSは<script type="module" src="code.js"> . 「モジュール」タイプを使うことは重要です、それはES 6モジュールを支持するブラウザーを目標とするだけです.
これは非常に意図的な選択です.

CDにアクセスしている大部分のユーザーは、現代のブラウザー(CDは技術的観衆に向けられます.そして、それは高い更新率を持つ傾向があります).

これは私たちのようなES 6の機能を使用することができますawait and Promise 余分なコードを含めることなくhigh water marks )

私たちには2つの目標しかありません:現代的な、常緑的なブラウザーは、モジュールを支持します、あるいは、JSブラウザはありません.表面積を減らすことによって、我々はより積極的に両方の極端をテストすることができます.

強化された経験

それで、あなたが現在CDサイトをロードするならばempty page ) リンクをクリックすると、ページ間の変更は、会議のテーマに沿って遷移効果を与えることがわかります.JavaScriptなしで、リンクはちょうどそれです:それは全く新しいHTMLをロードします.

強化された経験は以下のように少し動作します.
A .新しいページを読み込みますwindow.fetch , ホールディングPromise現在のページをCSS遷移でフェードし、マセド画像を復元します.filter: grayscale(1) )
c.await フェッチPromise , 次に、<main> 他の全てのページのタグはここでパーティションを要求していないので、再リクエストするのに小さなオーバーヘッドがあります<head> etc
これは、他のページの完全なHTMLをダミー要素に挿入することで文字通りに動作します.

// just dump the HTML into a tag so we can look for main
const node = document.createElement('div');
node.innerHTML = raw;

const recievedMain = node.querySelector('main');  // main from incoming DOM
realMain.innerHTML = recievedMain.innerHTML;

D .コールhistory.pushState 新しいURLで、そして、CSSで新しい内容でフェードしてください
そして、上記のいずれかの処理が失敗した場合、ブラウザの場所を新しいURLに(効果的に)巨大にして設定することができますtry/catch ブロック.これは1つだけの例ですが、私たちのすべてのJSは徐々にこの同じアプローチを使用してtype="module" , そして、常に安全ブロックに包まれます.

ビルディング

私たちのJavaScriptは、単一のentryPoint(サイト内のすべてのページが効果的に、Wikiスタイルのコンテンツ)といくつかのファイルに住んでいます.前述したように、ESモジュールを使用し、EntryPointsrc/bundle.js —開発において、これは静的にファイルを含みますnode_modules ちょうど私たちのコードが良いレイアウトを持っているように.
⚠️ ESモジュールをnode_modules , しかし、あなたはちょうどNArequire()/module.exports コードなしでextra rollup plugin , そして、開発のためにもビルドステップが必要になります.
ビルドするには、単にRollup すべてのソースを単一のファイルに連結します.ですから、私たちのコードはESモジュールを必要としていますが、私たちは生産において輸出入を使用しません.それはちょうど機能のためのちょうど水マークです、そして、我々のクライアントブラウザーはそれからサイトを「行く」ために1つの一つのファイルをフェッチしなければなりません.

インデックス

負荷one of our sessions 忍者ウィンドウ(重要!)で.あなたはセッションのポップアップの'背後には何もないことに気づくでしょう:これは単なるセッション自体です.
このページはAMP , これは本当にうまくいく:それは“リーフノード”は、アンプのために設計されている(記事、ストア、セッション、スピーカーなどの項目を考える).
このページを再読み込みするか、the schedule それ自体は、セッションがポップアップとして表示されます.これは別の拡張機能であり、いくつかの部分があります.

一度ページをロードすると、サービスワーカーをインストールします.サービスワーカーをインストールします.これにより、すべてのネットワークトラフィックを制御することでサイトのロードをオフラインにすることができます

URLのように/devsummit/schedule/session-name , 我々は定期的にスケジュールページにサービス

スケジュールページのJavaScriptは新しいURLルートを識別し、セッションポップアップを示します

このように、私たちのセッションは、JavaScriptとスパの一部として、強化されたファッションで表示することができます.そして、この流れが支持されないならば、我々は常にFallbackオプションを持っています:生の(Amp)HTML、文字通りあらゆる検索エンジンとブラウザーが理解する何か.

CSSとデザイン

使用するLess CSS 我々のCSSのために.開発中のビルドプロセスを実行するのではなく、ソースとランタイムパーサーを直接使用します.

<!-- dev less -->
<link rel="stylesheet/less" type="text/css" href="./static/styles/cds.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.7.1/less.min.js"></script>

そしてprodではコンパイルされたCSSファイルを出荷します.

挑戦

それはすべてのよく、古いブラウザーのためのNO JSソリューションを出荷するか、または検索エンジンのために良いですが、いくつかの部分は、伝統的に複雑です.

インタラクティブサイドバー

小さなデバイス(例えば、KIOSデバイス…または単にあなたのウインドウを縮小する)でCDをロードするならば、あなたはナビゲーションのために全く対話的で、必要である1つの構成要素に気がつくかもしれません-サイドバー.
実際にはスクリプトなしでこれを行うことができます.基本的に、我々はCSSadjacency selector .
これはどうやって動くの?サイドバーを開くボタン(ハンバーガーメニュー).☰) 実際に<label> 透明(しかし、隠されていない)を指す<input type="checkbox"> . チェックすると、隣接する要素を表示するCSS規則を追加できます.

input#sidebar + .sidebar {
  transform: translate(100%);  /* offscreen if not checked */
  opacity: 0;
}
input#sidebar:checked + .sidebar {
  transform: translate(0);     /* visible if checked */
  opacity: 1;
}

これがどのように動作するかの長いデモです.
私たちは実際には、サイドバーがオフ画面ではないことを確認するために、より多くの作業を行うだけでなく、それが閉じているときにも正しくDOMから削除されます.特に、我々はvisibility 設定されるプロパティvisibility: hidden アニメーションがなくなったとき.
ここのテイクアウトは何ですか.すべてのブラウザがフォームを理解するので、私たちは私たちのために働くことができます.👍

遺憾

CDの内容のほとんどが静的に生成されますが(例えば、FAQや他のページ)、セッションとスピーカーのポップアップは、やや手動でDOMquerySelector('#foo').textContent = '...'; .
我々は、2つの理由のためにこれをします.

私たちはテンプレート言語を使用しません-我々が再び始めたならば、我々は使用しますlit-html 複雑なHTML部分木を綴る簡単な方法として

同型テンプレートには明らかなアプローチはなかった.lit-html , たとえば、ノードの実行をサポートしていません.JSバックエンド-どこにネイティブDOMはありません.

感謝

私は、あなたがこの短いwriteupを楽しんだことを望みます.何があったのですか.

Googleは別の理由のためにそのサイトを構築します、そして、Team - Iに応じて異なるスタックでI/OPreact .

私はサイトのサービスワーカーをカバーしていないが、我々は1つを持っているサイトは素晴らしいオフラインで動作します.特に、私たちは個々のセッションHTMLをキャッシュしません.

サイトは、Koa server そして、ビルド命令はGulpを通して指定されます、しかし、我々はどちらにも縛られません.

あなたはコードをチェックアウトすることができますon GitHub —我々が「DEV - SUMATA - 18」支店にいる点に注意してください.

読書ありがとう!🎉 あなたがより多くの質問をするならば、私を殴ってください.

Reference

この問題について(Chrome Devサミットサイト:事例研究), 我々は、より多くの情報をここで見つけました https://dev.to/chromiumdev/the-chrome-dev-summit-site-case-study-15ng

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

ArchlinuxおよびCinnamonデスクトップ環境のインストール

第4-2学期