两年前,我开始接触 Vue.js 框架,当时就被它的轻量、组件化和友好的 API 所吸引。之后我将 Vue.js 和 Webpack 技术栈引入我的公司(TalkingData)可视化团队,并经过一年多的实践,现已成为整个公司的前端开发规范。
与此同时,我开源了 iView 项目,它是基于 Vue.js 的一套高质量 UI 组件库,从设计规范、工程构建到国际化都提供了完整的解决方案,并支持 SSR。在许多志愿者的帮助下,将文档全部翻译为英文,在 Vue 开发者社区颇受欢迎。

去年的 7 月 28 日,一个名叫 iView(github.com/iview/iview) 的工程立项了,今天正好是它一周岁生日。回想当初只是作为一个团队组件库来开发,风风雨雨经历了一年,已经成为 Vue 社区最受欢迎的组件库之一了,在 GitHub 也收获了近 8000 Star,npm 每月有 10k 多安装。当然,这一切的成果,都离不开公司给予我的支持和 Vue 社区的活跃。

彩蛋


既然是纪念日,就来点好玩的吧。我们重新装饰了iView 官网,今天开始的一周里,可以在首页发弹幕,来和世界各地的朋友们一起畅(chě)聊(dàn)吧。

2.0

iView 一周年,对于开发者来说最好的消息,就是我们终于发布 2.0 的第一个正式版。在过去的 4 个多月里,我们连续发布了 19 个 rc 版,其实早可以发布 2.0 正式版的,并在此基础上迭代。迟迟不发,就是想把最好的一个版本带给大家。当然,即使今天发布了正式版,依然还有不少问题等待解决,一个好的组件库是需要经历不断磨练。

来回顾一下,从 1.0 到 2.0,iView 有哪些重要改变:

最重要的当然是支持 Vue 2 了,其次支持了 SSR 和 Nuxt.js,对常用组件进行了扩展:Table 单元格的渲染基于 Vue 的 Render 函数,并支持展开;Select 支持远程搜索;Cascader 支持异步和搜索。还有 100 多项细节优化。2.0 正式版,更是加强了 Table组件,优化了其 8 个问题,所有的浮层类组件都增加了 transfer 属性,可以选择是否将其插入到 body 内,使用更灵活。具体的更新内容可以查看更新日志

聊聊英文版

上个月,我们已将 iView 文档全部翻译为英文,前前后后进行了 3 个多月才算完成。有了英文版后,更多的国外开发者也参与到 GitHub 讨论之中,相信接下来会有更多来自国外的 contributors。

上图是来自 Vue 社区一位国外开发者的评价。

英文版的翻译离不开社区的贡献,在此特别感谢 lcx960324rijnBigChief45 三位热心志愿者。

版本号的故事

iView 从 2.0 版本开始,版本代号将以获得过 Apple Design Awards 的游戏或优秀的独立游戏来命名。

每个开源项目的版本代号都有它的故事。作为一枚热爱 iOS 独立游戏的玩家,每每看到画风精致、剧情动人的好游戏都会流连忘返,推荐给身边的同事,所以用它来命名,也算是对独立游戏的一种支持。

2.x 的第一个版本(2.0)代号是 Leo's Fortune(里奥的财富)。

这只是开始

iView 已经很好地帮助前端开发工程师们加速完成中后台业务开发,但作为一个有追求的大数据可视化团队,这仅仅只是一个开始。下半年,TalkingData 可视化团队将继续开源两个重磅级项目:

  • InMap:基于 Canvas 和 WebGL 的地理信息可视化框架

  • InChart:基于 Vue.js 和 eCharts 的图表标准库

这两个项目都会给数据可视化带来福音,其中值得详细介绍的是 InMap,事实上它的历史要早于 iView,只是一直属于闭源状态,在 TalkingData 内部使用。这次也是鼓足了劲,在 API 和易用性上进行重构后开源。

在地理可视化的过程中,因为地图的矢量数据不是一次性加载的,矢量数据是随着用户的请求,随着瓦片一起加载到本地的。在这个过程当中存在两部分的计算比较多,限制了可视化绘制的速度,一个就是各种数据的坐标转换,另一个就是各种数据的可视化。目前 InMap 中使用了 web worker 在后台对矢量数据使用多线程计算,保证页面对用户响应的同时对各种数据进行计算,对于其他适合并行计算的坐标数据采用 GPU 进行转换。绘制可视化层使用了 WebGL。

下图是基于 InMap 实现的一个全 3D 地球,可以实现自传、公转、随意拖拽旋转、放大缩小等立体效果。

InMap 和 InChart 预计会在数月后和大家见面,敬请期待!

对开源现状的一些思考

能够完整参与一个开源项目,见证它从 0 到 1 的改变,对我来说确实是一件幸运的事,因为从这段开源经历里,学到了太多的知识,也结实了很多开发者。开源是一件很有意义的事情,然而很多国内开发者却有一个不好的习惯,他们被统称为“伸手党”。相比很多国内开发者提出的 issues,我更喜欢去解答国外友人的英文 issues,这不是因为英文看起来有多高大上,而是国外朋友的提问都很友善,而且是经过深思熟虑的。在求知的态度礼帽上,这点国人做的确实不好,如果你 watch 了 iView 的项目,每天会收到几十封邮件,其中大多没有按照 issue guide 的要求来问,close 掉,还经常被骂,一阵负能量。试问,这些不按要求问题,还态度恶劣的人,你们为开源做过什么贡献呢?开源是免费,但不是说用了开源产品就是大爷,那么牛逼,干嘛不自己造轮子呢。

这样的问题不仅仅发生在 iView 上,我同 VUX(知名移动端 Vue 组件库) 的作者也深刻探讨过,在 VUX 的社区也会带有不少类似的负能量。这种不良现象在国内应该还有很多,VUX 的 readme 曾今写的这段仅有的中文,正是写给这部分人看的:

我相信提 issue 的朋友初衷都是好的,都是来解决问题的,只是聪明的、真正想解决问题的人,都会花费一些时间来认真填写 issue 内容。付出就有回报,任何一个认真的提问,我也会认真的回答,而那些随随便便提的问题,连代码格式化也不会的也会被随随便便关掉。

开源是世界的,所以请善待 GitHub 社区。

最佳实践

从 2016 年下旬开始,TalkingData 的众多新项目开始使用 iView,部分核心项目已逐步开始使用 iView 重构。以下是部分项目的截图:

使用者的心声

TalkingData 数据工程师 王祥:
上半年,部门的两条重要产品线 App Analytics 和智能数据市场 (SDMK),用 Vue+iView 完成了产品重构,效果显著。下半年,其它几个重要产品,也计划引入 Vue+iView 技术栈。iView 的引入,保证了各产品线的视觉统一,设计师几乎不需要参与到产品研发过程,降低了人力成本;工程师们可以更专注在业务上,避免了除了业务代码还要维护基础的组件,极大的缩短了产品研发周期。强烈建议采用 Vue 技术栈的团队,也尝试下 iView。感谢 iView!

TalkingData 数据工程师 杨涛:
从使用 iView 0.9.x 版本到目前的 2.x 版本,见证了 iView 从实现各类组件到丰富组件功能的每一步,使得我们在团队作战中大大提高了项目开发效率。在我们的多个项目中使用了 iView 的各类组件,它完善的文档和示例代码降低了学习成本,同时 iView 也在高频率的更新完善,选择 iView 作为前端 UI 组件简单易用大大加快了项目进度的同时更多的是感受到 iView 的工匠精神。

汉云优品 产品经理 关静凯:
我是一个爱搞技术的产品经理,在看到 iView 之后,被 iView 整体的 API 和 UX 设计所折服,非常容易上手,起初只是在产品设计上使用 iView 快速实现中后台 Demo,iView 使产品的交互和 UI 保持了高度一致性,在对公司前端团队培训后,逐渐完成了前端工程化,现在公司的产品已经使用了 Vue.js 和 iView 进行了重构。iView 的源代码非常规范,二次开发及其友好,目前正结合公司现有业务,进行了一些组件的添加,主要集中在数据可视化和一些业务组件的封装,iView 给公司带来的不仅仅是前端技术的革新,更重要的是推动了产品迭代的速度,因为成功引入 iView,我也获得了公司层面的支持整合设计和前端组建了 UED 部门。再次感谢iView 框架带来的便利。

总结

接下来要做的事情还有很多,我们会通过 iView 在大量实战项目中的使用,在组件的易用性、稳定性上不断提升和改良,也会在 UI 细节上更加规范、漂亮。

这里也要特别感谢所有为 iView 项目付出努力的贡献者们,一个好的项目,是需要大家共同创造和维护的。也借此文,呼吁有工匠精神,热爱开源的开发者们能够加入到 iView 项目里来,一起把它打造成世界级优秀组件库。

福利

为庆祝 iView 一周年暨 2.0 版发布,Vue.js 系列课程一律 6.6 元,持续一周。

特别感谢

最后特别感谢以下技术社区长期以来对 iView 开源项目的推广与支持(排名不分先后):

iView 一周年了,同时发布了 2.0 正式版,但这只是开始...的更多相关文章

  1. Wonder 1.0正式版发布-----WebGL 3D引擎和编辑器

    介绍 我们很荣幸地向大家发布Wonder 1.0正式版!免费.开源,不用注册,直接打开在线编辑器即可使用! Wonder是web端3D开发的解决方案,包括引擎.编辑器,致力于打造开放.分享.互助的生态 ...

  2. Redis 3.0正式版发布,正式支持Redis集群

    Redis是一个开源.基于C语言.基于内存亦可持久化的高性能NoSQL数据库,同时,它还提供了多种语言的API.近日,Redis 3.0在经过6个RC版本后,其正式版终于发布了.Redis 3.0的最 ...

  3. 【6年开源路】海王星给你好看!FineUI v4.0正式版暨《FineUI3to4一键升级工具》发布!

    去年10-28号,我发布了一篇文章<海王星给你好看!FineUI v4.0公测版发布暨<你找BUG我送书>活动开始>,标志着FineUI开始向4.0版本迈进.经过4个月3个公测 ...

  4. Appium路线图及1.0正式版发布

    Appium更新的速度极快,从我试用时候的0.12到1.0(0.18版本后就是1.0),完全符合移动互联网的节奏. 更新可能会慢,可以多试几次 整理了testerhome上思寒发表的帖子,让我们来看下 ...

  5. [Android应用]《花界》V1.0 正式版隆重发布!

    http://www.cnblogs.com/qianxudetianxia/archive/2012/04/05/2433669.html 1. 软件说明(1). 花界是一款看花软件:“看花,议花, ...

  6. QzzmServer v2.0正式版发布

                                 V2.1升级程序已发布,具体见下文                                首先,感谢网友的热情的测评及反馈,现Qzzm ...

  7. Angular4.0.0正式版发布

    来源于angular4.0.0发布时的公告,译者:niithub 原文发布时间:Thursday, March 23, 2017 翻译时间:2017年3月24日 angular4.0.0正式版现在可以 ...

  8. RestServer 2.0 正式版发布

    RestServer 2.0 正式版发布 使用许可&版权说明 在保持本软件完整的情况下可以将本软件用于任何商业用途. 本软件可以自由传播,但是请保持软件相关文件和说明文档完整. 未经许可不得将 ...

  9. React Suite v3.0 正式版发布

    React Suite v3.0 正式版发布 相信很多人会好奇,React Suite 是什么? React Suite 是 HYPERS 前端团队和 UX 团队开源的一套基于 React 的 UI ...

随机推荐

  1. P1424

    #include <stdio.h> int main(){ int s = 250; int x, n, distance = 0; scanf("%d %d",&a ...

  2. LeetCode-102-二叉树的层序遍历

    二叉树的层序遍历 题目描述:给你一个二叉树,请你返回其按 层序遍历 得到的节点值. (即逐层地,从左到右访问所有节点). 示例说明请见LeetCode官网. 来源:力扣(LeetCode) 链接:ht ...

  3. WordCount基于本地和java的使用

    直接使用hadoop中的wordcount中的jar包进行使用 JAVA实现WordCount import java.io.IOException; import org.apache.hadoop ...

  4. 9.resultMap元素

    resultMap 是 MyBatis 中最复杂的元素,主要用于解决实体类属性名与数据库表中字段名不一致的情况,可以将查询结果映射成实体对象.下面我们先从最简单的功能开始介绍. 现有的 MyBatis ...

  5. matlab图形中添加文本框

    图形中添加文本框,自己目前了解到了两种方法:1.用legend函数就可以对图形标注,形成一个文本框: 2.就是用annotation('textbox',[0.2,0.2.0.1,0.3],'Line ...

  6. 网络标准之:IANA定义的传输编码

    目录 简介 IANA的传输编码方式 7bit 8bit binary quoted-printable base64 总结 简介 不同的系统或者协议可以接受的数据类型是不同的,如果要在那些不支持现有数 ...

  7. thinkphp 用户登录记录日记

    1.设计数据库表名,字段 2,建立模型 <?php namespace app\login\model; use think\Model; class LoginLon extends Mode ...

  8. tensorflow源码解析之common_runtime-executor-下

    目录 核心概念 executor.h Executor NewLocalExecutor ExecutorBarrier executor.cc structs GraphView ExecutorI ...

  9. LGP3726题解

    确实牛逼......这个转化我反正肯定想不到... 考虑 \(a=b\) 的情况.发现出了平局之外都是一半赢一半输.可以得到此时的答案为: \[\frac{2^{a+b}-\sum_{i=0}^{a} ...

  10. 通信原理:基于MATLAB的AM调幅分析

    目的: 通过matlab仿真AM调制,通过图像分析来更好的了解AM调制的过程 1.为什么基带信号要加上一个直流分量. 2.所加直流分量为什么要大于基带信号的最大值. 3.时域中调制信号与载波和基带信号 ...