BT

PinterestのUniversal JavaScriptとReactへの移行

| 作者: David Iffland フォローする 4 人のフォロワー , 翻訳者 西村 美沙 フォローする 0 人のフォロワー 投稿日 2016年12月27日. 推定読書時間: 3 分 |

原文(投稿日:2016/11/29)へのリンク

2015年、PinterestはReactへの移行を決めたが、何百万というアクティブユーザを抱えたサイトで実施するのは、言うほど易しくない。PinterestのReactへの移行物語は実のところ、Universal JavaScriptへの移行に関する物語なのである。

PinterestのソフトウェアエンジニアであるImad Elyafi氏はReactへの移行決定は部分的だったと綴っている。というのは、Reactは"ゴールデンスタンダード"であり、"巨大なデベロッパーコミュニティと飛びぬけたエンジニアリングベロシティ、パフォーマンスを持って"いるからだ。Reactはよく、サーバやブラウザで同じテンプレートが用いられるUniversal JavaScriptのシナリオに利用されている。

PinterestのサーバサイドエンジンはDjangoで、Jinjaテンプレートエンジンを利用している。一方、クライアントサイドのJavaScriptは、Jinjaに着想を得たNunjucksを利用している。このことはコードの重複を引き起こし、PythonバージョンとJavaScriptバージョンを必要としていたが、全てを投げ打ってReactに移行することはできなかった、とPinterestのソフトウェアエンジニアJessica Chan氏は言う。

プロダクトチームの仕事やピナーの体験を邪魔することなく、何百というPinterestのコンポーネントをイテレーティブにコンバートできるソリューションが必要でした。初めのステップとして、そのエンジンを他のものにリプレースできるまで、クライアントとサーバで1つのテンプレートレンダリングエンジンに統合しました。もし、サーバがJavaScriptを解釈し、テンプレートのレンダリングにNunjucksを使い、クライアントサイドのコードを共有できたなら、Reactへとイテレーティブに移行しながら進めたのですが。

Reactを触る前、チームは既存のNunjucksテンプレートを利用するためにサーバレンダーを再設計した。DjangoのJinjaテンプレートをレンダリングする代わりに、Nodeを使ってテンプレートをレンダリングするサイドプロセスを立てた、とChan氏は述べた。"最終的には、NodeプロセスをNginxプロキシレイヤの裏に立ち上げ、各ネットワークリクエストがステートレスなレンダリングになるような方法でインターフェースを設計しました。これにより、リクエストをプロセスグループに投げることができ、必要に応じてプロセスの数をスケールできるようになりました。"

このシステムが開始されると、Reactベースのコンポーネントレンダリングに段々と移行できるようになった。Elyafi氏は、可能なところでReactをレンダリングするため、Nunjucksテンプレートの言語を拡張したという。

{% if in_react %}
  {{ component('MyReactComponent', {pinId: '123'}) }}
{% else %}
  {{ module('MyDenzelComponent', pinId='123') }}
{% endif %}

componentというキーワードは、テンプレートエンジンにNunjucksバージョンの代わりにRaactベースのコンポーネントを使うべきと教えるものだ。PinterestのReactへの取り組みは続く。

 
 

Rate this Article

Relevance
Style
 
 

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

ディスカッション

InfoQにログインし新機能を利用する


パスワードを忘れた方はこちらへ

Follow

お気に入りのトピックや著者をフォローする

業界やサイト内で一番重要な見出しを閲覧する

Like

より多いシグナル、より少ないノイズ

お気に入りのトピックと著者を選択して自分のフィードを作る

Notifications

最新情報をすぐ手に入れるようにしよう

通知設定をして、お気に入りコンテンツを見逃さないようにしよう!

BT