支付宝前端团队详解基于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)精选集

作者:兔哥

目录
相关文章
|
16天前
|
JavaScript 前端开发 API
Node.js在前端的妙用:打造更出色的Web体验
Node.js在前端的妙用:打造更出色的Web体验
185 5
|
1天前
|
Web App开发 JavaScript Cloud Native
构建高效可扩展的RESTful API:Node.js与Express框架实践指南构建未来:云原生架构在企业数字化转型中的关键作用
【5月更文挑战第29天】 在数字化时代的驱动下,后端服务架构的稳定性与效率成为企业竞争力的关键。本文深入探讨了如何利用Node.js结合Express框架构建一个高效且可扩展的RESTful API。我们将从设计理念、核心模块、中间件应用以及性能优化等方面进行系统性阐述。通过实例引导读者理解RESTful接口设计的最佳实践,并展示如何应对大规模并发请求的挑战,确保系统的高可用性与安全性。
|
3天前
|
Web App开发 JavaScript 前端开发
构建高效Web API:使用Node.js与Express框架
构建高效Web API:使用Node.js与Express框架
9 0
|
7天前
|
JavaScript 前端开发 NoSQL
构建基于Node.js的全栈应用:从前端到后端的完整指南
【5月更文挑战第24天】本文是关于使用Node.js构建全栈应用的指南,涵盖前端(React或Vue)、后端(Node.js + Express)和数据库(MongoDB)的选型与实现。文章介绍了项目结构、前端组件化开发、后端API接口编写、前后端联调及部署上线的注意事项,帮助读者掌握全栈开发流程。
|
9天前
|
移动开发 JavaScript 前端开发
【热门话题】Vue.js:现代前端开发的轻量级框架之旅
Vue.js,由尤雨溪于2014年创建,是一个轻量级的前端框架,因其简洁API、高效渲染和组件系统深受全球开发者喜爱。本文探讨Vue的核心理念、技术架构、开发实践及在现代Web开发中的应用。Vue遵循渐进式框架思想,提供声明式编程、组件化和响应式数据绑定。技术上,它采用双向数据绑定、虚拟DOM和生命周期钩子。开发实践中,Vue CLI和Vuex、Vue Router分别加速开发和管理状态、路由。Vue不仅适用于单页应用,还支持多页应用、移动开发和跨平台项目,拥有丰富的社区生态和插件。随着Vue 3的推出,Vue将持续创新并影响前端开发领域。
32 0
|
10天前
|
缓存 前端开发 JavaScript
微前端框架开发实践的体验报告
微前端架构作为一种解决方案,通过将应用拆分成更小、更易于管理的子应用来提高开发效率和应用性能。本文将分享我在开发微前端框架过程中遇到的问题、解决思路以及具体方案。通过本次微前端框架的开发实践,我们成功实现了应用的解耦和性能的提升。关键点包括跨域问题的解决、路由分发的实现、沙箱和样式隔离的技术应用、通信机制的构建以及性能优化策略的采用。我们的成果是建立了一个高效、可扩展、易于维护的微前端架构。同时,我们也认识到了微前端架构的复杂性,以及在实施过程中需要考虑的诸多细节问题。
54 0
|
14天前
|
缓存 前端开发 JavaScript
Javascript模块化开发基础,最新美团点评前端团队面试题
Javascript模块化开发基础,最新美团点评前端团队面试题
|
16天前
|
Web App开发 开发框架 前端开发
Open UI5 前端开发框架配套的 Mock Server 工作原理解析
Open UI5 前端开发框架配套的 Mock Server 工作原理解析
31 0
|
16天前
|
开发框架 前端开发 JavaScript
我们是否对现代前端开发框架过于崇拜了?
在当前环境下,前端的开发由于框架的限制,导致代码变差。我们应该如何破除代码差的困境,如何正确使用前端架构,提升自己的代码质量。
|
16天前
|
Dart 数据处理 开发者
【Flutter前端技术开发专栏】Flutter是谷歌的开源移动框架,以其高性能和跨平台能力受开发者青睐。
【4月更文挑战第30天】Flutter是谷歌的开源移动框架,以其高性能和跨平台能力受开发者青睐。本文聚焦Flutter开发关键知识点:1) Dart语言和Flutter框架基础,如Widget和State;2) 路由管理,包括基本和命名路由,以及路由传值;3) 使用http、dio等库进行网络请求和数据处理;4) ThemeData定义应用主题,实现样式主题化。掌握这些技能将提升Flutter开发效率和应用质量。