Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Drupal big pipe 201705v2

681 views

Published on

Drupal8.3 で提供された BigPipe の情報まとめ

Published in: Technology
  • Be the first to comment

Drupal big pipe 201705v2

  1. 1. Drupal BigPipe のインパクト ~体感速度の爆速化~ Drupal Business Consortium : DBCJ 池田秀一 Hidekazu Ikeda 2017年5月19日時点
  2. 2. A) BigPipe とは何か 1. BigPipe とは何か – Facebook の技術手法 2. Facebook での個別実装と技術情報 B) Drupal での BigPipe 1. Module(外部部品) から、 Core(基本機能)へ 2. Drupal 8.3 での Drupal BigPipe Drupal BigPipe
  3. 3. BigPipe とは何か A) Facebookが、自社Webページの体感表示速度を圧倒的に向上 させる為に考えだした手法 LinkedIn(Microsoft社が買収済)のサイトも、BigPipe を採用 B) 2017年5月時点では、Drupal8.3 を採用するか、個別開発で実 装するしかありません。 OSS CMS 、商用CMS で、2017/05 時点で実装しているのは Drupal のみ 個別開発なら、「BigPipeを再現できるJSプラグイン」などはある。 https://github.com/seporaitis/bigpipe BigPipeとは何か
  4. 4. BigPipeは、動的なWebページ配信システムの基本的な再設計 ➢ 一般的な考え方は、ページレットと呼ばれる小さなチャンクにWebペー ジを分解し、Webサーバとブラウザ内の複数の実行段階を通してパイ プラインにそれらをすることです。これは最も最近のマイクロプロセッサ によって実行されるパイプラインのようになります。複数の命令は、最高 のパフォーマンスを実現するために、プロセッサの異なる実行ユニット によるパイプライン化されています。 ➢ BigPipeは、既存のWebサービス提供プロセスの根本的な再設計です が、それは、既存のWebブラウザまたはサーバーを変更する必要はあ りません。それは、PHPとJavaScriptで完全に実装されています BigPipeとは何か
  5. 5. Facebook は 2010年頃から、行っている体感速度向上の技法 Facebook での個別実装と技術情報は、以下を参照 https://www.facebook.com/notes/facebook-engineering/bigpipe- pipelining-web-pages-for-high-performance/389414033919 https://blog.8-p.info/2010/42-facebook-bigpipe-tti https://www.infoq.com/jp/news/2010/07/bigpipe-facebook- optimize Facebook BigPipe
  6. 6. LinkedIn は 2015年頃のサイトの再構築で、幾つかの新技術の採 用として、Facebook と同様な BigPipe も採用した。 ◎ LinkedIn での BigPipe 記事 New technologies for the new LinkedIn home page (2015.3.17) https://engineering.linkedin.com/frontend/new-technologies- new-linkedin-home-page LinkedIn BigPipe
  7. 7.  Drupal BigPipe は、Drupal 8.3 で安定化した機能として提 供済  Drupal の BigPipeモジュールは、Drupal8.0 ではモジュール(外部部品)扱いでした  Drupal 8.1からDrupal 8 Core(中核機能部分) に実験的に含まれました。  Drupal 8.2で BigPipe は、Beta版となり、基本機能で提供  現時点で最新の Drupal 8.3では安定版として Drupal BigPipe は提供済です  BigPipe の技術そのものは、 Facebookで考えられ公開されました。 https://www.drupal.org/docs/8/core/modules/bigpipe/overview Drupal BigPipe version history
  8. 8.  Drupal BigPipe は、2015年頃から話題となり、2016年末の Drupal 8から機能として提供された  2015年末の Drupal8.0 ではモジュール(外部部品)扱い  2016年4月のDrupal 8.1からDrupal 8 Core(中核機能部分) に実験的に含まれました  2016年10月のDrupal 8.2で BigPipe は、Beta版となり、基本機能として提供  2017年4月の最新の Drupal 8.3では安定版として Drupal BigPipe は提供済です  BigPipe の技術そのものは、 Facebookで考えられ公開されました。 https://www.drupal.org/docs/8/core/modules/bigpipe/overview Drupal BigPipe time axis
  9. 9. ◎Acquia社の BigPipe 技術担当の講演 ・Youtube動画 BigPipe: The Architecture Behind the Fastest Version of Drupal Yet [January 27, 2016] https://www.youtube.com/watch?v=7Ap3OsdFA8U ・Webinar :スライド http://wimleers.com/talk-bigpipe-webinar/#/ Drupal BigPipe
  10. 10. LinkedIn での BigPipe 実装と、Drupal での BigPipe 実装では微妙に異なる。 Drupal 創設者である Dries氏は以下のように記載している。 BigPipe, no longer just for the top 50 websites (2015.11.27) http://buytaert.net/bigpipe-no-longer-just-for-the-top-50-websites ----------------------- 該当部分を引用翻訳 LinkedIn の場合、ページ内にある要素を BigPipe 経由で送る場合は BigPipe 専用のコードを書 かなくてはいけない。だから、エラーにもつながりやすいし、すべての技術者が BigPipe に習熟 していなくてはならない。それに対して Drupal 8 では、 API の抽象化レベルが高いので Drupal モジュールの開発者が BigPipe を理解している必要はない。Drupal 8 にわかっている(Drupal が把握する必要のある)ことは、どのページ要素がキャッシュしにくい、または全くキャッシュでき ないか、そしてどのページ要素が単独でレンダリングできるかということ。その把握した情報を 基に Drupal は BigPipe を使ってページ要素の配信を自動的に最適化する。 Drupal vs LinkedIn
  11. 11. Drupal8.3 での日本語での情報 http://www.webgogo.jp/blog/the-future-of-decoupled-drupal2 コスト(処理の手間と時間)のかかるコンポーネントを選択的にあとで処理し、それほどコスト のかからない部分を先に送信するための手段だ。クライアントサイドのダイナミックなコンテン ト置換のアプローチである BigPipe があれば、ページを段階的にレンダリングできる。まず、 ページの骨格がロードされ、そのあとで「先週いちばんよく聴いた曲」なり「現在再生中」なりと いった高コスト(expensive)なコンポーネントがブラウザーに送られ、プレースホルダー(割り 当てスペースの枠組み)を埋める。このコンポーネント駆動型のアプローチを使えば、僕たち にとっては両方の世界のいいとこどりになる。つまり、最初のインタラクションが瞬時に行える 非ブロッキングのユーザー インターフェイス、そしてテーマ レイヤーを活用しながらも Drupal のページ全体をすばやく断片的にロードできるということだ。 デモ: https://www.youtube.com/watch?v=JwzX0Qv6u3A Drupal 8.3 BigPipe

×