美团前端组件中心

liyang24@meituan

标准化UI组件开发,统一管理、索引所有组件

背景

美团有300+的前端童鞋

分布在北京上海 & 厦门

以业务区分做的话,有主站、i版主站、各种商家后台、酒店、外卖、猫眼电影等等

(基本每个业务线都有个专属的前端团队)

・・・

前端View层技术栈

  • React & Angular (Vue.js、jQuery ...)
  • webpack、browserify、reducejs
  • grunt、gulp
  • babel

前端童鞋纯组件化项目开发的流程

基础组件

业务组件

Web Pages

  • 如何发现已有组件,避免重复造轮子?(检索)
    • 怎么评估组件质量?
  • 如何实现多个项目复用某个项目的组件?(规范)
    • 发布的npm包结构不完全统一
    • 组件涉及的静态资源引用方式差异
  • 如何脱离具体业务快速开发基础组件? 工具
  • 怎么分享自己的组件?
    • 让更多的人知晓 & 使用
    • bug反馈 & 共同开发

面临的问题

HOW TO DO

  • 建设一个 component 的聚合中心
  • 规范组件开发流程,提供周边工具
    • generator:快速创建一个项目
    • devserver:快速开发及预览组件及示例
    • compile:编译es6/7及scss/less/postcss和examples
    • test:友好的测试体验
    • pub:发布过程流程化
  • 组件预览
    • 避免枯燥无味的Readme文档
    • 直观的静态Html预览Examples页面
    • 提供移动版App(支持H5、React Native组件)
  • 开发统一风格的组件集
    • 支持新项目快速采用
    • 避免重复造轮子,降低筛选成本

爬虫服务:规范约定

从内网(npm.sankuai.com)、外网(npmjs.com)抓取符合条件的组件

组件预览:检索 & 分享

Web站点:components.sankuai.com

移动App:iOS & Android

开发工具

@mtfe/rt (rt-core)

爬虫(Crawler)

收录规则

  • Web 组件(React、Angular等)
  • React Native 组件 (JavaScript)
  • package.json
    • keywords: mt-component
  • npm 目录结构解析
    • /build/examples 目录
    • 且对应着standalone的html示例

Web 组件(React、Angular等)

  • package.json
    • keywords: mt-component
    • examples (数组):
      • 标识react-native组件的示例入口地址
  • npm 目录结构解析
    • examples/***.[ios|android].js  演示文件
    • 要求:文件中的registerComponent的名字应为packageName-exampleName

 

纯JavaScript实现的React Native 组件


├── README.md
├── examples     # 示例目录
│     ├── index.android.js    # android 示例源代码
│     └── index.ios.js        #  ios示例源代码
└──────── index.js    # 组件源码

  {
    "keywords": ["mt-component"],     # 关键字
    "examples": [
      "examples/index.android.js",   # 指定example所在位置
      "examples/index.ios.js"
    ]
  }

结构示例

package.json 中应该包含


── web-component
    ├── ChangeLog.md
    ├── README.md
    ├── assets                             # 組件依賴的靜態資源(構建後)
    │  ├── index.css
    │  └── img.png  
    ├── build                              # 供 Component Hub使用(演示Demo)
    │  └── examples
    │       ├── demo.html
    │       └── demo-advance.html
    ├── lib                                # 構建後的JavaScript源碼(組件)
    │  └── index.js
    ├── src                                # 源碼(提供es6/7源碼)
    │  ├── index.js    
    │  └── assets                         # 欲構建的CSS樣式資源
    │       └── index.(css|scss|less)

发布npm包的目录结构

满足规则的组件均会定期被抓取& 录入到组件中心仓库中 ...

如何开发满足收录规则的组件?

  • @mtfe/generator-fe-component
  • @mtfe/turbo-component
  • @mtfe/bbq
  • @mtfe/rt

开发脚手架

@mtfe/rt

(Rabbit Tools)用于辅助用户开发标准组件的cli工具


    npm --registry=http://r.npm.sankuai.com i @mtfe/rt@latest -g

安装

创建一个组件项目

 
  $ rt init simple-component  #以simple-component为名创建一个项目

  # 回答问题:组件类型(React、Angular等)、CSS预处理器选择(sass|less)等

  # 创建simple-component文件夹 & 初始化项目文件

  # 安装npm依赖

  $ cd simple-component && npm start # 启动开发服务器

  # enjoy 开发过程吧~

── simple-component
    ├── ChangeLog.md
    ├── README.md
    ├── assets                             # 組件依賴的靜態資源(構建後)
    │  ├── index.css
    │  └── img.png  
    ├── examples                           # 組件演示的源碼
    │  ├── demo.js   
    │  ├── demo-with-bootstrap.js    
    │  └── demo-with-bootstrap.html
    ├── build                              # 供 Component Hub使用(演示Demo)
    │  └── examples
    │       ├── demo.html
    │       └── demo-advance.html
    ├── lib                                # 構建後的JavaScript源碼(組件)
    │  └── index.js
    ├── src                                # 源碼  
    │  ├── index.js                       # es6/7 語法糖
    │  └── assets                         # 欲構建的CSS樣式資源
    │       └── index.(css|scss|less)
    ├── test.setup.js                      # 測試環境配置
    ├── test                               # 組件測試
    │  └── index.spec.js 

项目结构(React Web 举例)

如何开发组件 & 写示例?

1. 启动开发服务器:npm start

3. 修改src/examples目录下JavaScript等文件

  • src:组件源码
  • examples:示例源码

2. 打开 http://localhost:3001/ (查看示例)

代码热替换

你修改任何文件的同时立刻能看到效果

无需重启开发服务器 & 刷新浏览器页面

如何写样式?

  • 目前支持四种风格的样式书写,分别为: 纯css, less + autoprefixer, sass, postcss
  • 样式代码在src/assets
  • 执行gulp css将编译css代码到/assets目录下

如何写测试?

test/*目录下的任意文件都是测试文件

  • mocha 做测试框架
  • jsdom 为node提供dom环境
  • sinon 做为spy工具

如何发布组件?

  • 首先commit掉你的所有改动,保证工作区干净
  • 更新组件版本:npm version [major | minor | patch | ...]
  • 构建&发布: npm run pub
  • 清空lib/**目录和build/**目录
  • src/**目录js文件(ES6/7)`译`lib/**目录中
  • src/assets/*目录相关css编译后复制assets/**目录中
  • 构建examples目录示例到build/examples目录下,每个js文件会对应生成一个独立的html页面
  • npm publish
  • 加上git的tag, 并push到远程分支
    • git tag ${version}
    • git push origin ${version}:${version}
    • git push origin master:master
  • 执行清理工作 删除/build、 /lib、 /assets目录

  $ npm run pub

检索 & 分享

Web端组件

移动端组件

iOS

为什么需要组件中心客户端?

有些组件是针对移动端开发的(如Touch事件依赖

在移动端演示更加直观

React Native组件跟Web组件非常不一样

无法在Web页面上交互和预览

思路一:

对于开发者,需要对组件进行截图(gif动态图),并自行生成出Html页面及代码。

  • 优点
    • 简单粗暴易实现
  • 缺点
    • 展现出来的质量由工程师心情决定
    • 每次更新都可能需要重新截一次或多次图
    • 没有交互,用户无法直接体验

思路二:

  • 开发者采用标准脚手架开发
  • 在示例文件夹下有对应的示例入口文件
  • 收录后,对每一个示例均会生成一个带二维码的Html页面
  • 用户可以根据这个二维码来查看示例
  • 用户在手机上安装"组件中心App"
  • 打开App,扫描页面上方二维码
  • 组件中心App加载二维码对应的 jsBundle
  • 执行并渲染出页面
  • 此时用户可以在手机上体验这个组件示例

Q & A

謝謝 ~

美团前端组件中心介绍

By Ivan Lyons

美团前端组件中心介绍

美团 Component Hub 是美团前端童鞋维护的一个收录了各种类型通用组件(如React、React Native及Angular)的平台。 目的是标准化前端UI组件开发,同时也方便前端童鞋们统一管理、索引所有的组件,减少重复开发和维护成本。

  • 17,161