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

作者:兔哥

目录
相关文章
|
2月前
|
存储 缓存 JavaScript
node 框架
Node 框架以其独特的优势和广泛的应用场景,成为了现代 Web 开发中不可或缺的一部分。掌握 Node 框架的开发技能,对于开发者来说具有重要的意义。
108 59
|
2月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
90 9
|
2月前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端框架
【10月更文挑战第34天】在数字化时代,后端开发如同一座桥梁,连接着用户界面与数据处理的两端。本文将通过Node.js这一轻量级、高效的平台,带领读者领略后端框架的魅力。我们将从基础概念出发,逐步深入到实战应用,最后探讨如何通过代码示例来巩固学习成果,使读者能够在理论与实践之间架起自己的桥梁。
|
3月前
|
人工智能 前端开发 JavaScript
前端架构思考 :专注于多框架的并存可能并不是唯一的方向 — 探讨大模型时代前端的分层式微前端架构
随着前端技术的发展,微前端架构成为应对复杂大型应用的流行方案,允许多个团队使用不同技术栈并将其模块化集成。然而,这种设计在高交互性需求的应用中存在局限,如音视频处理、AI集成等。本文探讨了传统微前端架构的不足,并提出了一种新的分层式微前端架构,通过展示层与业务层的分离及基于功能的横向拆分,以更好地适应现代前端需求。
|
2月前
|
Web App开发 缓存 监控
如何解决Node框架中内存管理的挑战?
解决 Node 框架中内存管理的挑战需要综合运用多种方法,并且需要在开发过程中保持谨慎和细心,不断优化和改进代码。同时,定期进行内存管理的检查和维护也是非常重要的。
114 63
|
6天前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
66 17
|
2月前
|
安全 前端开发 JavaScript
Node框架的优缺点
Node 框架的优点使其在现代 Web 开发中具有重要地位,但同时也需要开发者在使用过程中注意其缺点,合理选择和应用,以充分发挥其优势,避免潜在问题的出现。随着技术的不断发展和完善,Node 框架也在不断改进和优化,以更好地适应各种应用需求。
93 47
|
2月前
|
缓存 负载均衡 JavaScript
构建高效后端服务:Node.js与Express框架实践
在数字化时代的浪潮中,后端服务的重要性不言而喻。本文将通过深入浅出的方式介绍如何利用Node.js及其强大的Express框架来搭建一个高效的后端服务。我们将从零开始,逐步深入,不仅涉及基础的代码编写,更会探讨如何优化性能和处理高并发场景。无论你是后端新手还是希望提高现有技能的开发者,这篇文章都将为你提供宝贵的知识和启示。
|
2月前
|
前端开发 JavaScript API
前端界的秘密武器:掌握这些框架,让你轻松秒杀99%的同行!
前端开发日新月异,掌握几个明星框架如React、Vue.js和Angular,不仅能让工作更得心应手,还能轻松超越同行。React以高效的虚拟DOM和组件化著称;Vue.js简洁易懂,灵活性高;Angular提供全面的解决方案,适合大型应用。此外,轻量级的Svelte也值得关注,其编译时处理设计提升了应用性能。掌握这些框架,结合深刻理解和灵活运用,助你在前端领域脱颖而出。
36 9
|
2月前
|
存储 JavaScript 搜索推荐
Node框架的安装和配置方法
安装 Node 框架是进行 Node 开发的第一步,通过正确的安装和配置,可以为后续的开发工作提供良好的基础。在安装过程中,需要仔细阅读相关文档和提示,遇到问题及时解决,以确保安装顺利完成。
115 2