SegmentFault 社区访谈 | Aresn:重量级的 iView 作者

50

clipboard.png

上期专访说到,Felix 是一个如同空气般存在的人 ,本期的专访嘉宾恰恰相反,是一个存在感爆棚(绝对不是说体重)的重量级用户,使用过 Vue 以及其相关 UI 组件库的小伙伴,对他的名字肯定不陌生,那就是 Aresn -- iView 的作者。

下面递 ?️ 给 Aresn,开始本期的专访~

Aresn 个人

Hello,Aresn,和大家打声招呼,介绍下自己吧

Hi,大家好,我是 Aresn,中文名叫梁灏,91 年金牛座。现在在大数据公司 TalkingData 担任可视化架构师。

更多关于我的内容可以阅读这篇文章【2016 我的心路历程:从 Vue 到 Webpack 到 iView】 (文章挺长的,还是先看这篇吧)。你还可以通过一个 5 分钟的小短片,来了解我和我团队正在做的事情,观看短片传送门(这个还是可以先看看的,只有5分钟)

清蒸混迹于你的交流群,发现小伙伴都喊你教主,可以说下这个昵称的由来吗?

这个嘛,作为一枚非知名技术网红,在 SegmentFault 开了5 场直播,因此得名。

iView 和 Vue

作为高质量开源 UI 组件库-- iView 的作者,可以简单谈谈这个组件库在你眼中是怎么样的吗?

它就像我亲儿子一样,因为过去的一年多里,我的工作主要都在它上边。每个 API,每个细节都仔细打量,逐步的推广和宣传在 GitHub 积累了 1 万多 Star。

虽然是基于 Vue,但很多地方还是玩的 JavaScript,尤其是 Table、Select 组件,内部实现是很复杂的,所以 iView 基本代表了我目前的最高开发水平了,也是我最满意的一项工作。

为什么想做开发、开源这么一个项目呢?当中有什么趣事可以和大家分享下的吗?

我们公司是 16 年初引入 Vue 的,当时还没有用 Webpack,大概 5 月份左右在第一个项目中开始使用 Webpack。因为我们公司主要是做 to B 的业务,对中后台有过很多年的设计和技术沉淀,而 Vue 的引入的确提高了开发效率。当初市面上没有一款适合我们公司的组件库,而且那时候正赶上公司鼓励做创新,于是就申请了名额,从此踏上开源的路程。

最有意思的还是跟世界各地的 contributors 一起协作,时间差使得我很多时候要工作到很晚,往往我吃中饭时,人家刚睡醒,我吃晚饭时,人家正吃午饭,我要睡了,结果人家聊的正 high 呢,结果我就得熬夜了。不过不得不承认,有些国外的开发者真的很厉害,情商也很高。很欣慰的是,不同语言的人,能在一起共同做一件事情。

iView 都有哪些公司在使用,其中有哪些最佳实践呢?

使用最多的当然还是我本家 TalkingData 啦,然后像阿里巴巴、京东、滴滴、新浪、联想等大公司也都在用。之前在社区做过一个调研:阅读传送

很多公司使用 iView 主要还是做后端管理系统,也就是不对外的。目前能看得到的产品比如我司的应用统计分析 ,还有像大搜车开发的 easy-mock ,使用了服务端渲染技术(SSR)。

iView 刚发了 2.7.0 版 ,不知道教主对下一个版本有什么计划,希望给开发者提供怎么样的服务呢?

iView 更新还是比较勤的,基本上2周左右会发布一个大版本(版本帝也因此而来),我们不是为了发版而发布,确实是因为这个版本有很多 new features,比如 2.7.0 开始对 i18n 的更好支持

下个版本(2.8.0)重点会放在响应式上,通过很多国外开发者的反馈,它们有时并不需要那么强大的功能,反而对响应式很注重,这也是为什么 iView 有 1 万多 Star,而很多国外开发者仍然选择使用 quasar-framework、vue-material、vuetify 的原因。

教主最近也出版了自己的书籍--《Vue.js 实战》 ,清蒸也有小伙伴购买本书,评价是前几章稍显简单,整体非常棒,教主写这本书的的初衷是什么呢?

我自己是没有写书的念头的,一年前清华大学出版社联系到了我,一番沟通后,决定花点时间来写。市面上关于 Vue2 的书,当时还没有,正好结合 iView 的经验,想写一本偏入门的 Vue.js 书籍。这本书分3部分,第一部分是基础篇,覆盖了 Vue.js 核心的 API,第二篇是进阶,主要讲工程、插件,第三部分是实战篇,着重讲解了2个完整的实战案例(知乎日报和电商)。

Vue.js 的作者尤雨溪--尤大为你的书做了序,写道:本书的优点,正是对重要的知识点结合了一些实战范例来帮助读者更好地理解 API 设计的初衷和使用场景,教主可以为此举个简单书中例子吗?

哈哈,说道尤大大作序,当初联系到他也是费了一番功夫呢。其实除了尤大,也邀请了大漠、justjavac 等前端大牛写推荐语(在书的背面)。

读者反馈比较直观的一个案例是第8章自定义指令的实战项目:开发一个可从外部关闭的下拉菜单。很多人在业务中都做过这个效果,只是万万没有想到,能用一个自定义指令来实现,而且很优雅。其实这些都是 iView 中用过的源码,类似的实战案例还有很多啦。

教主对 Vue 深有心得,在 SF 发起了自己的 Vue 系列讲座 ,可以简单谈一谈,你这个讲座各个章节的内容安排吗?以后,后续新的讲座的一个安排计划吗?

这套 Vue.js 系列讲座内容跟我出版的《Vue.js实战》是相辅相成的,主要讲解了 Vue 的组件、插件,Webpack,Render 函数等内容,每节课都结合了具体的实例。

接下来,我会准备一个新的系列,关于 iView 的实战及剖析,相比上个系列更针对,会深入讲解在业务中使用 iView 的最佳实践和技巧,以及对 iView 组件的开发思路、模块设计,当然也会专门有一节来分析源代码。

Aresn 对技术问题的看法

作为一个有着丰富 Vue 实战经验的开发者,可以简要地从性能、业务使用场景等角度,比较下 Angular,Vue 和 React 吗?

React 我没有在实际业务中使用过,Angular 在几年前用过 1.x 的版本。这三者的最新版目前从性能上看差距不是很大了。我重点说说我对 React 和 Vue 的理解吧(如果不正确还请指正):

  • Vue 使用起来比 React 简单、快,尤其是快速做业务时,可以清楚看到 DOM 结构及关系;
  • Vue2 和 React 在思想上很像,都是基于 Virtual DOM,只不过 Vue 顺便支持了 template 的写法,事实上,大家写的 <template> 内的 html,都会被预编译为 Render 函数。同理,Vue 也支持 JSX。
  • React 在使用上更接近 JavaScript,所以很方便和各类三方工具结合使用,Vue 可以理解本身提供了一套编程思路,就这这个思路开发会快,但也牺牲了灵活性,除非也用 Render 函数来充分发挥 JavaScript 编程能力。
  • React 和 Vue 最大的思想都是组件,而开发一个复杂通用组件时,拼的还是 JavaScript 能力。不过在一些特殊场景,不得不使用 Vue 的 Render 函数,比如一个 slot 在组件内用两遍(Vue 本身没有提供 API,iView 的一些组件中是通过深度克隆一个 vnode 来实现的,在我的书中也有介绍)。

最后,教主你对现在自学 Vue 或者前端知识的小伙伴有什么学习建议吗?有人说自学看文档,你对此怎么看呢?

其实上手 Vue 还是很容易的,只要理解它的思想,从 jQ 的思想中脱离。Vue 的核心思想是数据的双向绑定,精髓是组件和组件化。一个 Vue 组件的 API 来自三部分:propseventsslots,所以就从这三点出发认真学习和练习,看懂了组件,也就懂了整个 Vue。

其实不论是学习 Vue 还是其它框架,思路都一样,文档主要是对框架 API 的阐述,书籍更多的是作者亲身经历的一些实战经验,两者并不矛盾,只是书籍较多,需要寻找一本合适自己的好书。如果你觉得看书很简单,那其实是件好事,说明你已经会了。

文末福利--送《Vue.js 实战》书籍

Aresn 教主的访谈到此为止了,文末送福利啦,各位小伙伴可以在文章的评论区向教主提问,仅限于以下几个方面:

  • Vue.js 的核心功能
  • Vue.js 的性能表现
  • Vue.js 的使用经验、技巧分享
  • Vue.js 前端工程化之组件化和插件的使用
  • 基于 Vue.js 开发 iView 的心得和经验分享

clipboard.png

教主会在未来的 1 个星期(11.27 至 12.04 )内回复大家的提问,以及问题获得其他小伙伴点赞,点赞数排前五的小伙伴可以获得 Aresn 赠送的《Vue.js 实战》书籍一本哟~

Attentions:统计提问获赞数时间为 2017.12.20 12:00,统计结果将会补充在本文章下方


如果觉得我的文章对你有用,请随意赞赏
已赞赏

你可能感兴趣的

53 条评论
小熊2015 · 2017年11月27日

公司用的是element-ui,自己的个人项目用的是iview,给我最大的感觉是,element“傻大粗”,但是组件的功能涉及面很广,尤其是最近用树形结构。iview给我的感觉就是小清新,ui特别的精致,即使做前台页面也没问题,但是功能的全面性方面有些欠佳的。我想问下作者后续再组件的功能扩展性会有所添加吗?很期待。

+7 回复

0

我最近用tag组件的时候也遇到这样的问题,不能自定义添加tag内容,但是自己可以魔改。希望后续能看到功能更加全面的iview,我会一直关注的。

justy1122 · 2017年11月27日
1

table组件在element和iview的使用方式差异很大,我自身的编码能力有限- -,也分不清哪种更好,只是照着文档使用的。在使用的是过程中,发现iview的table中,组件嵌套组件的例子有点少,很多使用方式得自己摸索,比如最常见的后台删除功能的二次删除确认,我用的是poptip嵌套button,在poptip绑定确认事件的时候是on:{ "on-ok": () => {...} }这种。

小熊2015 · 2017年11月27日
aprildove · 2017年11月27日

非常佩服Aresn这样的大拿。关注TalkingData!
Iview也很好用,支持支持!

+3 回复

麦子 · 2017年11月27日

感谢iView, 见证了发展史, iView 已作为前端简历的最低要求 :)

+3 回复

JameHou · 2017年11月28日

iview真的赞,源码看的很清晰,很舒服

+2 回复

aprildove · 2017年11月29日

在使用表格组件时候,遇到一个问题:
表格有一列是用了排序sort 方法的,只要触发了界面的排序按钮,(表格中每一行都有点击发送数据请求的逻辑),会不停发送ajax请求。无法停止。
后来我的解决方法是:不用内置sort,自己写了一个排序按钮组件。
不知道其他人有没有相似的问题呢?
在我看来像是sort出发内部的变动,整个table组件重新渲染,里面的组件数据被重新请求加载。

+2 回复

0

如果是 bug,建议到 https://www.iviewui.com/new-i... 按要求提交 issue

Aresn · 2017年11月30日
0

我想要几个赞,能帮我点个吗?

aprildove · 2017年11月30日
hold_baby · 2017年11月27日

最早是在斗鱼看的直播 一直收藏着在 现在在TalkingCoder潜水 有同路的不

+1 回复

xxxxxmiss · 2017年11月27日

要写出这样一款高质量的UI库,不知道要对Vue源码把握到一个什么程度?

+1 回复

1

其实并不用掌握源码,但是 JS 基础要好,对 Vue 的组件开发有深入理解,理解基本原理及vdom

Aresn · 2017年11月27日
氓羽 · 2017年11月28日

自己是一名大二的学生,自己学习了我网页前端基础知识,现在想学习一下Vue.js,提前自学了JavaScript脚本语言,感觉光学习这些是不够的,还需要大量的新兴技术的支持,希望大家支持我,谢谢!

+1 回复

Galaxy_lee · 2017年11月29日

能帮忙简单的聊聊angular与vue的异同吗?现在个人想在接下来的项目中尝试使用vue,感觉angular有那么一点重。谢了。

+1 回复

0

angular是构建大型应用是没有压力的,属于应用型框架,该有的插件都有,vue属于视图层框架,需要配合其他的部件一起使用,比较轻便容易上手

秋叶独行 · 2017年11月29日
0

如访谈所述,我用 ng 还是 1.x 的版本,而且最近2年也没在用了,所以无法断定目前 ng 版本与 Vue 的差别。

Aresn · 2017年11月30日
周梦康 · 2017年11月29日

哇哦,好多粉丝。真好。

+1 回复

0

哈哈

Aresn · 2017年11月30日
Conrad_Z · 2017年11月29日

vue做hybrid应用如何做到同步登录状态

+1 回复

感觉的身边 · 2017年11月30日

请问本书的是否有对应的练习

+1 回复

0

实战都有练习,但是没有答案?

Aresn · 2017年11月30日
白吟灵 · 2017年11月30日

现在前端变化挺快,vue也有版本更新迭代,那以后当vue出现重大变动时这本书会出新版吗?

+1 回复

hengg · 2017年12月01日

请问 Vue 中常用组件封装为插件再在其他组件中引用和每次都在其他组件中直接引用相比,哪种方式性能更好?

+1 回复

小熊2015 · 2017年11月27日

666

回复

麦子 · 2017年11月27日

666

回复

Twitch · 2017年11月27日

Iview 里 Render 函数 table 里 h 实现 循环支持持吗?

回复

SlaneYang · 2017年11月27日

请教一下,iview和element-ui对比,有什么优势,或者说有什么区别呢?

回复

小彭友晚安 · 2017年11月27日

赞我有好运,获奖概率提高哟

用起来很顺手,跟作者一样大,差距怎么就这么大呢,要加油了?

回复

1

@小彭友晚安 肯定是我描述不对,是提问类的评论不是评论获赞哟

清蒸不是水煮 作者 · 2017年11月27日
gongxufan · 2017年11月27日

样式抄ant,组件抄ele。当然也有部分原创,jquery重度用户随便一说。

回复

0

混淆视听,管中蠡测。

Aresn · 2017年11月28日
0

其实是有参考,不过也是正常吧。别人项目做得好的部分参考一下也没什么。

samt007 · 4月23日
载入中...