JUI（一套基于vue开发的移动端组件库）

JUI

意义

目前团队内缺乏标准的组件库，每个人可能在开发的过程中都要自己造一遍轮子，质量参差不齐，这样造成开发资源的极大浪费。而且在需求比较多的时候，可能由于缺乏基础的组件，导致开发进度缓慢，影响业务的快速发展。同时京东作为技术驱动的互联网公司，我们可以借助JUI这个项目对外展示我们的前端技术实力，让社区听到我们京东的声音，而且借此项目还能够吸引一些对技术有追求的人才加入我们的团队，提高京东对人才的吸引力。基于这种背景，我们提出JUI项目，解决以上的问题。

竞品分析

目前社区内有比较多的开源组件库，如element，antd，mint-ui, vant等上千上万star的开源作品。

• 竞品的优势：

  1. 使用量大是我的无，质量有保证。
  2. 背后有大团队维护，长期维护迭代。

• 竞品的劣势：

  1. 众所周知，没有任何一个组件库能够符合所有的业务，很难找到一个完全符合京东业务的组件库。
  2. 京东需要一套具有电商特色的组件库，能够帮助快速开发我们京东自己的业务。
  3. 由于这些开源组件库为了照顾尽可能多的场景，所以在组件的设计上，大而全。但是我们的业务可能不需要那么多的功能，因此可能会导致api过多，包体积过大的问题。
  4. 由于是开源项目，遇到问题不一定有人帮忙解决。而我们自己开发的组件库，可以保证在出问题的时候，第一时间解决。

我们的优势

• 支持定制主题。
• 支持按需加载。
• 添加单元测试，保证代码质量
• 组件以满足京东业务为核心，具有京东特色
• 完善的文档，丰富的demo

可能的挑战

目前由于缺乏单元测试的经验，可能会在写测试的过程中遇到问题。
目前UI设计的规范资料还不是足够齐全，可能会导致项目开始的时间顺延。

规范

• 视觉: 以京东APP视觉规范为基础。
• 布局: 采用rem布局方案
• css处理器: 采用postcss
• 代码规范: 采用Eslint进行代码规范，参考Airbnb-eslint的配置
• 代码提交规范: 采用开源社区主流的git提交规范

范围

基础组件

• Icon 图标 (1day)
• Button 按钮 (2day)
• Backtop (2day)
• Counter 步进器 （2day）
• Tag 标记 （2day）
• NoticeBar 通告栏 （2day）
• Tabbar 带数字标签栏 （1day）
• Slider 轮播（2day）
• Tab 选项卡（2day）

表单组件

• Input 输入组件 （4day）
• Switch 开关 （1day）
• Radio 单选框 （2day）
• Checkbox 复选框 （2day）

交互组件

• Popup 弹出层 （3day）
• Dialog 弹出框（2day）
• Toast 吐司（2day）
• DatePicker 日期选择（5day）
• Loading 加载中（1day）
• Mask 蒙版（1day）

业务组件

• Search 搜索 （1day）
• Step （2day）
• Rate 评分（2day）
• Address 收货地址选项 （1day）
• Item 商品展示 （1day）

时间节点

7月13日：给出组件库规划，共26个组件，预计完成时间节点为九月底
7月27日：基础组件开发45%（完成Icon，Button，悬浮球，Counter）
8月10日：基础组件开发100%（所有的基础组件开发完毕）
8月24日：表单组件开发100%（所有的表单组件开发完毕）
9月7日 ：交互组件开发70%（完成Popup，Dialog，DatePicker组件）
9月21日：交互组件开发100%，业务组件开发75%（所有的交互组件开发完毕，完成Search，Step，Rate组件）
9月30日：业务组件开发100%（完成所有组件的开发工作），上线官网，发布JUI 1.0版本。