Vue高效UI组件库—iView开发实践

前段时间在微软参加活动，分享了 TalkingData 开源的基于 Vue.js 的高效 UI 组件库 iView 的一些开发经验，现整理成文，和你们探讨。
本文首发于掘金，转载请注明出处和做者。

GitHub：https://github.com/iview/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 特色

• 基于 npm + webpack + babel + ES2015
• 友好的 API
• 事无巨细的文档
• 高质量、功能丰富

由于 iView 目前是在 webpack 下使用的，因此你可使用 webpack 丰富的插件和个性化配置。iView 也是使用了 ES2015 开发。
iView 一个最大的特色，就是咱们从使用者和场景出发来设计 API，这点后面会重点讲到。它的文档也是至关详细，每一个功能都配有详细说明和实例代码，直接复制就可使用，咱们也计划在明年启动英文文档翻译计划。
在开发组件时，咱们阅读了不少已有组件库的代码，取长补短，实现代码的高质量。

目前进度

iView 计划在2017年初可以发布1.0版本，1.0将覆盖40+经常使用 UI 组件，包含 Form表单类，View视图类，Navigation导航类，Base基础布局类，Chart图表类等。图中打勾的是已经完成并上线的组件。

24栅格系统

iView 借鉴了 Bootstrap 和 Ant.Design 的栅格系统，支持每行最多容纳 24 列的布局，栅格系统对高级浏览器支持 Flex布局，包括 Flex对齐、Flex排列、Flex顺序，也支持栅格的排序、偏移、间隔。友好栅格系统对页面的拆分布局起到了关键做用，你可能不用再写任何布局代码就能够轻松使用栅格完成你的需求，并且它很精准。

精心设计的 API

咱们在组件 API 的设计上下了不少功夫。不少开发者在实现一个组件时，可能从编程的难易出发思考问题，而忽略了这种设计是否对使用者友好，iView 则一切以使用者为核心，咱们会思考这样设计是否对使用者便利，或者若是是我用这个组件，我但愿怎样来用。举个栗子，常见的页面信息提示，JavaScript 原生是window.alert('something')，可是用 Vue 来模拟出这样一个组件，那使用方法就像是 something 。对的，这就是 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 的高质量和丰富的功能，因此就举两个例子吧。

分页组件 Page：

分页组件从功能上借鉴了 Ant.Design，支持智能折叠页码（页码过多时，会左右折叠）、页码快进（点击···会快进或快退5页）、切换每页显示条数、电梯，同时还有迷你模式（支持因此普通模式的功能）和简介模式。

选择器组件 Select

与浏览器原生不一样的是，首先 UI 统一并且很好看，这是大部分模拟 select 的主要缘由，其次功能更增强大，支持单选、多选，键盘的快捷操做，还支持搜索、自定义模板、分组，以及大中小三种尺寸（iView 不少表单类组件都提供了不一样的尺寸），在单选时还能够清空选项。

配套工程

最后要说的是与 iView 配套的工做流（github.com/icarusion/v…），好马配好鞍，这套工做流支撑了 TalkingData 不少大型产品，从开发、灰度到上线均可以一键式完成，包括资源的 CDN 配置等等，无论你是新手仍是老司机，均可以从它开始开发。固然 iView 也是支持 vue-cli 的。

Todo

• iView 目前是基于 Vue.js 1.0的，咱们会在未来新开一个分支来支持 Vue 2.0，咱们也认为 2.0 是将来的趋势。
• iView 很快会支持不依赖 webpack 的 umd 使用方法。
• 目前的 UI 是以 Ant.Design 为雏形，咱们在 0.9.7 版本开始逐步优化和替代，使 iView 不只好用，还很好看。
• iView 明年会启动英文文档翻译计划，也但愿喜欢和支持 iView ，同时英语不错的同窗能够加入咱们，一块儿参与翻译。

后记

iView 从正式发布1个月内，得到了不少好评，连续5天进入 GitHub Trending（固然，这离不开掘金强大的运营能力😝），在不少社区反响不错，咱们也会继续努力，把最好的 iView 组件库呈现给你们。咱们也很是指望喜欢 iView 的开发者可以加入咱们，一块儿贡献代码或是翻译文档，咱们欢迎各类形式的代码贡献。若是您有想法加入翻译计划，能够邮件联系我：admin@aresn.com