Clever Geek Handbook

新しいTwitterで使用されるテクノロジー

画像

開発者によると、Twitter.comの再設計により、サイトで使用されているテクノロジーに最も大胆な変更を加えることができました。 これを念頭に置いて、彼らは新しいアーキテクチャをほぼ完全にJavaScriptで実装し始めました。 開発の容易さ、拡張性、パフォーマンスに特に注意が払われました。 このレビューでは、Twitterエンジニアが開発したいくつかのユニークなソリューションについて説明します。





クライアントAPI


最も重要なアーキテクチャの変更の1つは、twitter.comが独自のAPIのクライアントになったことです。 モバイルサイト、iPhone、iPad、Android用アプリケーション、およびその他のサードパーティアプリケーションと同じ方法でデータを取得します。 この変更により、APIチームにより多くのリソースを割り当てることができ、40以上の修正が導入されました。 ページの最初の読み込み時およびクライアントがアクセスするたびに、高度に最適化されたJSONキャッシュからすべてのデータが取得されます。



Javascript API


Javascriptライブラリは、Twitter REST API @anywhereにアクセスするために開発されました。これは、プロジェクト全体の開発の良い出発点でした。 Javascript APIは、クライアント側でデータを抽出し、メモリとlocalStorageに同時にキャッシュする機能を提供します。これにより、Twitter.comの使用時に行われるネットワーク要求の数が最小限に抑えられます。 たとえば、一定期間の各ツイートリクエストには、関連するユーザーデータが含まれます。 その結果、ユーザーオブジェクトはアクティブにキャッシュされ、プロファイルを表示するときに、ユーザーデータを追加で要求する必要はありません。

Javascript APIのもう1つの機能は、各API呼び出しの前後にイベント通知を提供することです。 これにより、同じデータに基づいて不変のコンポーネントに影響を与えることなく、変更するコンポーネントを登録し、即座に応答してユーザーインターフェイスに適切な変更を加えることができます。



ページ管理


プロジェクトの目標の1つは、ページナビゲーションを簡単かつ高速にすることでした。 関連ドキュメントに対するWebの従来の類推に基づいて、アプリケーションは、URLとそのコンテンツ間の密接なリンクを提供するページルーティングシステムを使用します。 これにより、リッチWebアプリケーション（RIA）が通常のWebサイトのように動作できます。 これに関連して、「リッチな」クライアントルーティングモデルを開発する必要がありました。 これを行うために、ルーティングシステムは、URLハッシュによって制御される、変化するページを切り替えるように設計されました。 ユーザーがページ間を移動すると、アプリケーションはアクセスしたページをメモリにキャッシュします。 これらのページの情報が急速に陳腐化する問題は、ページがJavaScript APIを介してイベントに関する関連情報を受信できるメカニズムを使用して解決され、アプリケーションの一般的な状態と同期します。



レンダリングスタック


JavaScriptを使用せずに検索ロボットとユーザーをサポートするには、クライアント側とサーバー側の両方でレンダリングシステムが機能する必要がありました。 このために、レンダリングスタックが作成され、APIオブジェクトからHTMLフラグメントを生成するオブジェクト表示システムが開発されました。 エンジンは、さまざまな言語での文字列置換をサポートするようにも拡張されています。

DOMでの作業の最適化に多くの注意が払われました。 たとえば、イベントの委任はすべての方向に実装されており、ネストされたイベントを心配することなく、より少ないメモリを使用できます。 ほとんどのインターフェイスは再利用可能なコンポーネントから構築されているため、イベント処理は集中化され、複数のルートノードに委任されました。 HTML構造の形成中の再描画の数も、DOM操作を使用せずに、HTMLページのレンダリングの段階で実装および関連データと結合される前に最小限に抑えられました。



メディア統合


新しいエンジンの最も重要な機能の1つは、コンテンツパートナーの1つへのツイートリンクを使用して、サードパーティのコンテンツをサイトに直接埋め込む機能です。 KivaやVimeoなど、それらのほとんどでは、oEmbed標準が使用されました。これにより、コンテンツプロバイダーのドメインへのJSON-Pリクエストを簡単に作成し、リクエストに応じて受信するコンテンツを埋め込むことができます。 TwitPicやYouTubeなどの他のメディアパートナーは、URLから取得できるリソースを埋め込むためのよく知られたメカニズムを使用して、ネットワークの負荷を軽減し、全体的な高速化を実現しました。



オープンソース


Twitterは常にオープンソーステクノロジーを選択しており、新しいクライアントでは伝統が引き継がれています。 開発では、jQuery、Mustache、LABjs、Modernizr、および他の多くのオープンソーススクリプトとjQueryプラグインが使用されました。 開発者は、これらのライブラリの作成者やJavaScriptコミュニティのその他の多くの人々に、オープンJavaScriptコードの作成に尽力してくれたことに非常に感謝しています。 ここでツイッターで開発中にイノベーションを導入した後、私たちの技術でバックアップされたオープンソースコミュニティにそれらの多くを取り戻すことができることを願っています。


More articles:


All Articles