Pinterest 转向通用 JavaScript 和 React

简介:

在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]

目录
相关文章
|
2月前
|
JavaScript 前端开发 算法
js开发:请解释什么是虚拟DOM(virtual DOM),以及它在React中的应用。
虚拟DOM是React等前端框架的关键技术,它以轻量级JavaScript对象树形式抽象表示实际DOM。当状态改变,React不直接操作DOM,而是先构建新虚拟DOM树。通过高效diff算法比较新旧树,找到最小变更集,仅更新必要部分,提高DOM操作效率,降低性能损耗。虚拟DOM的抽象特性还支持跨平台应用,如React Native。总之,虚拟DOM优化了状态变化时的DOM更新,提升性能和用户体验。
26 0
|
4月前
|
JavaScript 前端开发 小程序
js vue react获取本周、本月、本季、本年的第一天
js vue react获取本周、本月、本季、本年的第一天
|
5月前
|
存储 前端开发 JavaScript
JavaScript 前端框架相关: 如何在React中进行状态管理?
JavaScript 前端框架相关: 如何在React中进行状态管理?
29 0
|
5月前
|
JSON JavaScript 前端开发
前端 ex2json 用于 vue/react/js 将 xls、xlsx、csv 文件转成 json 数组
前端 ex2json 用于 vue/react/js 将 xls、xlsx、csv 文件转成 json 数组
97 0
|
5月前
|
前端开发 JavaScript
JavaScript 前端框架相关: React、Vue或Angular中组件化的概念是什么?
JavaScript 前端框架相关: React、Vue或Angular中组件化的概念是什么?
79 3
|
5月前
|
JavaScript 前端开发
React craco 解决 webpack < 5 used to include polyfills for node.js core ...
React craco 解决 webpack < 5 used to include polyfills for node.js core ...
298 0
|
6天前
|
SQL 存储 前端开发
React&Nest.js全栈社区平台(五)——👋封装通用分页Service实现文章流与详情
React&Nest.js全栈社区平台(五)——👋封装通用分页Service实现文章流与详情
React&Nest.js全栈社区平台(五)——👋封装通用分页Service实现文章流与详情
|
6天前
|
存储 SQL 前端开发
React&Nest.js社区平台(四)——✏️文章发布与管理实战
React&Nest.js社区平台(四)——✏️文章发布与管理实战
|
6天前
|
存储 前端开发 API
React&Nest.js全栈社区平台(三)——🐘对象存储是什么?为什么要用它?
React&Nest.js全栈社区平台(三)——🐘对象存储是什么?为什么要用它?
|
6天前
|
存储 前端开发 中间件
切图仔做全栈:React&Nest.js社区平台(二)——👋手把手实现优雅的鉴权机制
切图仔做全栈:React&Nest.js社区平台(二)——👋手把手实现优雅的鉴权机制