Pinterest轉向通用JavaScript和React

boxti發表於2017-06-05

在2015年,Pinterest決定轉向React。但是對於一個有數百萬活躍使用者的站點來說,談何容易。Pinterest轉向React的故事本質上是Pinterest轉向通用JavaScript的故事。

Pinterest的軟體工程師Imad Elyafi寫道,決定轉向React的部分原因是React是“黃金標準”,有著“龐大的開發者社群”以及它“能極大地提升工程效率和質量”。React通常用在通用JavaScript場景下,在此伺服器和瀏覽器使用同一類别範本。

Pinterest的伺服器端引擎是Django,它使用Jinja模板引擎。然而,Pinterest的客戶端的JavaScript使用Nunjucks,它的靈感來源於Jinja,也與之相似。這導致了程式碼的重複,一份Python版和一份JavaScript版。但是他們無法拋棄一切而轉向React,Pinterest的軟體工程師Jessica Chan說道。

我們需要一個方案,能讓我們在不打斷產品組工作和影響使用者體驗的情況下,迭代地轉換數以百計的Pinterest構件。第一步就是要將客戶端和伺服器端統一到單一的模板渲染引擎,然後再將引擎替換掉。如果伺服器能解釋JavaScript,使用Nunjucks渲染模板以及共享客戶端程式碼,我們就能進行迭代遷移到React。

在觸及React之前,該團隊重新設計了伺服器渲染引擎的架構以使用現成的Nunjucks模板。Jessica Chan說,他們沒有在Django的內部渲染Jinja模板,而是建立了一個程式使用Node來渲染模板。“最終,我們在Nginx代理層後使用常駐的Node程式,將介面架構設計為每一個網路請求都是無狀態的渲染過程。我們因此能將請求分發到這些程式組,並在需要的時候擴充套件程式數。”

一旦該系統上線,他們就能慢慢轉向基於React的元件渲染模式。Elyafi說只要可能他們都擴充套件Nunjucks模板語言來渲染React。

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

component關鍵字告訴模板引擎應該使用基於React的元件,而不是基於Nunjucks的。Pinterest轉向React的努力還在繼續。

文章轉載自 開源中國社群 [http://www.oschina.net]


相關文章