美团是用html开发,剖析美团网站前端的组件化开发经验
前言一位计算机前辈曾说过:
Controlling complexity is the essence of computer programming.
随着前端开发复杂度的日益提升,组件化开发应运而生,并随着 FIS、React 等优秀框架的出现遍地开花。这一过程同样发生在美团,面临业务规模的快速发展和工程师团队的不断扩张,美团历经引入组件化解决资源整合问题、逐步增强组件功能促进开发效率、重新打造新一代组件化方案适应全栈开发和共享共建等阶段,努力“controlling complexity”。本文将介绍美团组件化开发的实践过程。
组件化 1.0:资源重组在美团早期,前端资源是按照页面或者类似业务页面集合的形式进行组织的。例如 order.js 对应订单相关页面的交互,account.css 对应账户相关页面的样式。这种方式在过去的较长一段时间内,持续支撑了整个项目的正常推进,功勋卓著。
随着业务规模的增加和开发团队的扩张,这套机制逐渐显示出它的一些不足:
1.资源冗余
页面的逐渐增加,交互的逐渐复杂化,导致对应的 css 和 js 都有大幅度增长,进而出现为了依赖某个 js 中的一个函数,需要加载整个模块,或者为了使用某个 css 中的部分样式依赖整个 css,冗余资源较多
2.对应关系不直观
没有显而易见的对应规则,导致的一个问题是修改某个业务模块的 css 或者 js 时,几乎只能依靠 grep。靠人来维护页面模块 html、css 和 js 之间的依赖关系,容易犯错,常常出现内容已经删除但是 css 或 js 还存在的问题。
3.难于单元测试
以页面为最小粒度进行资源整合,不同功能的业务模块相互影响,复杂度太高,自动化测试难以推进。
2013 年开始,在调研了 FIS、BEM 等方案之后,结合美团开发框架的实际,美团初步实现了一套轻量级的组件化开发方案。主要的改进是:
1.以页面功能组件为单位聚合前端资源
2.自动加载符合约定的 css、js 资源
3.将业务数据到渲染数据的转换过程独立出来
举例来说,美团顶部的搜索框就被实现为一个组件。
代码构成:
复制代码代码如下:
www/component/smart-box/
├── smart-box.js # 交互
├── smart-box.php # 渲染数据生产、组件配置
├── smart-box.scss # 样式
├── smart-box.tpl # 内容
└── test
├── default.js # 自动化测试
└── default.php #
调用组件变得十足简单:
JavaScript Code复制内容到剪贴板
echo View::useComponent('smart-box', [
'keyword'=> $keyword
]);
对比之前,可以看到组件化的一些特点:
1.按需加载
只加载必要的前端资源
2.对应关系非常清晰
组件所需要的前端资源都在同一目录,职责明确且唯一,对应关系显著
3.易于测试
组件是具备独立展现和交互的最小单元,可利用 Phantom 等工具自动化测试
此外,由于前端资源集中进行调度,组件化也为高阶性能优化提供了空间。例如实现组件级别的 BigRender、通过数据分析进行资源的合并加载等等。
组件化 2.0:趋于成熟组件化 1.0 上线后,由于简单易用,很快得到工程师的认可,并开始在各项业务中应用起来。新的需求接踵而来,一直持续到 2014 年底,这个阶段美团称之为组件化 2.0。下面介绍下主要的几个改进。
Lifecycle组件在高内聚的同时,往往需要暴露一些接口供外界调用,从而能够适应复杂的页面需求,例如提交订单页面需要在支付密码组件启动完成后绑定提交时的检查。Web Components、React 等都选择了生命周期事件/方法,美团也是一样。
组件的生命周期:
一个组件的完整生命周期包括:
1.init,初始化组件根节点和配置
2.fetch,加载 css 和 js 资源
3.render,内容渲染,默认的渲染内容方式是 BigRender
4.ready,进行数据绑定等操作
5.update,数据更新
6.destroy,解除所有事件监听,删除所有组件节点
组件提供 pause、resume 方法以方便进行生命周期控制。各个阶段使用 Promise 串行进行,异步的管理更清晰。使用自定义语义事件,在修改默认行为、组件间通信上充分利用了 YUI 强大的自定义事件体系,有效降低了开发维护成本。
举个例子,页面初始化时组件的启动过程实际也是借助生命周期实现的:
JavaScript Code复制内容到剪贴板
varafterLoadList = [];
Y.all('[data-component]').each(function(node) {
varcomponent =newY.mt.Component(node);
// 绑定 init 生命周期事件,在 init 默认行为完成后执行回调
component.after('init',function(e) {
// 如果配置了延迟启动
if(e.config.afterLoad) {
// 暂停组件生命周期
e.component.pause();
// 压入延迟启动数组
afterLoadList.push(e.component);
}
});
// 开始进入生命周期
component.start();
});
Y.on('load',function() {
// 在页面 load 事件发生时恢复组件生命周期
afterLoadList.forEach(function(component) {
component.resume();
});
});
回过头来看,引入生命周期除了带来扩展性外,更重要的是理顺了组件的各个阶段,有助于更好的理解和运用。
Data Binding数据绑定是美团期盼已久的功能,将 View 和 ViewModel 之间的交互自动化无疑会节省工程师的大量时间。在组件化减少关注点和降低复杂度后,实现数据绑定变得更加可能。
美团最终实现的数据绑定方案主要参考了 Angular,通过在 html 节点上添加特定的属性声明绑定逻辑,js 扫描这些内容并进行相应的渲染和事件绑定。当数据发生变化时,对应的内容全部重新渲染。
JavaScript Code复制内容到剪贴板
mt-bind-repeat="addr in addrList"
mt-bind-html="addr.text"
>
Y.use(['mt-bind','mt-scope'],function() {
Y.mt.bind.init(document.body);
varscope = Y.one('.addressList').getScope();
// 将 scope.addrList 设置为一个数组,DOM 上将自动渲染其内容
scope.$set('addrList', [
{ text:"first address"},
{ text:"second address"}
]);
});
使用属性声明绑定逻辑的好处是可以同时支持后端渲染,这对于美团团购这样的偏展现型业务是非常必要的,用户可以很快看到页面内容。
Flux实现数据绑定后,美团不得不面对另外一个问题:如何协同多个组件间的数据。因为某个组件的数据变化,很有可能引起其他组件的变化。例如当修改购买数量,总金额会变化,而总金额超过 500 后,还需要展示大额消费提醒。
为了解决这个问题,美团引入了 Flux,使用全局消息总线的思路进行跨组件交互。
例如因为交互复杂而一直让美团非常头疼的项目购买页,在应用组件 + Flux 重构后,各模块之间的互动更加清晰:
其他方面的改进还有很多,包括引入模板引擎 LightnCandy 约束模板逻辑、支持组件任意嵌套、支持异步加载并自动初始化等。
随着组件化 2.0 的逐步完善,基本已经可以从容应对日常开发,在效率和质量方面都上了一个台阶。
组件化 3.0:重启征程时间的车轮滚滚前行,2014 年底,美团遇到一些新的机遇和挑战:
基于 Node 的全栈开发模式开始应用,前后端渲染有了更多的可能性
YUI 停止维护,需要一套新的资源管理方案
新业务不断增加,需要找到一种组件共享的方式,避免重复造轮子
结合之前的实践,以及在这一过程中逐渐积累的对业内方案的认知,美团提出了新的组件化方案:
基于 React 开发页面组件,使用 NPM 进行分发,方便共建共享
基于 Browserify 二次开发,建设资源打包工具 Reduce,方便浏览器加载
建设适应组件化开发模式的工程化开发方案 Turbo,方便工程师将组件应用于业务开发中
React在组件化 2.0 的过程中,美团发现很多功能和 React 重合,例如 Data Binding、Lifecycle、前后端渲染,甚至直接借鉴的 Flux。除此之外,React 的函数式编程思想、增量更新、兼容性良好的事件体系也让美团非常向往。借着前端全栈开发的契机,美团开始考虑基于 React 进行组件化 3.0 的建设。
NPM + ReduceNPM + Reduce 构成了美团新的资源管理方案,其中:
NPM 负责组件的发布和安装。可以认为是“分”的过程,粒度越小,重用的可能性越大
Reduce 负责将页面资源进行打包。可以认为是“合”的过程,让浏览器更快地加载
一个典型的组件包:
复制代码代码如下:
smart-box/
├── package.json # 组件包元信息
├── smart-box.jsx # React Component
├── smart-box.scss # 样式
└── test
└── main.js # 测试
NPM 默认只支持 js 文件的管理,美团对 NPM 中的 package.json 进行了扩展,增加了 style 字段,以使打包工具 Reduce 也能够对 css 和 css 中引用的 image、font 进行识别和处理:
JavaScript Code复制内容到剪贴板
{
"style":"./smart-box.scss"
}
只要在页面中 require 了 smart-box,经过 Reduce 打包后,js、css 甚至图片、字体,都会出现在浏览器中。
JavaScript Code复制内容到剪贴板
varSmartBox = require('@mtfe/smart-box');
// 页面
varIndexPage = React.createClass({
render:function() {
return(
...
);
}
});
module.exports = IndexPage;
整体思路和组件化 1.0 如出一辙,却又那么不同。
Turbo单单解决分发和打包的问题还不够,业务开发过程如果变得繁琐、难以 Debug、性能低下的话,恐怕不会受到工程师欢迎。
为了解决这些问题,美团在 Node 框架的基础上,提供了一系列中间件和开发工具,逐步构建对组件友好的前端工程化方案 Turbo。主要有:
1.支持前后端同构渲染,让用户更早看到内容
2.简化 Flux 流程,数据流更加清晰易维护
3.引入 ImmutableJS,保证 Store 以外的数据不可变
4.采用 cursor 机制,保证数据修改/获取同步
5.支持 Hot Module Replacement,改进开发流自动化
6.通过这些改进,一线工程师可以方便的使用各种组件,专注在业务本身上。开发框架层面的支持也反过来促进了组件化的发展,大家更乐于使用一系列组件来构建页面功能。
小结发现痛点、分析调研、应用改进的解决问题思路在组件化开发实践中不断运用。历经三个大版本的演进,组件化开发模式有效缓解了业务发展带来的复杂度提升的压力,并培养工程师具备小而美的工程思想,形成共建共享的良好氛围。毫无疑问,组件化这种“分而治之”的思想将会长久地影响和促进前端开发模式。美团现在已经准备好,迎接新的机遇和挑战,用技术的不断革新提升工程师的幸福感。
美团是用html开发,剖析美团网站前端的组件化开发经验相关推荐
- #Android笔记# 超级足球app 开发总结(一)—— 项目组件化与路由的使用
最近利用业余时间,开发了一款基于懂球帝接口数据的足球资讯app,整体的UI也是仿照懂球帝设计的.这是一个比较综合的项目,用到了不少以前没用过的组件和api,而且产生了很多新的开发思路,有些实现方式也是 ...
- 得到、微信、美团、爱奇艺APP组件化架构实践
一.背景 随着项目逐渐扩展,业务功能越来越多,代码量越来越多,开发人员数量也越来越多.此过程中,你是否有过以下烦恼? 项目模块多且复杂,编译一次要5分钟甚至10分钟?太慢不能忍? 改了一行代码 或只调 ...
- 腾讯技术团队人手一份的Android组件化实战笔记(含得到、微信、美团、爱奇艺APP架构项目及源码)
前言 以前的Android开发大多用的中心化管理思想,将相同的资源集中进行管理.随着项目的发展,弊端渐显:集中管理的资源越来越多,多人开发也越来越麻烦,时常牵一发而动全身. 尤其是在大公司或者是大项目 ...
- python-web开发[10]之初始前端
目的: 开发一个平台(网站) – 前端开发: HTML CSS JAVASCRIPT – WEB框架: 接受请求并处理 – MYSQL数据库:存储数据 1.1 快速上手:基于falsk web框架快速 ...
- Vue第二天学习总结—— Vue全家桶之组件化开发(组件化开发思想、组件注册、Vue调试工具用法、组件间数据交互传递、组件插槽、基于组件的案例——购物车)
(一) 组件化开发思想 1. 现实中的组件化思想体现 组件化即是对某些可以进行复用的功能进行封装的标准化工作 标准:要想组件能够成功组合在一起,每个组件必须要有标准 分治:将不同的功能封装到不同的组件 ...
- 写给后端开发工程师的H5前端开发知识
一.引言 web发展到目前为止已经有将近30年的历史,在web兴起的早期,并没有前端这个概念.最初所有的开发工作都是由后端开发工程师完成,随着业务越来越复杂,工作量逐渐的增加,项目中的可视化部分和一部 ...
- 6年iOS开发程序员总结组件化—让你的项目一步到位
纯个人学习笔记分享, 不喜勿喷,自行取关! 技术不缺乏缔造者,网络不缺乏键盘侠,但缺乏分享技术的源动力! 近几年组件化大家吵的沸沸扬扬的,它其实也不是什么黄金圣衣,穿上立马让你的小宇宙提升几个档次,也 ...
- Android之组件化开发
转载请标明出处:[顾林海的博客] 个人开发的微信小程序,目前功能是书籍推荐,后续会完善一些新功能,希望大家多多支持! ##前言 在以前的项目中都是建一个基础库,项目依赖基础库,主项目中集成了所有的功能 ...
- Android组件化开发实践(九):自定义Gradle插件
本文紧接着前一章Android组件化开发实践(八):组件生命周期如何实现自动注册管理,主要讲解怎么通过自定义插件来实现组件生命周期的自动注册管理. 1. 采用groovy创建插件 新建一个Java L ...
最新文章
- 【system generator】基于system generator的根号运算系统实现
- 军用软件概算计价规范_超强干货分享:547建筑工程计量与计价,帮你轻松掌握计量与计价...
- axis调用webservice客户端开发
- c/s项目记住账号密码功能
- File,FileInputStream,FileReader,InputStreamReader,BufferReader 的区别使用
- 淘宝API调用 申请 获取session key
- 玩转mini2440开发板之【在64位WIN7/WIN10系统中安装USB驱动】
- 倘若马克·扎克伯格 15 年前没有辍学......
- 力扣题目——700. 二叉搜索树中的搜索
- Android Java开发实例项目+游戏视频教程免费下载咯。。
- Latex 书写 IEEE 会议论文
- mysql load data 更新_mysql 用load data 导入数据时,数据被截断问题 | 学步园
- android 连接web加密的wifi,Android 与WEP加密连接
- 男人心中理想女友的职业排行榜
- 最长公共子序列 LCS(模板) poj 1458
- 快速查询单号物流,导出详细信息生成表格
- 下面合法的C语言字符常量是( ),C语言考试题库及答案
- AVPlayer视频播放
- RSA及TLS/SSL及数字证书原理
- 华为路由器 静态路由
热门文章
- JTextField的部分常用使用方法
- 华为HCIE云计算之FA桌面云业务发放
- 利用计算机运算符编写检索式,计算机信息检索过程中常用的检索表达式
- 通联支付公司软件测试待遇,通联支付怎么样
- 命令行编译Qt程序(qmake+jom/Nmake/mingW)
- 信息技术计算机日历教案,〖原创〗小学信息技术《制作日历》说课稿
- Windows系统常用后缀名大全
- 股票期权基本特点是什么?详解股票期权两大特点?
- 华为手机日历倒计时_igc 4周年庆倒计时!积分众乐乐赢华为手机
- DIY-BETAFPV和DIY(ESP-01F+E19-900M20S2模块)915MHz信号测试对比