支付宝前端团队详解基于Node.jsWeb框架Chair

简介:

Chair是支付宝前端团队推出的,基于Node.js的Web框架,适用于大部分的Web应用。

本文简要介绍Chair的设计思想、功能架构和开发状况。

chair_logo_small

一、Chair的由来和设计思想

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

java_flow_small

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

Chair框架就是在这种背景下诞生的,我们希望通过加入一个Node层,加速前端开发,提升研发效率,提高网站整体性能和系统的可维护性。

作为Sofa的替代,Chair直接与底层的Java服务通信,而客户端浏览器则与Chair通信,这样就不使用Sofa了。前端工程师因此可以完全不碰Java,使用熟悉的JavaScript语言,同时在浏览器和服务器两端进行快速迭代。

chair_flow_small

事实上,Chair这个名字就是来自跟Sofa的对比,因为两者都能坐人,但是椅子(Chair)比沙发(Sofa)轻多了。支付宝已经有了沙发,我们想再为它添一把椅子。

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

  • 提高了研发效率,前端工程师直接可以改动服务器,避免了与Java后端不必要的沟通成本。
  • 更清晰的职责划分,前端针对表现层(View)开发,后端针对业务和数据(Controller和Model)开发。
  • 更好的⼯程化,前端自己就能完成单元测试、集成测试和自动发布。
  • 节省人工,同样的组件(比如模板和路由)只需要写一次,不用再为浏览器和服务器各写一遍了。
  • 预期的性能提升,Node作为服务器端时,有很强的HTTP请求处理能力。

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

二、Chair的结构

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

chair_structure_small

整个框架从浏览器到服务器,一共分成五层:

  1. 路由层(routers):适配不同路径的HTTP请求
  2. 中间件层(middlewares):加工HTTP请求
  3. 控制器层(controllers):部署业务逻辑
  4. 服务层(services):提供内部的统一API,供不同业务调用
  5. 代理层(proxy):负责与Java服务通信,提供统一格式的数据

除了模板引擎以外,Chair还部署了一些功能组件,比如mock(数据模拟)和logger(日志器)。

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

 

三、性能提升

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

performence_compare_small

chair_performance_table_small

四、Chair的开发进度

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

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

目前,Chair正处于密集开发之中,预计明年上半年发布1.0.0版。

该文章来自阿里巴巴技术协会(ATA)精选集

作者:兔哥

目录
相关文章
|
12天前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
40 9
|
10天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端框架
【10月更文挑战第34天】在数字化时代,后端开发如同一座桥梁,连接着用户界面与数据处理的两端。本文将通过Node.js这一轻量级、高效的平台,带领读者领略后端框架的魅力。我们将从基础概念出发,逐步深入到实战应用,最后探讨如何通过代码示例来巩固学习成果,使读者能够在理论与实践之间架起自己的桥梁。
|
25天前
|
人工智能 前端开发 JavaScript
前端架构思考 :专注于多框架的并存可能并不是唯一的方向 — 探讨大模型时代前端的分层式微前端架构
随着前端技术的发展,微前端架构成为应对复杂大型应用的流行方案,允许多个团队使用不同技术栈并将其模块化集成。然而,这种设计在高交互性需求的应用中存在局限,如音视频处理、AI集成等。本文探讨了传统微前端架构的不足,并提出了一种新的分层式微前端架构,通过展示层与业务层的分离及基于功能的横向拆分,以更好地适应现代前端需求。
|
1月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
38 0
|
6天前
|
前端开发 JavaScript API
前端界的秘密武器:掌握这些框架,让你轻松秒杀99%的同行!
前端开发日新月异,掌握几个明星框架如React、Vue.js和Angular,不仅能让工作更得心应手,还能轻松超越同行。React以高效的虚拟DOM和组件化著称;Vue.js简洁易懂,灵活性高;Angular提供全面的解决方案,适合大型应用。此外,轻量级的Svelte也值得关注,其编译时处理设计提升了应用性能。掌握这些框架,结合深刻理解和灵活运用,助你在前端领域脱颖而出。
21 9
|
1月前
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
65 41
|
7天前
|
前端开发 JavaScript UED
不可思议!前端小白如何靠这些技巧逆袭,成为团队中的闪耀之星?
前端开发对初学者来说充满挑战,但通过正确的方法和技巧,你可以从新手蜕变为高手。本文分享前端小白逆袭的秘诀,包括夯实HTML、CSS与JavaScript基础,掌握前端框架与库,提升性能优化技巧,以及持续学习与分享。示例代码展示了简单的HTML+CSS+JavaScript页面和Vue组件,帮助你逐步进阶。
15 4
|
16天前
|
JavaScript 中间件 API
Node.js进阶:Koa框架下的RESTful API设计与实现
【10月更文挑战第28天】本文介绍了如何在Koa框架下设计与实现RESTful API。首先概述了Koa框架的特点,接着讲解了RESTful API的设计原则,包括无状态和统一接口。最后,通过一个简单的博客系统示例,详细展示了如何使用Koa和koa-router实现常见的CRUD操作,包括获取、创建、更新和删除文章。
35 4
|
17天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
30 3
|
24天前
|
JavaScript 前端开发 测试技术
前端全栈之路Deno篇(五):如何快速创建 WebSocket 服务端应用 + 客户端应用 - 可能是2025最佳的Websocket全栈实时应用框架
本文介绍了如何使用Deno 2.0快速构建WebSocket全栈应用,包括服务端和客户端的创建。通过一个简单的代码示例,展示了Deno在WebSocket实现中的便捷与强大,无需额外依赖,即可轻松搭建具备基本功能的WebSocket应用。Deno 2.0被认为是最佳的WebSocket全栈应用JS运行时,适合全栈开发者学习和使用。