PinterestのUniversal JavaScriptとReactへの移行

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のコンポーネントをイテレーティブにコンバートできるソリューションが必要でした。初めのステップとして、そのエンジンを他のものにリプレースできるまで、クライアントとサーバで１つのテンプレートレンダリングエンジンに統合しました。もし、サーバが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への取り組みは続く。