前段时间在微软参加活动,分享了 TalkingData 开源的基于 Vue.js 的高效 UI 组件库 iView 的一些开发经验,现整理成文,和大家探讨。
GitHub : https://github.com/iview/iview
TalkingData 可视化团队使用 Vue 有半年多时间,经历了从开始简单的使用双向绑定,到后来完全依赖 Vue 全家桶和 Webpack 的演变过程。这套开发模式验证了多个大中型项目,开发效率有了显著了提升,工作流也从半自动进化到了开发、灰度、生成环境的全自动,可以说 Vue 还是给我们带来了很愉快的开发体验。 随着组件化的不断深入,对组件的复用和维护成了一个问题,于是开始调研市面上的 UI 组件库,发现基于 Vue 的大多是移动端的,而针对 PC 中后台的,能像阿里 Ant.Design(基于 React.js) 那样功能丰富而且高质量的,没有看中一款,要么就是不维护了,要么就是功能太简单,质量不够高。所以我们决定自己开发维护一套高质量的 UI 组件库。确定好这个目标,规划好 1.x 版本后,就开始这条不归路,最近三个多月一直投身于 iView 的开发。 至于起 iView 这个名字,其实也没多想,以 Apple 的产品命名加上 Vue 的发音,简单好记好读,同时 GitHub 还没有注册这个组织名(就为了这些,也得把它做成一个精品😂)。
iView 主要适合大中型中后台产品,比如某产品的运营平台、数据监控平台、管理平台等,从工程配置、到样式布局,甚至后面规划的业务套件,是一整套的解决方案,所以它可能不太适合一些 to C 的产品,比如 QQ 空间 这类的。
iView 当然主要的面向对象是有过 Vue 组件化开发经验的前端工程师了,但同时对偏后端的工程师也很友好,因为我们提供好了环境配置和丰富的文档教程,即使对于像写 Java 从未接触过 Vue 开发的同学,在一周内也能很快上手,而且基于这套解决方案开发的产品是非常高效的 SPA 。
目前 iView 可以直接通过 npm 安装,很快将发布一个重要版本 0.9.7 ,在这个版本中,我们对大部分组件的 UI 进行了调整和优化,也丰富了很多组件的功能。 由于 Vue 本身原因(这里不展开), iView 只能兼容到 IE 9+,表现最好的是 Chrome 、 Safari 、 Firefox ,有些功能和动画不能在 IE 下得到兼容。这也和使用场景有关,一般 to B 的产品,我们可以要求客户去使用高级浏览器。
因为 iView 目前是在 webpack 下使用的,所以你可以使用 webpack 丰富的插件和个性化配置。 iView 也是使用了 ES2015 开发。 iView 一个最大的特点,就是我们从使用者和场景出发来设计 API ,这点后面会重点讲到。它的文档也是相当详细,每个功能都配有详细说明和实例代码,直接复制就可以使用,我们也计划在明年启动英文文档翻译计划。 在开发组件时,我们阅读了很多已有组件库的代码,取长补短,实现代码的高质量。
iView 计划在 2017 年初能够发布 1.0 版本, 1.0 将覆盖 40+常用 UI 组件,包含 Form 表单类, View 视图类, Navigation 导航类, Base 基础布局类, Chart 图表类等。图中打勾的是已经完成并上线的组件。
iView 借鉴了 Bootstrap 和 Ant.Design 的栅格系统,支持每行最多容纳 24 列的布局,栅格系统对高级浏览器支持 Flex 布局,包括 Flex 对齐、 Flex 排列、 Flex 顺序,也支持栅格的排序、偏移、间隔。友好栅格系统对页面的拆分布局起到了关键作用,你可能不用再写任何布局代码就可以轻松使用栅格完成你的需求,而且它很精准。
我们在组件 API 的设计上下了很多功夫。很多开发者在实现一个组件时,可能从编程的难易出发思考问题,而忽略了这种设计是否对使用者友好, iView 则一切以使用者为核心,我们会思考这样设计是否对使用者便利,或者如果是我用这个组件,我希望怎样来用。举个栗子,常见的页面信息提示, JavaScript 原生是window.alert('something')
,但是用 Vue 来模拟出这样一个组件,那使用方法就像是 <Alert v-if="show">something</Alert>
。对的,这就是 Vue 组件的实现方法,但是,我们真的期望这样使用吗,当然不是,我们也想像原生一样,在某个时刻,一句话就能弹出来,而不用事先埋在 HTML 里,用一个 if 条件判断是否显示这个组件。
为了更形象的介绍 iView 的 API 设计,我们拿出了一个常用的组件 Modal 模态对话框,和饿了么的 Element 及 Radon UI 这两个组件库进行对比。一般的 Modal 长这样:
有标题栏(header)、关闭按钮、正文(body)、底部(footer)操作按钮,点击灰色遮罩层或键盘 Esc 键可以关闭对话框。
从组件的调用方式上, Element 用的是传统组件的使用方法,也就是通过一个自定义 HTML 标签, Radon UI 是实例的方法, iView 同时支持组件和实例两种方法(这里解释一下, Element 也有支持实例调用对话框的组件,是另一个 Dialog ,不过目前是分成两个组件使用的)。 自定义 slot 让组件复用性成为了可能。 Element 支持 body 、 footer 的 slot , Radon UI 只支持 body , iView 是支持 header 、 footer 、 body (其实还有关闭按钮也支持)的 slot ,几乎满足了所有 Modal 自定义需求。 有时候我们点击确定按钮,不一样要立即关闭对话框,而是异步的获取数据,在某个时刻关闭。 Element 需要自己实现这个功能, Radon UI 则不支持, iView 是原生支持,只需要一个属性配置即可。 在更多的自定义配置上, iView 也是最大化的进行支持(详细 API 可查阅文档)。
iView 在文档编写上也是做到了事无巨细(由于文档用了一套相对重的方案来实现实例和代码的友好分离,故目前没有将文档开源,我们会在明年实现一个更好地提交文档 bug 及翻译的方案),每个组件的每个功能都有非常详细的说明,包括像哪些参数需要.sync
使用,一些隐藏的功能、可能遇到的坑等等,同时每个 demo 都有完整的代码示例,一键复制,粘贴后就可以直接看到效果。
API 也按照 props 、 events 、 slot 三部分拆分,避免混合说明遗漏和阅读不便利。
iView 的文档是目前所有同类文档里最为详细的,也受到了很多开发者的好评,所以我们仍会在文档开发的工作上保持高产出。
其实前文已经从各方面介绍了 iView 的高质量和丰富的功能,所以就举两个例子吧。
分页组件从功能上借鉴了 Ant.Design ,支持智能折叠页码(页码过多时,会左右折叠)、页码快进(点击···会快进或快退 5 页)、切换每页显示条数、电梯,同时还有迷你模式(支持所以普通模式的功能)和简介模式。
与浏览器原生<select>
不同的是,首先 UI 统一而且很好看,这是大部分模拟 select 的主要原因,其次功能更加强大,支持单选、多选,键盘的快捷操作,还支持搜索、自定义模板、分组,以及大中小三种尺寸( iView 很多表单类组件都提供了不同的尺寸),在单选时还可以清空选项。
最后要说的是与 iView 配套的工作流(https://github.com/icarusion/vue-vueRouter-webpack),好马配好鞍,这套工作流支撑了 TalkingData 很多大型产品,从开发、灰度到上线都可以一键式完成,包括资源的 CDN 配置等等,不管你是新手还是老司机,都可以从它开始开发。当然 iView 也是支持 vue-cli 的。
iView 从正式发布 1 个月内,获得了很多好评,连续 5 天进入 GitHub Trending ,在很多社区反响不错,我们也会继续努力,把最好的 iView 组件库呈现给大家。我们也非常期望喜欢 iView 的开发者能够加入我们,一起贡献代码或是翻译文档,我们欢迎各种形式的代码贡献。如果您有想法加入翻译计划,可以邮件联系我: [email protected]
1
devrsi0n 2016-11-07 12:05:06 +08:00 via Android
Vue 高质量 ui 库确实不多,支持下
|
2
Mbin 2016-11-07 12:24:12 +08:00
好东西
|
3
keikeizhang 2016-11-07 13:13:03 +08:00
感觉很不错的样子,马克
|
4
JoshOY 2016-11-07 13:15:44 +08:00
感觉完全就是 Ant Design 的 Vue.js 重制版嘛…
|
5
Kisesy 2016-11-07 13:24:17 +08:00
之前想用的,后来发现没表格...
|
6
xylitolLin 2016-11-07 13:25:11 +08:00
@JoshOY 我之前也说过类似的评论,被人喷了一脸
|
7
keikeizhang 2016-11-07 13:26:53 +08:00
http://element.eleme.io/#/ 我感觉这个基于你们的 UI 写的东东比较符合我们的项目需求,再次感谢
|
8
Loerise 2016-11-07 13:28:38 +08:00
东西很好,如果能像 element 一样提供 Axure Components 和 Sketch Template 甚至 PS 可用的就更好了。
|
9
JoshOY 2016-11-07 13:29:09 +08:00
@xylitolLin 但是这个库至少完成度还可以,之前也见到过一个 vue-antd 已经基本不维护了
|
10
exoticknight 2016-11-07 13:30:02 +08:00
好东西,解决痛点
|
11
ucaime 2016-11-07 13:34:25 +08:00
Ant Design 在 react 之前有过一版 vue 的吧,这个显示效果几乎和 Ant 一模一样
|
12
Aresn OP 从 0.9.7 开始, UI 和功能都会逐步迭代完善
|
13
Troevil 2016-11-07 13:55:21 +08:00
ele 那个 vue 的库挺不错的
|
14
fhefh 2016-11-07 14:08:40 +08:00
先 mark 3Q
|
15
lwbjing 2016-11-07 14:37:37 +08:00
那年,想把 ant design 移到 vue 上来在公司里用,然后因为太懒了就没有然后了...
|
16
DeepCold 2016-11-07 16:46:47 +08:00
支持,持续关注着
|
17
peneazy 2016-11-07 19:28:44 +08:00 via Android
mark
|
18
wensonsmith 2016-11-07 19:51:26 +08:00
为什么支持 flex 布局,但是没有自动栅格呢?
这个很有用 |
19
smallpath 2016-11-07 20:01:21 +08:00 via Android
vue2 版权重应该高一些, vue1 组件库升 vue2 的话,改双向绑定都是个巨大的工作量
|
20
zhenizhui 2016-11-07 21:31:19 +08:00
赞一个
|
22
ahjdzx 2016-11-08 21:12:44 +08:00 via iPhone
饿了么的 http://element.eleme.io 还是不错的,@sofish
|