WotDesign 正式与大家见面啦！WotDesign 是聚焦前端团队基于京麦新规范实现的组件库，旨在给商家提供统一的UI交互，同时提高研发的开发效率。
京麦 WotDesign 高效的 Vue/小程序 组件库
WotDesign 是聚焦前端团队基于京麦新规范实现的Vue/小程序组件库，目前主要是帮助搭建B端企业级产品，我们提供了一套完整的UI基础组件和业务组件。可以快速搭建出风格统一的页面，提升开发效率。目前已有50+个高质量组件。这些组件被广泛使用于京东商家后台的移动端业务中。我们会在此基础上不断完善，开发更多实用的组件。
特性
- 友好的 官方文档
- 在小程序组件库文档上，我们新增了常见问题FAQ，将小程序框架的初次使用可能遇到的问题整理出来，并作出解答
- 文档支持组件搜索，可轻松定位到用户查找的文件
- 专门的设计师团队维护视觉规范，统一而优雅
- 支持按需加载，减少打包体积
- 支持主题定制
- 支持国际化
- 扩展性强，组件库提供基础的组件，可以在此基础上进行二次开发
- 性能体验更优秀
- 学习成本低
- 开发成本低
历程
开发理念
一、复用性（粒度）
**适用于多个业务或产品，在设计过程和研发过程中都可以高频复用。**¨NBSP;
单个组件的划分粒度拆解基于 Brad Frost 提出的「原子化设计理论」结合我们的业务场景，从最基本的元素入手，根据实现的功能划分，原则是不同的业务场景都需要，但与具体业务又没有直接强关联。因此可以在多场景下进行复用，同时我们也提供了部分个性化的设置，以便于满足多种场景。
二、持续迭代
我们的理念是快速迭代，现在团队内主推用 WotDesign 进行开发，公司内外都在推广，用的就是现在github上的版本，是把 WotDesign 当做我们的品牌、门面来维护，因此我们会快速响应对组件库的反馈，对使用者的体验问题、bug进行及时跟踪并修复。
我们对于自己的定位是服务者，基建人员本质上就是为了更好的服务于开发者，让使用的人觉得好用，开发起来事半功倍，这是我们最大的目标和开发动力。
三、体验提升
0202年了，时代变了，优秀的组件库如此多，我们在这个优秀组件库林立的时代下，为什么还要重复造一个轮子呢？
一直以来，关于组件库的通用优势，都是一个老生常谈的话题，我们在此处简单的梳理一下：
- 保证产品体验的一致性
- 提升设计师的效率
- 提升产研团队的效率
- 利于沉淀设计规范
我们的优势在哪里？
-
开发时，我们经常拉着UI同学、交互同学一起沟通对应场景下组件的交互应该如何设计，再结合我们自身开发中的编码习惯，最后通过头脑风暴确认最终的交互形态以及暴露的API。
-
每一个组件的功能呈现的最终效果，都经过我们反复推敲，怎样让用户觉得看着舒服，开发者使用着舒服，是我们开发时最注重的事情之一。
体验提升案例一： 交互体验提升
「时间选择器」组件示例：
1.0 DatetimePicker
通过上面的示例可以看到，在2.0版本我们优化了时间选择器的交互效果，由原来的垂直拖拽式改为滚筒式，由2D动画转为了3D动画，在视觉的体验上更加精致，表现力更强。
并在此基础上新增了时间范围选择，由于移动端的屏幕大小有限，有时无法展示过多的数据，关于时间选择器的范围选择功能交互形式我们探讨了很长时间，最终决定采用tab的形式拆分两个picker，再将其整合展示，在未来我们会添加日历组件来满足日益复杂的时间选择场景。
体验提升案例二： 样式体验提升
「按钮」组件示例：
1.0 Button
2.0 Button
相较于1.0版本的单色样式，2.0 组件库支持围绕主题色开启渐变色模式，用户除了可以替换变量来修改主题色外，也可以开启渐变色模式，开启渐变色模式后，用户替换主题色，我们会在组件中计算出围绕主题色的渐变色对应色值，如果不需要开启渐变色可关闭渐变色设置。
现有组件
组件库Q&A
Q1：维护两套组件库的成本？
H5组件库用到Vue框架，mini使用小程序进行开发，小程序端又分为微信小程序和京东小程序，为了同时支持京东小程序组件库、微信小程序组件库，我们开发了支持京东小程序微信小程序互转的插件，差异部分通过插件转换，这样我们开发时集中注意力在单一技术栈（只用京东小程序或微信小程序）即可，不需要再集中注意力另搞一套组件库。
Vue和小程序本身的技术栈具有一定程度上的相似性，两端转换适应后并不需要过多的开发成本，当然我们也踩了不少坑，都在组件文档中一一列出；除功能逻辑外，样式上两套组件也是能复用就尽量复用一套，所以并不需要很高的维护成本。
Q2：体验一致性、API一致性？
两端API、体验达到了95%的一致性，除了两端差异从技术角度无法统一，页面视觉差异差异不超过2%，因此在用户在切换这两个组件库时几乎感觉不到差异。
Q3：面对的问题？
- 在现在的版本，考虑到当前团队的技术栈，我们使用vue作为框架进行组件库的开发，但同时也收到很多使用非Vue技术栈开发同学的询问，能否支持React或其他开源框架，未来可能会使用web components对组件库进行重构。
- 移动端的单元测试覆盖率不够， 只达到30% ，我们会在后续不断补全，为用户输出更可靠值得信赖的组件。
最后
欢迎体验，入股不亏。
我们会不断丰富优化我们的组件库，同时我们也会及时总结对组件开发的经验，对外输出成文档。希望我们的经验也能对其他的开发者提供一些帮助，一起成长共同构建前端更好的组件生态，前端生态的发展需要依靠所有前端人员共同推动。
开源项目的进步离不开社区的贡献，非常感谢对wot社区提过意见的所有同学，特别感谢**用户体验设计部JDC以及京东商家体验设计部RED**的设计同学，也欢迎未来能有越来越多的同学参与到我们的开发中来。
招贤纳士
聚焦前端FTF，一个有温度有激情爱折腾的年轻团队，隶属于京东零售平台生态，在日常的业务对接之外，还在**「微前端、脚手架、可视化组件、CI/CD、Node.js、Web Components、组件库、插件开发」**等方向进行技术探索和实战，持续探索前端技术体系的新边界。
我们致力于用工具打造极致的体验，可以通过技术发展赋能业务成长。如果你对探索新技术感兴趣、如果你对业务痛点有独到的见解和思路却苦于无处施展、如果你对沉淀基础前端研发体系有想法，欢迎随时联系我们ftf.jd.com。
未来的朋友，欢迎你的加入 [](￣▽￣)*。
