继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

COS系统的前端演变和发展

一只奥利奥的猫
关注TA
已关注
手记 62
粉丝 37
获赞 204

美团COS:全称美团网核心业务系统部,以持续整合O2O线下资源,共建高效率、低成本的供应链系统,高效推动O2O生态环境建设为业务目标,负责美团网核心业务系统的建设和管理。

COS系统,伴随着美团3年多的发展,前端也积极参与到系统的建设中。 在这几年里,通过优化系统前端环境,改进代码组织结构,丰富公共资源和自动化工具,不断提高了业务响应效率,也在不断努力去逐步缩短系统的前端开发周期,以下简单介绍在这个过程中的一些变化。

第一个COS系统——合同系统

  • 没有独立的静态资源服务,无压缩,采用YUI3的Loader,手动维护依赖关系。

  • 忙着写控件,第一个控件Autocomplete,后来有了Table、Tree、Form、IO等。

  • 线上代码经常不稳定,静态资源地址采用加时间戳的方式来更新。

公共模板部署

由于前端需要支持的业务系统众多,对每个系统而言,都有一些相同的处理逻辑,如前端环境初始化(包括系统的参数配置、YUI部署、UI部署、控件初始化、GA统计源、页面加载时间统计、浏览器升级提醒、问题反馈等)针对每个系统都是一样的,不希望每个系统都要去处理这些逻辑,于是集成了mt-fe.jar到每个后台系统,节约了新开系统的成本。

https://img3.mukewang.com/5ae56e370001889606770088.jpg

模块化道路

  • 模块目录结构扁平化

    所有的模块在目录结构上都是平行的,无区别的。 同时增加了主模块和子模块的概念,并在此基础上定义了统一的加载规则。

  • 模块名称和路径关系约定

    知道一个模块名就可以知道这个模块的代码所在的位置,是否是主模块以及属于某个系统,如:

    crm-module 对应的三个属性应该是:
    {
      path: "/static/module/module.js",
      isMainModule: true,
      app: 'crm'
    }
    deal-module/sub 对应的即:
    {
      path: "/static/module/sub.js",
      isMainModule: false,
      app: 'deal'
    }
  • 模块加载机制

    使用YUI3的自动加载,需要给Loader配置一个依赖关系表。最初新增一个模块时,需要在模块定义和Loader配置中都声明该模块的依赖。这样在两个地方维护依赖关系,容易产生不一致,从而带来维护问题。
     为解决上述问题,开发了脚本自动计算所有模块的依赖关系,生成依赖关系表传递给Loader使用,面临的问题是修改模块依赖关系需要运行脚本才能生效,而在开发时更想要所见即所得的效果。于是又针对开发环境,在Loader加载时根据约定的模块名,自动计算出模块的加载路径和类型,从而实现不提前配置依赖关系表也可自动加载。

      一个简单的加载配置
      var metaGroups = {
          "fecore": {
              //发布时自动生成的metaGroups,用于线上环境
              modules: {
                  "moduleA": {
                      path: "moduleA/moduleA.js",
                      requires: ["moduleB", "moduleC"]
                  },
                  ...
              },
              //根据pattern和文件名约定进行自动加载,用于开发环境
              patterns: {
                  "prefix": function(cfg) {
                      cfg.path = "moduleA/moduleA.js";
                      cfg.type = "js";
                      return true;
                  },
                  ...
              }
          }
      };
    
      YUI({
          ...
          groups: metaGroups,
          ...
      }).use('moduleA', function(Y) {
    
      });
  • 模块依赖关系梳理

    模块中存在间接依赖,如A依赖B、C,B依赖C,这时在A的依赖关系中只需要声明B就可以工作,如果某天B不需要依赖C了,这时在B中去掉C的成本就变大了。为了解决这类问题,规范了依赖关系声明,并开发工具对源文件进行分析,自动化校验和修改,也计划将该校验加入到各代码仓库的git hooks中。通过该工具的梳理,让开发者能非常明确了解所有模块之间的关系,对宏观掌握当前模块的使用状态也是非常有帮助的。https://img1.mukewang.com/5ae56e47000185c307920212.jpg

  • 模块的丰富和稳定

    前端支持的项目众多,如何在应用层花最小的代价写代码,是我们一直在思考的问题。 通过不断丰富可复用的组件库、定义统一的UI方案以及提取和整合所有系统的公共模板等来避免重复工作。 目前,除了所有前端公用的代码仓库fe.core外,也为COS系统新增专门的前端代码仓库cos.core,存放和业务相关的模块。同时为了保障模块的稳定性和易用性,开发了模块文档,并进行了测试用例的覆盖。

    • 模块内目录结构完善
       模块中从只包含css、css、tpl文件到包含tests、guide等文件,目前一个完整的模块的目录结构如:

      https://img3.mukewang.com/5ae56e520001121803890372.jpg

    • 组件方面
       从简单的构造器、prototype写对象实现继承到基于YUI3的Widget or Base框架,并在此基础上进行了扩展;不断新增组件和完善组件功能,使其能满足大多数业务需求;对代码进行不断重构,使得组件可以更加稳定。
       我们提倡只要是能被重用的代码,都应该放到相应的公共代码仓库中。

    • UI方面
       不得不说Bootstrap带给web行业的影响是巨大的,特别是针对后台系统。 简洁大气的设计,对于大多数网页元素来讲已经能较好的满足需求,不过针对COS系统,还是有不少需要单独处理的需求,比如各个系统的Layout,一些简单的UI模块和少量交互的组件等,所以在全兼容Bootstrap的基础上做了COS-UI,并对所有的COS系统页面进行了迁移,统一了风格。 也为界面外观定义提供统一标准,降低开发与维护成本。

    • 测试方面
       从使用YUI3提供的YUI Test模块编写单元测试用例,到使用mocha+chai+sinon结合,采用phantomjs进行无界面测试,无缝集成到开发环境,让写测试变的更简单,从而提高了写测试用例的积极性。

    • 文档方面
       从最初专门开发一个应用去为模块编写使用文档,到文档静态化。在完善的模块目录结构基础上,通过梳理文档规范,根据约定自动输出静态化的文档;从静态的demo展示到可以在线修改;从手写的使用说明,到根据YUIDoc生成的注释自动提取文档内容等。使得只需要写最少的内容,即可生成丰富的文档和demo。
       如下是一个简单的构建demo的规范:

        <div class="demo">
            <h1>简单demo</h1>
            <div class="html-content">
                ...
            </div>
            <script>
                ...
            </script>
        </div>

      只需要按照上述格式写代码,工具就会自动生成如下静态页面,可以在页面中进行参数修改,便可即时查看到效果。https://img4.mukewang.com/5ae56e5c0001e62013060473.jpg

COS系统前端分层

用户端和核心业务端的模块都是基于YUI3进行开发,同时在模块化机制的前提下,共用底层库fe.core。 为了更好地针对所有系统业务场景做抽象,开发了专门提供给业务系统使用的模块cos.core。

配置中心会处理所有系统的前端配置,如当前系统环境(开发环境、测试环境、线上环境),YUI的版本号,是否使用Combo服务,是否是调试模式等。

https://img3.mukewang.com/5ae56e650001b2a704790210.jpg

系统前端开发环境

为了方便系统开发,针对一些平时应用比较普遍的场景开发了自动化的工具,如发布、自动化文档、依赖关系检测、自动化单元测试、全部系统范围内搜索、自动build template等。为了使工具更容易维护,权责更加明晰,在代码组织和管理方面,先后对代码仓库进行了拆分,发布package到内部源,并使用npm来进行包管理,解决了package之间的依赖管理问题。

同时针对各系统提供了一系列的服务,如静态资源、Combo、日志、页面加载性能报表等。 未来还计划开放UI定制,一键开站,动态修改系统配置,在线为某个模块写文档、demo、test,在线管理静态资源等功能。

开发平台旨在希望作为一个窗口,索引与前端有关的所有服务和资源,为开发者提供开发辅助。

https://img2.mukewang.com/5ae56e6d0001299206780284.jpg

系统发布

  • 系统运行初期,使用Shell脚本处理发布过程(包括资源的压缩、加版本号、计算依赖关系等)。后来由于涉及到的代码仓库增多,发布过程也增加了更多的逻辑,如打包公共模块、修改模板中引用的CSS、图片资源地址等,使得脚本一度维护比较困难,后对脚本进行了拆分。 再后来,考虑到Node的灵活以及社区的活跃,将发布脚本迁移到Node平台,使用Grunt来管理发布任务,同时独立了配置,代码库进行了更细粒度的拆分,使得发布这一过程更加灵活和便于维护。https://img4.mukewang.com/5ae56e760001c5fa06370358.jpg

  • 系统发布从后端人工操作到集成到OPS平台一键发布,大大提高了发布效率,减少了bug处理时间。

  • 从使用外部npm源到内部npm源,减少了发布本身的耗时。

以上也为前端cos组在系统建设方面做一个简单总结。非常有幸能在一个重视技术,重视前端的公司里学习成长。回想起这么多的日日夜夜,曾面对每一次技术改造和调整都兴奋不已,会偶尔想方案彻夜难眠,走了很多弯路,开发了很多系统,但每次都能从看似相似其实充满新挑战的系统中获得新的收获。期望每天的点滴进步会让系统开发变得越来越简单高效,Happy Coding!

原文出处

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP