我们需要一个方案,能让我们在不打断产品组工作和影响用户体验的情况下,迭代地转换数以百计的Pinterest构件。第一步就是要将客户端和服务器端统一到单一的模板渲染引擎,然后再将引擎替换掉。如果服务器能解释JavaScript,使用Nunjucks渲染模板以及共享客户端代码,我们就能进行迭代迁移到React。

对于前端工程师来说,这种架构有很多不方便的地方。首先,需要了解后端的实现,并且依赖开发环境中的dev服务器进行调试开发;其次,开发细节需要与后端的Java工程师沟通,交流成本相当大;最后,难以发起技术创新,因为只要涉及后端的调整,推动起来非常困难。在前端技术日新月异的今天,这已经越来越成为前端工程师心中的痛。

英文原文Pinterest’s Switch to Universal JavaScript and
React

目前,Chair已经投入了生产环境,与Sofa各自支持着不同的支付宝Web应用。预计不远的将来,会出现更多基于Chair的Web应用。

一旦该系统上线,他们就能慢慢转向基于React的组件渲染模式。Elyafi说只要可能他们都扩展Nunjucks模板语言来渲染React。

历史上,支付宝前端项目都是直接基于Java后端开发的。这种架构下,前端工程师做出网页模板,交给后端的Java引擎渲染。支付宝采用的Java引擎是名为Sofa的MVC框架。

Pinterest的软件工程师Imad
Elyafi写道,决定转向React的部分原因是React是“黄金标准”,有着“庞大的开发者社区”以及它“能极大地提升工程效率和质量”。React通常用在通用JavaScript场景下,在此服务器和浏览器使用同一类模板。

作为前端技术引领的团队,支付宝前端团队推出了基于Node.js的Web框架,适用于大部分的Web应用,感觉很高大上。下面简要介绍Chair的设计思想、功能架构和开发状况。

component关键字告诉模板引擎应该使用基于React的组件,而不是基于Nunjucks的。Pinterest转向React的努力还在继续。

Chair为前端开发,带来了很多便利。

编译:InfoQ

Chair根据业务实际需求和现有架构高度定制。虽然从结构上看,Chair可以提供完整的后端功能,但目前主要用于模板渲染和路由。真正的业务逻辑和数据处理,还是要交给后端的Java服务。

Pinterest的服务器端引擎是Django,它使用Jinja模板引擎。然而,Pinterest的客户端的JavaScript使用Nunjucks,它的灵感来源于Jinja,也与之相似。这导致了代码的重复,一份Python版和一份JavaScript版。但是他们无法抛弃一切而转向React,Pinterest的软件工程师Jessica
Chan说道。

● 路由层:适配不同路径的HTTP请求● 中间件层:加工HTTP请求●
控制器层:部署业务逻辑● 服务层:提供内部的统一API,供不同业务调用●
代理层:负责与Java服务通信,提供统一格式的数据

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

Chair的基础代码,是基于Koa框架的再开发,使用的语言是下一代JavaScript——ECMAScript
6,模板引擎是Nunjucks,但也可选用其他引擎。同时兼容Velocity模板,现有绝⼤部分模板⽂件⽆需修改也能正常渲染。

在触及React之前,该团队重新设计了服务器渲染引擎的架构以使用现成的Nunjucks模板。Jessica
Chan说,他们没有在Django的内部渲染Jinja模板,而是创建了一个进程使用Node来渲染模板。“最终,我们在Nginx代理层后使用常驻的Node进程,将接口架构设计为每一个网络请求都是无状态的渲染过程。我们因此能将请求分发到这些进程组,并在需要的时候扩展进程数。”

Node的加入,为很多功能提供了很大的性能改进。根据压测的结果,使用Chair比使用原来的方案,响应时间和系统负载能力至少提高一倍以上。

澳门新葡亰,在2015年,Pinterest决定转向React。但是对于一个有数百万活跃用户的站点来说,谈何容易。Pinterest转向React的故事本质上是Pinterest转向通用JavaScript的故事。

● 支持 cookie session, 不依赖 ta● 支持连接 MySQL数据库● 支持mvc stat 和
rpc stat 日志统计● 支持统一导航 uninav 模板● 页面数据模拟 pagemock

12月上旬,Chair发布了0.5版。除了修正Bug,这一版主要添加了以下功能。

网站地图xml地图